Creating a Map Story

Posted: March 14, 2014 in interactive cartography, major studio two
Tags: , , , , ,

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s