Hack Your Maps

by Young Hahn

31 Reader Comments

Back to the Article
  1. Amazing.  New level of immersive content. 

    I wonder if this same technique could be redesigned to flow through an extra large screenshot instead of a map for product tours.

    Copy & paste the code below to embed this comment.
  2. Excellent tutorial, Young.  Thanks so much for sharing this with the world.

    Copy & paste the code below to embed this comment.
  3. 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.

    Copy & paste the code below to embed this comment.
  4. 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.

    Copy & paste the code below to embed this comment.
  5. Nice post!

    CartoDB (https://cartodb.com) is a nice alternative when you need to visualize dynamic datasets.

    Copy & paste the code below to embed this comment.
  6. I’ve been thinking about making some literature themed maps. Good idea using stories w/ expired copyright so I can use actual text! Might try that.

    Copy & paste the code below to embed this comment.
  7. Great article! Thanks!

    Copy & paste the code below to embed this comment.
  8. Young Hahn, loved the article. Saw that you are in DC, have you come across the MapStory team? Seems like this would be a good fit for collaboration!

    Copy & paste the code below to embed this comment.
  9. 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.

    Copy & paste the code below to embed this comment.
  10. @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.

    Copy & paste the code below to embed this comment.
  11. Great read. Thanks Young.

    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?

    Copy & paste the code below to embed this comment.
  12. 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.

    Copy & paste the code below to embed this comment.
  13. I was glad to read this really useful information. Thanks!

    Copy & paste the code below to embed this comment.
  14. Very good article. Thank you very much. It sounds like a good solution for some things. And it’s really good user experience

    Copy & paste the code below to embed this comment.
  15. Very cool idea and implementation, Young. Leaves me with many ideas. Thanks! :-)

    Copy & paste the code below to embed this comment.
  16. 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.

    Copy & paste the code below to embed this comment.
  17. Awesome read, really enjoyed!

    Copy & paste the code below to embed this comment.
  18. 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?

    Copy & paste the code below to embed this comment.
  19. 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

    Copy & paste the code below to embed this comment.
  20. One thing I’ve been struggling with is finding an open-source mapping tool that also has satellite imagery. Are there any out there?

    A different problem: what mapping tools allow images in their infowindows?

    Copy & paste the code below to embed this comment.
  21. @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.

    Copy & paste the code below to embed this comment.
  22. I have been trying to use this template to create a large world map, but using the individual “id” .png images as a class of the locations.

    I would really like to integrate a click event that would zoom and center the map on the location, as well as auto scroll the active section to match the click location

    what is the best place to integrate this event, in the Var markers, Var spots, or would you approach the entire code design differently?

    Copy & paste the code below to embed this comment.
  23. Amazing!!

    Copy & paste the code below to embed this comment.
  24. Great article, you should also check out mapsJS.com as a free alternative to leaflet and mapbox.

    Copy & paste the code below to embed this comment.
  25. How would I go about making those icons clickable and having it jumping to that part of the story?

    Copy & paste the code below to embed this comment.
  26. 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.

    Copy & paste the code below to embed this comment.
  27. 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

    Copy & paste the code below to embed this comment.
  28. Cool, really seen done a great job. Please tell us why you decided to use a brown color in your chart?
    I would like that the realties like to tie at on my site http://t.co/h6g9s3u7my

    Copy & paste the code below to embed this comment.
  29. 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?

    Copy & paste the code below to embed this comment.
  30. I am planning to republish my London e-books to include interactive maps. For your information, links to these maps are shown below:

    https://mapsengine.google.com/map/edit?mid=zz7OCIy2oDA4.k6pgNWXmShgE

    https://mapsengine.google.com/map/edit?gmp=msp&mid=zz7OCIy2oDA4.khkYBa_8ZPHg

    https://mapsengine.google.com/map/edit?gmp=msp&mid=zz7OCIy2oDA4.k7NpS2kl_PvU

    https://mapsengine.google.com/map/edit?gmp=msp&mid=zz7OCIy2oDA4.klI46NrhEbLE

    Copy & paste the code below to embed this comment.
  31. 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!

    Copy & paste the code below to embed this comment.