Module 2

Customizations Using Mapbox and GitHub

Hopefully, you’ve discovered that making a story map in StoryMapJS isn’t very difficult. For many of you, the default authoring tool will be sufficient to produce a story map that meets your needs. However, some of you may wish to further customize your story map. There are a couple of options you can explore. One is to customize the base map by creating your own Mapbox style. Another is to use an image file (like a scanned map) as your base map, what StoryMapJS refers to as the gigapixel feature. The instructions below will walk you through each option.

Create your own Mapbox Style

To make your own Mapbox style, you will need to create a Mapbox account (basic accounts are free) using your personal Google account, or your UW NetID account if you have activated UW Google. Once UW Google is activated, your Google login is your_uwnetid@uw.edu (where your_uwnetid is your actual UW NetID).

In this section we’ll walk you through the following steps:

  • Creating a Mapbox account,
  • Basics of creating your own Mapbox map style using Mapbox Studio.

Create you Mapbox account:

Once you have created your Mapbox account, you will use Mapbox Studio to design your map style. 

For detailed instructions, refer to the Map Styles section of the  Mapbox Studio manual.

To get started right away, view this short tutorial: How to create a custom Mapbox map style using a template

Basic steps to create custom style:

  • Log in to your Mapbox account.
    • From your Dashboard, click ”Go to Mapbox Studio”
  • Click on “New Style”
  • Choose a template
    • Templates already have basic components added, but you can still add/remove components if you desire. You can also edit the layers within the components.
    • The Blank template allows you to pick and choose components by using the add “New Component” [plus] icon
  • After you have made your customizations, save the changes you made to your style by clicking “Publish.”
  • To get the Style URL and Access Token, click on “Share” in the top right.

Mapbox’s YouTube channel has several video tutorials on using Studio:

There are also several video tutorials on the Mapbox site.

To use the Mapbox style you created in StoryMapJS, you’ll need to enter the Mapbox style URL and access token (generated at the time you create your account and/or style) into the StoryMapJS Options dialogue box.

NOTE:  even though your Mapbox account is free, there are limits to the number of times your customized Mapbox style can be accessed by mobile devices and web browsers each month. Please read Mapbox’s pricing guidelines for more information.

Module 2 continued >