Archive for March, 2014

Triggering PopUps with an AnimatedMarker in Leaflet JS from Chris Henrick on Vimeo.

With the help of my web-developer guru friend Eric Brelsford, I’ve managed to figure out one of the last pieces of my Map Story project which was having the animated marker on the map open popups on stationary markers that represent points of interests, natural features, towns, etc. I’ve documented the code in a GitHub Gist which can be viewed live on this block. Excited to be wrapping this project up soon (hopefully!).

Advertisements

Last month I presented my Major Studio One final, Exploring Bias in Spatial Data, at GeoNYC, the Meet-Up group for all things relating to maps and geo-spatial technology. (p.s. this video does a better job of explaining this work than the previous blog post I made.)

Go to minute 47 for the start of my presentation, it’s about 5 minutes long:

Geo NYC Meetup – February 2014: Student Showcase from Boundless on Vimeo.

2014-03-14_15-26-01

2014-03-14_15-26-20

2014-03-14_15-26-30

2014-03-14_15-26-48

2014-03-14_15-27-04

For my major studio two class this semester I’m working on creating an interactive web piece that tells the story of my brother Mike’s epic trek across the Pacific Crest National Scenic Trail in 2013. My inspiration for creating this piece came from a story by the New York Times titled The Russia Left Behind which features a map that animates as the user scrolls through the content. I’m attempting a similar feel with my piece, but rather than using the D3 JavaScript library for rendering the map I’ve chosen to use a combination of Leaflet JS, a few plug-ins for Leaflet including the Animated Marker and Maki Markers plug-ins and JQuery Waypoints to tie the scrolling of the content to creating changes in the map. Last of all and perhaps most importantly the base map I’m using is courtesy of Stamen Design‘s Terrain Tiles. Stamen did a superb job of using open data from both the OpenStreetMap Project and USGS to beautifully render topography in North America. I’m taking advantage of this open-source tile set to add an important visual element to my brother’s story; the user has a detailed visual representation of the mountainous landscape my brother hiked through. In fact you can see how this plays out in the story itself when he describes “the climb”, the first of many ascents on his trip, which he mentions in the second chapter (Warner Springs to Idyllwyld).

For the content of this story I’m scraping text from my brother’s blog using a Python script that uses the beautiful soup library. The photos and videos he  has shared directly with me and generously gave me permission to use. Needless to say there’s an added editorial and curated component to this work from choosing the best photos and checking spelling and grammar. Being comfortable with editing writing from my undergraduate studies in Geography and Urban Studies is definitely helping here!

I’m almost set to do some user-testing, with the intention to get some feedback to improve the next iteration of the project. One last part I’d like to accomplish is for the animated marker to trigger pop-ups on the stationary markers as it passes them. I also have the task of editing and curating my brother’s writing which is another huge undertaking given the detail and length of writing from his blog posts.

The project in its current state can be viewed here, though at this time I have only tested it in the Chrome browser so it may not work in Safari, Firefox and Internet Explorer.