A rather good post. Thinking of all sorts of ways to use this. In particular, I am wondering if this approach would work for retail sales flyer presentation. Have been offering PDFs of the flyer to only customers, but this might be a much better presentation.

This would make a fantastic second screen for shows like A Game Of Thrones that would update with the story line on the TV. For the books, a map link to take you to a snap shot of the story would be fantastically helpful. Too distracting for reading but a great reference when tied to the readers place in the book.

This is a fantastic article, I am really glad I read it through. I’ve been travelling to the UK for more than 30 years. No, I don’t know London. Question: is it possible to construct a map which accurately shows data for the London of Conan Doyle’s time? Or any earlier time? For example, is it possible to bring up a street map of London in 1881? How about London in 1287? How about a street map of Boston, Massachusetts in 1693? This article gives me a whole new way to think of location data. You really put a lot of effort into making it shine. I will surely look closely at opportunities to use location information, where previously I’ve given it no thought.

@Patrick James - yes, you’ll often find us, the MapStory team, and other like-minded DC mappers at the GeoDC meetup.

@Bob Cochran - I actually ran into a variety of very interesting discussions about discerning the historical and modern day locations mentioned in Sir Conan Doyle’s stories. Future topics could definitely involve a deeper dive into the data underlying the base map.

You briefly discuss the usage of maps in responsive design, but I’m not sure it addresses completely fluid responsiveness. Have you come across a method for fluidly resizing both the map image and the associated coordinates lying on top of it, so that they remain accurate upon window resize?

Young, I cloned your GitHub repository. I am very much an amateur at web design, but I’ll play with this; it may help increase my skill. If I get deeply involved in it, I’ll see if I can attend GeoDC…and also fork the repository.

Great free tool, thanks for providing it Mapbox. The design and usage is very cool for frenchise shops & corpote firms. Great article!
However, If it works a bit smoother in browsers, it will be more awesome.

Wow, nice article! I really like the effects when scrolling.
However, having my scroll wheel stuck I feel it would be better if I could also click on an image and then scroll to the associated text. How can we do that?

Thanks Young Hahn for sharing this to the world. Very good and Informative article. The article gives the designers/developers an insight on how the maps can be used effectively to improve user experience

@Jasper1 - adding this sort of functionality on maps is pretty much equivalent to how you’d do it on anything else on the web. You can add a click handler to marker objects and have the handler scroll to the appropriate section.

@susanna murley - most javascript mapping APIs are very flexible with the content of popups. The ones I mention in the article could all be used to show images in popups/tooltips.

As for satellite imagery, there are many public domain sources of data but making a usable satellite layer requires a lot of processing. For example, at MapBox we process multiple open data sources to create our satellite layer.

A bit of synchronicity at play. I have a major Google Maps v2 to v3 conversion coming up at work. As a creative person who used to do a lot of data analysis earlier in my career, looking for an open platform to do creative maps and data visualization. Was at the fluent conference last week with scoot who uses Mapbox for mapping and have been digging into all Mapbox has to offer. Thanks for the great article and look forward to building my own creative maps as well as exploring maps as THE ultimate user interface.

I like your concept Mr. Young Hahn.
Eric Schwarz’s idea also occurred to me.
Especially on smaller devices where map viewing is limited, a separate navigation for the map to include independent viewing of the ‘markers’.
I understand this was an example of the capabilities of mapbox & well done to you and the team there.
Work on Prototyp.ink began yesterday at “The Hub”.
Our first project will be an “interactive infrographic” on the evolutionary theories of humanity incorporating map elements to illustrate location and notable archaeological finds/events. This article has certainly enriched our vision.
Take Care & Good Luck

Planning a new course for next Fall. Trying to decide which open source map tool might be best for teaching college students. In my case, they’re coming from a journalism/graphic design/web design start, not a CS start if that makes a difference. I’m thinking MapBox might be better than D3 in this instance because it really seems straightforward. Thoughts? Any other tools to try out given my situation?

Young, thank you for providing such a coherent and easily-digestible tutorial. I’m a total novice when it comes to interactive cartography, but I had no trouble following along. I forked the git repo, and was hoping to use your map as a starting point for my own project. However, I’d like to update the map so that it uses the latest version of the mapbox.js API, and I’m having some trouble getting my markers to load properly, and to respond dynamically to user input (i.e., scrolling down the page). If you have a spare minute, please take a gander at my question/code over at Stack Overflow. Thanks!