StoryMapJS is a tool built by the Knight Lab at Northwestern University, primarily built for creating narrative maps for journalists but also useful for teaching. The interface for StoryMapJS is easy and simple, and allows users to connect text and images to points in space through a linear narrative.

Creating a StoryMap

On the main page, select “Make a storymap now” to get started. StoryMap will need to connect to your Google Account—all of the data you create is stored in a Google Spreadsheet, which means you don’t need to worry about maintaining a database or content management system for the map to work.

Log in prompt for StoryMapJS.

Log in prompt for StoryMapJS.

Upon logging in with your Google account, you are presented with a blank map and an interface reminiscent of a powerpoint presentation along the lefthand side. Note a few of the other parts of the interface: in the upper left, there are Options for the map and narrative; in the upper right an option to Share the map once it’s ready.

The blank canvas of StoryMapJS.

The blank canvas of StoryMapJS.

By default, StoryMapJS presents you with Stamen Design’s toner map, but there are additional options for basemap types.

StoryMapJS basemap types.

StoryMapJS basemap types.

Elements of the narrative map are added by creating new slides. The first slide is the title slide, which you can include the title of the project, some explanatory text, and will show an overview of all the points on your map. As we add slides, we can create narrative text and include media elements like images and embedded YouTube videos.

Creating slides in StoryMapJS with a YouTube video.

Creating slides in StoryMapJS with a YouTube video.

Here’s the full map in all it’s glory (you can also view it in its own window):

Let’s make a map

During the workshop, we’ll create a narrative map of William F. Cody’s time in Colorado. You can find a variety of documents at the William F. Cody Archive, which I’ve narrowed down to Colorado-related documents.

Working individually or in groups, create your map with the following steps:

  1. Go to StoryMap and click “Make a story map now.” You’ll be prompted to log in with your Google account.
  2. Create a title slide. The title slide will be created from places on later slides, so not much will be shown at first. But add a title and some opening text.
  3. Create at least two slides, selecting objects from the Cody Archive that make sense to you. Feel free to search beyond the results I’ve provided (for example, maybe you’re interested in locations mentioned in books authored by Cody). Each of the slides should be associated with a point, which you can either search for or drag the pointer to a location. Try uploading an image and adding texts (for the sake of time, dummy text is fine).
  4. Explore the slide options and general options.