How to Create a Story Map with Leaflet

I'm a big fan of narrative mapping libraries, which allow you to easily create mapped stories. These libraries help you create a map with a structured narrative which users can navigate through by scrolling down the page or by using forward and back arrows. As you progress through the story text the maps automatically pan and zoom to highlight the locations mentioned in the narrative

Esri's Story Maps is one of the most popular narrative mapping platforms and has been widely used by a number of newspaper websites to create interactive mapped reports on important news stories. Odyssey.js from CartoDB is another story map library which is now also gaining some traction on some of the world's leading websites.

It is very easy to create your own story map library using jQuery Waypoints. In the past I've used Waypoints with the Google Maps API to create story maps and scrolling Street View applications. If you are interested in using Waypoints with the Google Maps API then check out the examples on this post, Create Story Maps with the Google Maps API.

It is also possible to use the jQuery Waypoints plug-in with Leaflet.js to create a story map with this popular mapping platform. It took me an hour this morning to quickly knock-up JourneyMaps, a demonstration map using Waypoints with Leaflet. The demo shows you how you can use Waypoints to create a story map with Leaflet.

As you scroll down the map a marker and a polyline are added to the map. Keep scrolling and the map changes location and zooms in on the map. You can also scroll upwards to zoom out and change the location.

If you like the JourneyMaps demo map feel free to reuse the code in any way that you like.