mapbox / storytelling

Storytelling with maps template

• Interactive Storytelling
  • Prerequisites
  • Getting Started
    • Steps
    • Generate Map Position Using Helper.html
    • Configuration File and Layer Settings
    • Configuration Options
    • Mapbox Studio Style Configuration
    • Organization
  • Deployment
  • Built With
  • Authors
  • License
  • Acknowledgments

Updated to Mapbox GL JS V2.0.0

• Set use3dTerrain: true for 3D maps

Interactive Storytelling

Some stories are best told with a map. Data journalists covering changing conditions in a population's demographics, the environment, an international conflict, or telling a simple travel story frequently provide geographic context in their graphics.

This template is designed to accelerate building out a "scrollytelling" map story. The primary input is a story broken into sections (chapters), each hooked to a particular view of a map.

Optionally, you can input a custom Mapbox Style with layers styled in Studio and toggle the layer's opacity.

The output is an HTML and JavaScript file. These outputs can be hosted on any web-accessible location, with no extra code or infrastructure required. Note that embedding the output as an iFrame in another page will not work as expected. The scroll-driven interface requires the full page.

Prerequisites

This template is for data journalists and digital storytellers of any kind. No coding experience is required. If you are planning to include some custom map layers, you will need some familiarity with Mapbox Studio.

To configure and publish a story, you will need:

• A Mapbox access token. Sign up for a free account at mapbox.com to get one.

• A text editor. Atom, Sublime Text, and Visual Studio Code are all fine choices.

• A place to publish your work. Any service that hosts static files that can be accessed with a browser will do.

• A story. This is unquestionably the hardest part. The best stories for this template will have sections that benefit from a map.

• Attention to detail. The configuration file does require specific syntax and punctuation. Braces, brackets, commas, and quotes are important. Follow the config.js.template for guidance. Some familiarity with JSON is recommended.

• Optionally, some spatial data in your Mapbox map. The template has options to include layer names to show and hide the data as the story sections transition. You may want to highlight a neighborhood, or show satellite data from two different times.

The template does not rely on any particular CSS framework, fonts, or images. There are some basic styles in the head of the HTML file that can be changed, so feel free to adapt and add to these to match your site and story brand.

Getting Started

• Download this repository as a ZIP file using the button above, and unzip it. If you are using git, clone this repository.

In your local copy of this repository (the unzipped file you downloaded), navigate to the src/ directory.

Make a copy of config.js.template and name it config.js. Open the new config.js file in your text editor.

Steps

1. Select the map style you want to use (the default is Mapbox Streets, but you can find more here https://docs.mapbox.com/api/maps/#styles, or use one of your custom Studio styles).

2. Add a Mapbox access token. A good practice is to create a separate token per map to be able to track traffic to your different maps.

3. Choose whether or not to display a marker at the center of each map location. If you are displaying markers, you can set the color using the markerColor property. The default color is light blue.

4. Choose a theme for the story text. There are light and dark options.

5. Choose where your story should be aligned over the map. Options are center, left, right, and full.

{
    style: 'mapbox://styles/mapbox/streets-v11',
    accessToken: 'YOUR_ACCESS_TOKEN',
    showMarkers: true,
    markerColor: '#3FB1CE',
    theme: 'light',
    use3dTerrain: false,
    title: 'The Title Text of this Story',
    subtitle: 'A descriptive and interesting subtitle to draw in the reader',
    byline: 'By a Digital Storyteller',
    footer: 'Source: source citations, etc.',
    chapters: [
        {

6. Add as many chapters in your template as needed. You'll need a , between each section, but no comma at the end. Here is what a chapter looks like:

{
            id: 'slug-style-id',
            alignment: 'left',
            hidden: false,
            title: 'Display Title',
            image: './path/to/image/source.png',
            description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
            location: {
                center: [-122.418398, 37.759483],
                zoom: 8.5,
                pitch: 60,
                bearing: 0
            },
            mapAnimation: 'flyTo',
            rotateAnimation: false,
            callback: '',
            onChapterEnter: [],
            onChapterExit: []
        },

7. Fill out your sections as needed. Give each section a unique name in the section id property. This will become the HTML div id, so avoid spaces in the name. The title, description properties are optional. The description supports HTML tags. If you have an image that goes with that section of the story, add the path to the image in the image property.

8. For location, you can use the helper.html file to help you determine the map's position. This tool prints the location settings of the map on the screen in a format ready for copy/paste into the template. Optionally, you can change the style in this file to your custom style.

9. Repeat until you have the location entered for each of your sections.

10. Open index.html in a browser, and scroll. Voila!

Generate Map Position Using Helper.html

Using the helper.html file, you can search for places, zoom, pan, tilt, and rotate the map to get the desired map position (Hint: To tilt and rotate the map, right-click and drag the map).

Notice the location parameters are updated in the upper left corner with everytime you move the map. You can copy the location definition from that page into the config.js location property section.

There is also a hosted version of this file at https://demos.mapbox.com/location-helper/

Configuration File and Layer Settings

Here is a sample configuration:

var config = {
    style: 'mapbox://styles/branigan/cjz37rcb003ib1cr3s8rnkt2d',
    accessToken: 'pk.eyJ1IjoibWJ4c29sdXRpb25zIiwiYSI6ImNrMm01aG9hdTBlZGwzbXQ1ZXVrNHNmejAifQ.QHQA0N6XPWddCXtvoODHZg',
    showMarkers: false,
    theme: 'dark',
    use3dTerrain: true,
    title: 'Glaciers of Glacier National Park',
    subtitle: 'Change in coverage from 1998 to 2015',
    byline: '',
    footer: 'Source: Story text from Wikipedia, August 2019. Data from <a href="https://www.usgs.gov/centers/norock/science/retreat-glaciers-glacier-national-park">USGS</a>',
    chapters: [
        {
            id: 'glacier-np',
            alignment: 'full',
            title: 'Glacier National Park Glaciers',
            image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/2015-06-19_Glacier_National_Park_%28U.S.%29_8633.jpg/800px-2015-06-19_Glacier_National_Park_%28U.S.%29_8633.jpg',
            description: 'Glacier National Park is dominated by mountains which were carved into their present shapes by the huge glaciers of the last ice age...',
            location: {
                center: [-113.91666, 48.66451],
                zoom: 8,
                pitch: 0.00,
                bearing: 0.00
            },
            onChapterEnter: [
                {
                    layer: 'gnpglaciers-1998',
                    opacity: 0.25
                },
                {
                    layer: 'glaciernp-boundary',
                    opacity: 0.25
                }
            ],
            onChapterExit: [
                {
                    layer: 'glaciernp-boundary',
                    opacity: 0
                }
            ]
        },
        {
            id: 'harrison1998',
            alignment: 'left',
            title: 'Harrison Glacier, 1998',
            image: '',
            description: 'Harrison Glacier is located in the US state of Montana in Glacier National Park. Situated on a southeast facing ridge immediately south of Mount Jackson, Harrison Glacier is the largest glacier in Glacier National Park...',
            location: {
                center: [-113.72917, 48.58938],
                zoom: 12.92,
                pitch: 39.50,
                bearing: 36.00
            },
            onChapterEnter: [],
            onChapterExit: [
                // {
                //     layer: 'gnpglaciers-2015',
                //     opacity: 0
                // }
            ]
        }
    ]
}

Configuration Options

Note: items in bold are required.

style: This is the Mapbox style url to use for the app. It can be a standard style, or a custom style from your Mapbox account. Use a custom style if you want to include custom data or layers.

accessToken: Your Mapbox access token.

showMarkers: This controls whether markers are shown at the centerpoint of each chapter. If true, the map will display a default blue, inverted-teardrop icon.

markerColor: Accepts hexadecimal, RGB, and color names compatible with CSS standards. If showMarkers is true, this property will override the default light blue marker color.

theme: Two basic themes (light and dark) are available.

use3dTerrain: Enables 3D terrain. (Optional)

inset: Enables inset map. (Optional)

projection: Set the Map object's projection parameter to create a map with a non-Mercator projection.. (Optional)

auto: Enables automatic advancement through the chapters. (Optional)

title: The title of the overall story. (Optional)

subtitle: A subtitle for the story. (Optional)

byline: Credit the author of the story. (Optional)

footer: Citations, credits, etc. that will be displayed at the bottom of the story.

chapters: This contains all of the story content and map controls for each section of the story. Array of objects

• id: A slug-style ID for the chapter. This is read by the JavaScript driving the app and is assigned as an HTML id for the div element containing the rest of the story. A best-practice format would be to use kebab case, like my-story-chapter-1.
• alignment: This defines where the story text should appear over the map. Options are center, left, right, and full. When the browser window is less than 750 pixels wide, the story will be center aligned.
• hidden: Sets the visibility of the chapter to hidden when true. The chapter will still trigger a map and layer transition.
• title: The title of the section, displayed in an h3 element.
• image: The path to an image to display in this section.
• description: The main story content for the section. This should be aligned with what the reader is seeing on the map. In the vanilla version, this field will render as HTML. Images, links, and other items can be included as HTML.
• location: Details about the map display and camera view.
  • center: Center coordinates of the map, as longitude, latitude
  • zoom: Zoom level of the map.
  • pitch: Angle of the map view. 0 is straight down, and 60 is highly tilted.
  • bearing: Degrees of rotation clockwise from North (0). Negative values represent counter-clockwise rotation.
• mapAnimation: Defines the animation type for transitioning between locations. This property supports 'flyTo', 'easeTo', and 'jumpTo' animations. If not specified, defaults to flyTo.
  • flyTo and easeTo options (curve, maxDuration, minZoom, screenSpeed, speed) can be included in the location array, for example:

            location: {
                center: [-113.72917, 48.58938],
                zoom: 12.92,
                pitch: 39.50,
                bearing: 36.00,
                speed: 0.2,
                curve: 1
            }

• rotateAnimation: Starts a slow rotation animation at the end of the map transition when set to true. The map will rotate 90 degrees over 24 seconds.
• callback: Accepts the name of a JavaScript function and executes the function. Use this if you have custom code you want to run for a chapter, like turning a legend on or off, adding data from an API request, or displaying an interactive graph.
• onChapterEnter: Layers to be displayed/hidden/muted when the section becomes active. Array of objects
  • layer: Layer name as assigned in Mapbox Studio.
  • opacity: The opacity to display the layer. 0 is fully transparent, 1 is fully opaque.
  • duration: The length of the opacity transition, numeric, in milliseconds. Default is 300. This is an optional parameter and can be omitted.
• onChapterExit: Same as onChapterEnter except it is triggered when the section becomes inactive. Array of objects

Layer Configuration in your Mapbox Studio Style

Add and style each custom layer in your Studio style. Before the final publish, set any layers's style to be hidden with 0 opacity. Do not hide the layer. For example, if you have a circle layer, makes sure the color-opacity and/or the stroke-opacity is set to 0.

This will ensure that the map appears correctly when the story page loads. To adjust the opacity of the layers as the reader scrolls through the story, use the onChapterEnter or onChapterExit configuration options to set your desired opacity for the layer.

Organization

• src: Code for the template
• example: Example stories
  • glacier: Glaciers of Glacier National Park example
  • bike-philly: Philadelphia bicycle infrastructure example

Deployment

Host the index.html and config.js files in the same directory in a web-accessible location. If you don't know where to start, look into GitHub Pages or Netlify.

Built With

• Mapbox GL JS
• Scrollama.js

Authors

John Branigan on the Mapbox Solutions Architecture Team

License

BSD 3-Clause License

Acknowledgments

• Lo Bénichou for the idea, support, and awesome feedback throughout the design and build process
• Paige Moody and Lem Thornton for early testing and feedback
• Chris Toomey for ushering this work through and keeping things on track
• Journalists with stories that help us make sense of what goes around us
• Digital Democracy and Rudo Kemper for their fork that inspired many later features.
• Paul Franz for developing customizations and providing feedback.

Notable Examples

• Connectivity Disparity Across Schools in Kazakhstan: UNICEF
• Saving the Nile: Aljazeera
• 49 Mile Map: San Francisco Chronicle
• Dark Vessel Detection: ICEYE
• Nuestro Territorio Es Nuestra Vida: Digital Democracy
• The Chinese Economic Footprint In Central And Eastern Europe: CSD
• Safe passages: Washington Post
• Polar Star Inn and Seipel Hut: Huttrip
• Ten Conflicts to watch in 2022: Crisis Group
• The Guiana Shield: The Amazon Conservation Team
• Watchlist 2021: International Rescue Committee
• A River Drained: Kontinentalist

mapbox.com/resources#solutions

storytelling's Issues

[Feature Request] Highlight specific country

Most of the time, when I need to use storytelling, I want to restrict the story to a specific region.

In Mapbox it is possible to style a single country but it could be awesome to do this directly from the storytelling config.

What do you think?

iOS scrolling breaks on map rendering using Vanilla

I'm using the vanilla plugin and I've been running into a problem where scrolling stops working on ios when the map has to render after loading. I dug into it a little bit and found that the features layers seem to disappear when the map has to render in the browser.

Here is a screenshot of the layers visible when it's frozen and the features layers have disappeared:

Here is a screenshot of the layers when things are working properly:

If I rotate the device it starts working again and I can scroll normally.

You can find a live version of the project here: http://cameronwkruse.com/home/projects/runthestairs/

Originally, I assumed this may be connected to the GEOJSON map layers I was adding, but it seems like you can replicate whenever the map has to load a new rendering.

Marker color options

Allow the author to choose the marker color.

Completed sections:

• Vanilla JS
• React JS
• README
• Vanilla examples
• React examples

Third party vector tile source in story telling

Does this support adding vector tile layers that are not hosted in mapbox studio?

edit looks like the react version does expose transformRequest function :D so I could pass credentials... only thing I'm not sure on is would I be okay to pass my own paint style layer for that custom tile source using the template or would I have to build that logic into the App.js file

Notable mobile-friendly example: "49 Mile Map: San Francisco Chronicle"

I was clicking through the "Notable Examples" looking for inspiration for a mobile-friendly story map.

The only example that IMHO deserves the label "mobile-friendly", is 49 Mile Map: San Francisco Chronicle, built by @ewagstaff AFAICT (sadly not credited on the story, view-source FTW). I would suggest to highlight this fact somehow, as I feel like this is one of the most important aspects when building story maps for a wider audience.

Note: Dark Vessel Detection: ICEYE also looks mobile-friendly at a first glance, but it is missing vital information in the mobile view, since entire paragraphs of text are just hidden.

PS: I know it looks like this repo is currently not maintained, but I feel like I'm at least highlighting the example a little bit by creating this issue, even if nobody will update the README anytime soon :-)

Add legend and filters

Hey everyone,

The template is so helpful. Many thanks to the Mapbox team for putting it together.

Does anyone know how one could add a legend and potentially also filters to the map? They will of course be different for every chapter as different layers will be shown.
I saw it being implemented here https://comet.dlsu.edu.ph/riesgo-vis/ but they are using React as well and I would like to stick to my index + config file.

Thanks in advance

Issue with Storytelling when using Globe view (inset map issue)?

I have been experimenting using the new Globe view projection. Storytelling, or possibly Scrollama, seems have trouble with this new projection.

The issue is, when scrolling between the chapters (as defined in config.js), flyTo/easeTo proceed to change the camera angle. It does so for a couple of frames, and then halts. As a result the next chapter's content have loaded, but the camera angle is still nearly in the original starting position. Note: scrolling up/down continuously will trigger the camera angle to move a couple more frame, but continuously halts.

Edit: Scrolling backwards from the last chapter globe view seems to work fine.

Storytelling in a WordPress post?

Hi!

We'd like to use Mapbox storytelling on our WordPress site. We're open to any way to make this possible, but ideally it would be to keep the header and footer of our site and put the storytelling in the content section of the page/post. Do y'all have ideas?

Cheers,
Doug
https://www.berkeleyside.org
https://oaklandside.org

add animationEssential parameter as additional option for flyTo and easeTo in the storytelling template

Hello,

many thanks for providing this awesome template. As a person with no experience in javascript, this is very helpfull!

Animations between chapters are often quite essential for telling the story. When a user has set prefers-reduced-motion: reduce #8494 animation is set to never animate camera transitions.

To integrate an essential option is a pull request for Mapbox GL JS as well: mapbox/mapbox-gl-js#8883

It would be nice, if it would be possible to enforce animations, if they are essential. Since the template is focussed on non coding, I would suggest to add a possibility whithin the location parameter of any chapter, for example:

location: { center: [-122.418398, 37.759483], zoom: 8.5, pitch: 60, bearing: 0, animationEssential: true }

since I don't have any knowledge in javascript or within the #Mapbox environment, this is just a naive suggestion, but it would be very nice to have :)

Best wishes,
Frederik

Layers

Dear all,

First of all thank you for the amazing template!

Unfortunately, the doc is quite minimal and does not explain where the layers in the config.js come from. I have had a look at the example but they are defined in the config.js but nowhere else.

Can you please guide me to create a custom layer (e.g. maybe a region highlighted in red?). Then I could update the README properly to also include a deeper explanation on that part.

Thank you :)

Cheers,

Francesco Saverio Zuppichini

Include opacity transition duration in layer toggle

Allow the author to optionally set a custom transition duration to "fade in" a layer. Can be set in along with the opacity property.

Completed sections:

• Vanilla JS
• React JS
• README
• Vanilla examples
• React examples

...

...

Positive z-index of .mapboxgl-map breaks map.flyTo

I'm using the React template and I am adding some layers with popups. I can't interact with the layers when the z-index of .mapboxgl-map is negative. When I set the z-index of .mapboxgl-map to a positive value, the popups work. But when I do that, the map.flyTo stops working (map.jumpTo still works, though).

Add documentation about CSS customization

• comments in the <style> section
• example of a modified style with custom fonts, rounded corners
• breakdown of a published example

Chapter Enter Inverted

Hello, I've been working on a storytelling project for a few weeks now. I have all of my layers properly loaded (as far as I can tell) in the config.js file. But when I go to view the file, the maps aren't appearing in the project. After a couple of scrolls I noticed that certain maps would appear when I would scroll from the bottom of the paper upward. But now when scrolling from the top of the page downward. Does anyone have a solution for this?

Mobile-specific location override

Provide a config option for a mobile screen location for each chapter. This accommodates some custom location setups that may shift the center of focus a bit to the left or right when the chapter alignment is to the side, and also a smaller zoom level to ensure features are visible on smaller screens.

Completed sections:

• Vanilla JS
• React JS
• README
• Vanilla examples
• React examples

Add class for a hidden chapter

A hidden chapter would be invisible to the reader, but would trigger a map transition when it is scrolled to. Can use a new CSS class to hide it, and a corresponding config property.

Completed sections:

• Vanilla JS
• React JS
• README
• Vanilla examples
• React examples

Changing a layer

When I change a layer in a chapter, the layer in my story doesn't get updated.

What's the best way to use image of each item as map markers?

...

...

navbar

I've been using the vanilla template with enough chapters that I thought some kind of navigation bar functionality might be useful to jump to the larger sections in which I had been grouping chapters (https://tmacog-gov-members.netlify.app/).

The quick-and-dirty solution I came up with was to create a first chapter that had links to each section-heading chapter in the description, then each section-heading chapter has a link back to the top at the end of its description.

I tried putting the links in the byline of the header, as I thought that would have looked better, but I don't think it worked. Should I be able to put any HTML in any parts of the header?

Text boxes appear to be scrolling behind the map on Safari.

When using firefox on web and android, everything looks fine. But when I use Safari the boxes often don't scroll over the map. It looks like everything is working, except the boxes are scrolling behind the map, and are thus unseen. If I wait a bit and come back to the page, the boxes sometimes appear normal. But after refreshing, they disappear again. This is my code

map interaction

exploring this and testing in comparison to similar tools.
what may be a basic question:
Is it possible to maintain the ability to interact with the map?
In other words, at the moment I am locked to the specific views for each chapter - would like to be able to explore the map through normal mouse interactions.
I go to a specific chapter/viewpoint, but I can still explore around that point.
Is this something in the config file or un-supported?

Does anyone know how to add a video?

Any plans for adding a Create Story Form workflow?

I was thinking of extending this solution to an even wider audience by creating a website where the user can create the stories and chapters using a form. The user first clicks on 'New Story' and proceeds to add data for each subsequent chapter and then pressing 'done'. The map is generated and the data saved in a mongo database so yes I guess there will be authentication, login and the basic CRUD functionality.
Do you have some high-level tips?1116513.png)

Provide map transitions options

In the config, provide a way to choose between flyTo and jumpTo.

• some animations take a long time to finish and vector tiles drop, resulting in poor ux
  • if the start and end zooms are tight, and the distance is far
  • if the map uses a heavy tileset like terrain
  • if the author expects a slow user connection

Completed sections:

• Vanilla JS
• React JS
• README
• Vanilla examples
• React examples

links in AttributionControl on map should be clickable

At least in the demo at https://demos.mapbox.com/scrollytelling/ (not sure if it applies to all pages created with this) the Mapbox logo (bottom left) and attribution links (bottom right) are not clickable due to the story div.

To fix this I think the story div should sit between the mapboxgl-canvas-container and mapboxgl-control-container elements inside the map.

Example map style not available in bike-philly

The example uses the following style.

mapbox://styles/branigan/cjzsvonse027m1co4nkxp13b3

This style is referenced in the bike-philly example.

Unfortunately, this style is not available (also not to my paid account). It gives the following error:

Internal error
Account over limit.

Would it be possible to re-enable that style or use another shared style?

Custom layers in config.js

Hey, I just wanted to know if it was possible to add custom layers such as https://docs.mapbox.com/mapbox-gl-js/examples/#layers instead using layers from mapbox studio

Pulse animations for point and line layers

The animations apply to Studio point or line layers. This can be included as a boolean option along with the opacity property.

Completed sections:

• Vanilla JS
• React JS
• README
• Vanilla examples
• React examples

Option for map rotation at the end of a map transition

After the map transition is complete, a boolean property in the config can control whether the map remains static, or slowly rotates. This creates a striking visual effect when using fill-extrusion layers.

Completed sections:

• Vanilla JS
• React JS
• README
• Vanilla examples
• React examples

adding markers for specific chapter of the story telling map

Hi there.

First off, let me congratulate of the AMAZING work you did. It is very impressive and looks very elegant.

I wonder if there is any chance to add markers when scrolling along the story, like for instance:
I move to chapter 2, and suddenly (fading in) I see some markers appearing.
The when scrolling on, these markers disappear and leave room to others.

I tried having a look at the config map, and have seen a sequence of json-like instances. However, cant figure out how and where to add the above feature.

Thank you and keep up the amazing work.

[Performance] Improve Storytelling first page load time

Problem

As a Storytelling map user, I want my web page to load as fast as possible for the best user experience and SEO / Page Load Time. The Mapbox GL JS library is relatively large vs. other assets on the page, so loading it in my webpage header as a synchronous, blocking operation can impact my time-to-first page load.

Solution

Change the vanilla js template to load and initialize the Mapbox GL JS library asynchronously, alongside the rest of the page assets like HTML and CSS. This allows all smaller assets to load while the larger GL JS library loads and fetches the first map assets like the style sheet, fonts, glyphs, and tiles.

Implementation

Fist load the JS library async in the page head element:

<head>
<script async defer src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.js' onload="initMap()"></script>`
</head>

Then define the function to run after the Mapbox GL JS library loads:

<script>
function initMap() {
            mapboxgl.accessToken = 'my-token';
            map = new mapboxgl.Map({
                container: 'map',
                style: style_url,
                zoom: 1,
                hash: true
            });
        // Add functions that happen after the map initializes here
}
</script>

Finally, load the Mapbox GL CSS at the bottom of the page, after all HTML and headers have completed:

<script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.7.0/mapbox-gl.css' rel='stylesheet' />
</script>

cc/ @jbranigan @lobenichou

Missing Documentation for React Example

The TOC references documentation for a React example, but the links are broken and no such documentation exists in the Readme.

Support masked/scrub transitions

For some reason this story shows up with amazing scrub and mask transitions when rendered by Apple News .

Could be implemented with https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/ (has an option for vertical)?

Option for callback function after map transition

Include a function name as an option in onStepEnter. The author would write this custom function in the page <script> tag. An example would be to kick off a D3 chart animation in the chapter body.

Completed sections:

• Vanilla JS
• React JS
• README
• Vanilla examples
• React examples

[Feature Request] Trace and follow a route

Mapbox storytelling seems interesting but for me there is a missing important feature: The ability to following a route like this example.

It would be awesome if something relative could be implemented.