StoryMapJS from Knight Lab at Northwestern University has been an indispensable tool for digital assignments for many years. The tool allows students to tell stories with maps by associating a sequence of multimedia slides with locations on a map. These locations can be plotted on an assortment of underlying maps, or “base maps”. While most students simply choose to use whatever map is set by default, once can easily go into the options panel for a project and change the base map used in the final presentation. The Map Type dropdown menu in the options allows one to select from several freely available tiled maps. If you notice at the bottom of the menu, however, it also allows you to select ‘custom’. With the help from the UC Santa Cruz Library and a little bit of experimentation, I’ve discovered how powerful this option can be.
While plotting locations on a modern street map may work well for many projects, one can easily imagine how useful it would be to be able to tell stories on top of historic maps, or basically to drape a digitzed historic map “on top of” the map and place markers on that instead of on the modern map. This custom option allows you to do just that, with some practical limitations that may be worth mentioning.
These practical limitations have to do with the way that maps tend to be made available online. Almost all online mapping applications, including StoryMapsJS, use tilesets to display maps. You may have noticed when using an online mapping platform such as Google Maps that when you zoom in or out, the map loads not as one large image but rather as a series of square tiles. These tiles are really the secret to the useability of these maps. if not for the tiles, the application would have to load the entire map every times you zoom in. With tiles, it is only necessary to display the portion of the map that will actually be visible within the map window. That is all well and good. The downside of this convenience, however, is that those sets of tiles must be prepared ahead of time and the resulting tileset can be huge. (By huge, I mean that a world map at just a median zoom level – a zoom level at which you might fit a large city within the frame of the map – consists of over a million tiles). While creating a custom tileset is entirely possible, it is a big enough job that it is usually outside the scope of a single course or assignment.
There are, however, collections of the tiled maps (XYZ tiles) that have been geo-referenced and are ready to be imported into StoryMapJS. The David Rumsey Georeferenced maps collection is a resource for finding such maps. To find a map, browse the collection or zoom into the provided map in which each blue dot represents a geo-referenced map in the collection.
Once you have found a map you would like to use, click the This map link at the top of the page. This will take you to a page with details about this specific map. Scroll down to the lower-left to a section titled ‘Use in GIS apps’. You may have to log in first, but after you do, click the Get Links button to reveal several options. Copy the URL titled XYZ link. Copy this URL and add it to the options in StoryMapJS.
After the custom map has been added to StoryMapJS, you may have to zoom in and out a few times to find the map within the white field, but once you do, you can add markers and begin creating slides.