StoryMapJS

StoryMapJS is an open-source tool created by the Northwestern University Knight Lab for building interactive, media-rich maps.

StoryMapJS is very easy for beginners to learn. Users with a more technical background can also easily customize their final product. For example, more adventurous users will be able to tell stories with large photographs, works of art, historic maps, and other image files by hosting gigapixel files on a web server.

• Make sure you have a Google account before heading to Knight Lab’s StoryMapJS site.
• Once there, click the Make a StoryMap button.
• In Your StoryMaps pop up, you’ll have the opportunity to start a new project or access StoryMaps that you’ve previously created.
  • To start a new project, click the New button in the bottom right corner of the pop up.
  • To edit a previously created project, click on the title of that project.
  • To Copy, Rename, or Delete a previously created project, click the cog to the right of each project.

There are certain Options regarding Display and Sharing that you’ll want to consider when starting a StoryMap. To access these, click the Options button at the top left corner of your browser. These include:

• Size – In percentage (%) or pixels.
• Language – For controls and messages.
• Fonts – Chosen as a set.
• Treat As – Map will almost always be the standard (unless you’ll be creating a story from gigapixel files hosted on a web server).
• Call to Action – A button on your first slide to lead users into your story.
• Map Type – A predefined or customized base map.
• Sharing – Settings to share or embed your StoryMap.

You’ll create two types of Slides in StoryMapJS:

• Your Title Slide will be the first slide users see. It will show the points from all your Body Slides.
• Your Body Slides will make up the bulk of your StoryMap.

All Slides consist of the same information:

• Headline – The title of your StoryMap (on a Title Slide) or Slide (on a Body Slide) in your primary font; usually short.
• Body Text – The longer text in your secondary font located underneath your Headline.
• Marker – A default or custom pin that marks the Location of a given Body Slide.
• Location – Can be set manually (by dragging the Marker around the map), set by coordinates (in the form lat: lon:, or searched for (in the search bar at the bottom of the map).
• Background – A color or custom image for a given Slide.
• Media – An audio clip, video, or still image for a given Slide. StoryMapJS supports a variety of Media types from a range of publicly accessible sources. Many of these can be included in your story simply by adding the link to the media file in the Media URL box. However, you are also able to Upload Media to the StoryMap itself.
• Credit – Source or copyright information.
• Caption – The text in a small font located under a Media asset.

In order to make your StoryMap accessible, you’ll need to share or embed the link to your project:

• Click the Save button at the top left corner of your browser, and, if given the option to Publish Changes, do that as well.
• Click the Share button in the top right corner of your browser. In the menu that pops up, you’ll have the opportunity to set a Description for your StoryMap and Upload or Choose a Featured Image. You’ll also have the opportunity here to copy a link or embedded link to your StoryMap.

• When starting any StoryMapJS project, it’s a good idea to create a folder where you can store all of the text and Media (both links and media files) that you’d like to include in your StoryMap. Be sure to keep the material in this folder organized.
• Remember that when you include Media from publicly accessible sources, if that Media becomes inaccessible or is taken offline, it will not display properly in your StoryMap.

StoryMapJS FAQ: A list of frequently asked questions curated by the Knight Lab team.

Example StoryMaps: A list of demo projects curated by the Knight Lab team.

DH@CC Quick Guide to StoryMapJS: A Google Docs copy of this Quick Guide.