StoryMapJS - Using MapBox in StoryMapJS

Using MapBox in StoryMapJS

StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events.

If you experience issues with StoryMapJS, you may refer to the additional documentation or contact the ITS help desk at 909-621-8061 or servicedesk@pomona.edu. Additional video tutorials are available via Pomona College ITS at https://app.vidgrid.com/content/jmaRnqQFZPqn.

Using a custom map instead of one of the ones StoryMapJS offers allows users to create an individualized experience. However, the custom option involves serving out a map with your own web server. Since this is a complicated process, users can also take advantage of free services like MapBox.

Using MapBox

Go to https://www.mapbox.com/maps
Select “Sign Up”
Enter the required information to create your account and select “Create Account”
Open the confirmation email you will be sent and click the link provided
Select “Create a Map in Studio”
Select “New Style” in the right-hand corner

At this point, can begin creating your custom map to later input into your StoryMap. Users can change the colors used to note components of the map, add and customize layers, enable 3D terrain, and much more. However, even the simplest of adjustments have the potential to create a unique map.

Choose a template and variation when directed to
Select “Customize _your template__”
Use the settings on the left side and top to further customize your map as desired
When ready, select “Publish” in the top right corner
Select “Share” next to “Publish”

From here we will be interested in the information under “Developer Resources" that are displayed when clicking on the Share settings. Specifically, we are interested in the Style URL and Access Token.

Getting Started

Log into the StoryMap you want to work on
Select “Options” in the top left
Using the drop-down menu to the side of “Map Type,” select “MapBox”
Going back to the share box from MapBox, copy and paste the Style URL into the designated area of the options box for your StoryMap
Users will also need to copy and paste the access token provided by MapBox into the designated area of the options box for StoryMap

From here on, users can continue to add makers to their StoryMap, simply with a distinctive map as the platform for doing so.