Repeat this process until you have all your locations set up. You can then start adding a title, a description, and url or paths to images.

To check out the results, open index.html in the browser and scroll. That’s it! You now have a fully functional map with markers. You can view a demo here.

Level up: Styling layers

Now, we’re going to take this template to the next level by styling custom layers in Studio and using the template to control the layers’ visibility. The following examples are from a map originally published on the Huffington Post that I rebuilt in the template.

To include custom layers in your story, you first have to upload and style your data using Mapbox Studio.

After uploading and styling your data, you should toggle the layer’s opacity (NOT the visibility) based on the layer’s desired behavior when scrolling. The rule of thumb is that the opacity of a layer set in Studio will remain the same until it is changed in the template configuration files.

In the example above, I want the fires and the satellite layers to be visible on my first chapter so I will leave those as-is. You can also keep all the layers that won’t require any adjustments, such as background , water , etc.

For all layers that you don’t want to be visible in the first chapter, turn the opacity down. Those will be adjusted in the configuration file later. Once you’re done, you can publish your style and click on the “Share” button to get the style url and your access token.

The url and the token will go at the top of your configuration file. You should also turn off the showMarkers option since we won’t be needing the default markers for this story. Pick a theme ( dark , light ) and an alignment ( left , right , center ).

Now, we’re going to update our chapters and adjust layers based on the story we’d like to tell.

Similar to our basic example, you can update the title , the description , and even add an image. But we’re also going to specify the opacity of each layer, which will be triggered as the user scrolls through the different chapters of your story. This means that when a text block enters or exits the screen, the layers’ opacity will adjust based on your settings.

Note that a chapter can enter the screen twice: once while the user scrolls down and once while the user scrolls back up. This means that if you want certain layers to return to their initial state, you will want to specify the settings in onChapterEnter . For example, in the setup above, I know that fires and satellite are already configured in Studio to show up on the initial load. I could therefore leave onChapterEnter as is. However, I still want to specify the opacity for each layer in onChapterEnter for when the user scrolls back up to Chapter 1 and 2. So chapter 1 and 2 will actually look like this:

Now, when the user moves from one chapter to the next, up or down, the state of these layers will be reset.

With onChapterEnter and onChapterExit you can control the opacity of each layer using a number from 0 to 1. Below, I am adjusting california-33 to be 0.8 on enter and 0 on exit.

For each chapter, you can repeat those steps, adjusting your layers as needed. The result should be a story that takes the reader through relevant data points, contextualized by location and visualizations. You can experience the full demo here.

Optional: Publish to Glitch

There are many ways to publish your final story online. Glitch is an easy-to-use platform that lets you create and publish web apps with little to no-coding. First, sign up for an account. Then let’s move the code from your computer to the web!

On the Glitch homepage, click on “New Project” and select “hello-webpage.”

This will open a new project dashboard. On the left, you can delete all the default files and upload your own. That would include index.html , config.js , and your images from your template.

Note that images uploaded to Glitch will now have a new url. To make sure your images show up once you publish, replace the url in config.js with the new Glitch url. To get the new url, click on “assets”, and click on the image.

Click on “Copy,” navigate to your config.js file, and replace the old url with the new one, like so:

And you’re done! You can preview your app by clicking on “Show” > “In a New Window.” Here is the demo published on Glitch.

Share what you build on twitter with #builtwithmapbox and if you have any questions, reach out at @lobenichou.