This module covers how to turn a georeferenced map of your own into a tiled map to use in StoryMapJS using Mapbox.
As a historian making a storymap, you may well want to use a scan or a photograph of a historical map as the base map. If you are working with a scanned image of a map in a format like .jpg or .png, you can either:
Gigapixel story panoramas are discussed further in a separate module. This module focuses on georeferenced maps.
The two modes are very similar, but there are some important differences.
|Gigapixel option||Mapbox option|
|Find locations by hand||Locations and coordinates are searchable during StoryMap design|
|Can set a background||No background image or colour behind the map|
|Map identical to original image||Georeferencing may distort the image|
|Tracks are off by default||StoryMap creates a track between each location by default|
|Must supply image as Zoomify tiled image||Must supply map as tiled map (done automatically by Mapbox)|
|File server required for image tiles||Tile map server required for map (e.g. Mapbox)|
|Cannot be changed back into map format||Can be changed into a Gigapixel|
* Note: Tracks setting can be changed (Treat as Cartography/Image).
If you are using a historical map in StoryMapJS, it is worth thinking carefully about which approach is best. Georeferencing can be laborious, especially for beginners. It may not be worthwhile to georeference a map solely for use in Map mode on StoryMapJS, but georeferencing has many other potential applications. To georeference your map, you can follow the lesson on Programming Historian on georeferencing in QGIS.
To use your georeferenced map on StoryMapJS, save the georeferenced map in a GIS format like geoTIFF or Shapefile. Now you will be able to upload it to your Mapbox account.
First, upload your georeferenced map to Mapbox: create a Mapbox account (free), and upload your map. Mapbox will only accept files in GIS formats such as Shapefile or GeoTIFF.
Once your map has been uploaded to Mapbox, you will need your Map ID and a public access token. To find these, open Mapbox and go to your account.
To get the Map ID, select Tilesets and then the map you want. The Map ID is on the right-hand side. It will be of the format
To get the public access token, go to Account/API access tokens/Default Public Tokens. The very long code is your access token.
Now go back to StoryMapJS. Select Mapbox in StoryMap Options/MapType, and StoryMap will ask for the Map ID and the Access Token we just collected. If you have copied these correctly, your map will appear (after a short delay).
If your map does not cover the whole area of your StoryMap, the regions which are not included in your map will appear blank.