Telling Mapped Stories with Odyssey.js

Over the last couple of years a number of narrative mapping libraries have emerged, which allow you to easily tell mapped stories. These libraries make it easy to 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 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.


This week CartoDB has been showcasing some of the best examples of narrative maps built with Odyssey.js. Odyssey.js: Examples in the Wild reports on five interesting story maps created with the platform.

The New York Daily News' 48 Hours of Gun Violence uses Odyssey.js to map 16 shooting incidents reported over a 48-hour period in New York. The map uses a Leaflet map with an overlay element containing the written report on each incident.

Forward and back arrows allow the user to navigate through the mapped shooting incidents. As you progress through the report the map automatically updates to highlight the location of each incident.


The second example The Voyage of the Beagle maps the second voyage of the famous survey ship The Beagle and the observations made by a young geologist called Charles Darwin.

This example uses two separate elements, one holding a Leaflet map and the other holding the scroll-able text narrative of the Beagle's journey. As you scroll down through the text element the map automatically pans and zooms to highlight the relevant locations mentioned in the narrative.


A third map Gull Eric During Breeding Season uses yet another technique to progress through the mapped narrative. This time the map uses a playback function to automatically animate through the story.

Users can pause the animated playback at any time to stop the map and narrative at a particular moment. It also possible to navigate to specific points in the narrative using a time-line control.