B. Using Your Own Map


This module covers how to turn a georeferenced map of your own into a tiled map to use in StoryMapJS using Mapbox.

Scanned Maps and Georeferencing

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:

  • Use your image as a gigapixel (story panorama) or
  • Generate a georeferenced GIS file from your image, upload it to Mapbox and use it as a map

Gigapixel story panoramas are discussed further in a separate module. This module focuses on georeferenced maps.

Gigapixel or Mapbox?

The two modes are very similar, but there are some important differences.

Gigapixel optionMapbox option
Not georeferencedGeoreferenced
Find locations by handLocations and coordinates are searchable during StoryMap design
Can set a backgroundNo background image or colour behind the map
Map identical to original imageGeoreferencing may distort the image
Tracks are off by defaultStoryMap creates a track between each location by default
Must supply image as Zoomify tiled imageMust supply map as tiled map (done automatically by Mapbox)
File server required for image tilesTile map server required for map (e.g. Mapbox)
Cannot be changed back into map formatCan be changed into a Gigapixel

* Note: Tracks setting can be changed (Treat as Cartography/Image).

What is georeferencing?

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.

Mapbox and Using Your Own Map

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 userid.1abcdef2.

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.

css.php