Skip to Main Content

Tutorials + Resources

Storymaps.JS Interface

StorymapJS - Changing Basemaps

Bryan Tor, Nirupama Chandrasekhar | October, 2019

StorymapsJS is a way of presenting information on a larger map, by placing individual points with media links onto a map. It works like a mix between Prezi, Powerpoint and Google Maps. Users can select a map to be presented, and add slides which correspond to different locations on said map.



Changing the Basemap

Paste the link into URL boxFrom the options menu of StoryMapsJS, displayed in the top-left, switch the Map Type field to "Custom".

Paste the link to an XYZ Tileset Map that you copied earlier into the URL field underneath "Map Type". This can be taken from any georeference map that is compatible with ArcGIS, but the library recommends using the David Rumsey Historical Map Collection. 

Finding Custom Maps using the David Rumsey Map Collection

The David Rumsey Georeferenced Maps website is a resource to find historical maps of locations across the world, either city-maps, country-maps, or larger region maps. These maps can then be made interactive, using software like StoryMaps.


1. In order to find a map you wish to use, you can scroll through the geo-reference map finder at the link below. Each of the blue dots pictured below is a basemap template that can be used. 


2. Once you have selected the geo-reference map you want, click on the hyperlink to arrive at the preview map. From this page, click the top row link "This Map", to exit away from the sample geo-reference map displayed. This will bring you into a new screen that displays the metadata of the map. 


3. In the box titled "Use With GIS Apps", press the buttons "Get links" to find the embed code. 

4. There will be several embed codes listed. Copy the XYZ embed link to your clipboard, so you can add it to the custom links section in Storymaps. 

Copy the XYZ link from the David Rumsey Website