Mapbox's New Scrollytelling Template

Story Maps are an excellent way to not only visualize geographical data but to pick out the stories and patterns in your mapped data. Thanks to Mapbox's new Scrollytelling Template there is now a new tool to help you create your very own 'scrollytelling' map stories.

You can preview a story map created with the Scrollytelling Template on this demo map. The demo map not only introduces the new Scrollytelling Template it shows you what you can do with the template. As you scroll through the story the map zooms and pans to different locations. It also adds and removes data from the map and adds and removes different map layers and features as you scroll up and down on the page.

I've only had a quick look at using the template myself. Creating your own story map, mainly by adding your own text and locations to the config.js JavaScript file, is reasonably straightforward. It also seems fairly straightforward to add your own layers to a 'chapter' when you want to change the data or appearance of the map. However creating a story map with the Scrollytelling Template isn't a trivial task.

I'm still a big fan of Mapbox's Scroll Driven Navigation map in the Mapbox GL example maps. If you just need a simple story map template then I think I would use the Scroll Driven Navigation example. The new Scrollytelling Template comes into its own however when you need to add and remove map features and layers for each chapter in your story and if you want to add and remove different data layers.

From the example scrollytelling maps provided on its GitHub page it appears that the Scrollytelling Template disables any user reactions with the map by default. Looking through the configuration options there doesn't appear to be any easy way to allow users to interact with the actual map. Therefore it looks like you will have to play around with the CSS styles which hold the story text if you want your users to be able to explore and play with the underlying map.