Introduction

When telling stories tied to place — historical journeys, exploration records, cultural heritage distributions — map-based storytelling is remarkably effective. By sequentially tracing points on a map while displaying text and images at each location, readers can immerse themselves in the narrative while understanding its spatial context.

StoryMapJS is a map-based storytelling tool developed by the Knight Lab at Northwestern University. Using a slide-based interface, you can create interactive narratives that journey through points on a map. It is licensed under MPL-2.0 and free to use.

Key Features

1. Slide-Based Navigation

In StoryMapJS, each point (location) is structured as a slide. As the reader advances through slides, the map animates smoothly to the next location. This fluid transition visually connects the narrative flow with geographic movement.

2. Intuitive Authoring Tool

Using the web-based editor provided by Knight Lab, you can create StoryMaps without any programming. Simply click on the map to set a point, then add text and images.

3. Gigapixel Mode

One of StoryMapJS’s unique features is Gigapixel mode. Instead of a standard map, you can use a high-resolution image — a painting, historical map, or architectural plan — as your “map.” Place points on specific areas of the image and zoom in while explaining details.

This is exceptionally useful for analyzing artworks or explaining historical maps.

4. Diverse Media Support

Each slide can embed various media types, including images, YouTube videos, Vimeo videos, Twitter posts, Flickr photos, and Wikipedia articles.

Creation Process

Using the Online Editor

  1. Visit the StoryMapJS website
  2. Click “Make a StoryMap” and log in with your Google account
  3. Create the title slide
  4. Click “Add Slide” to add new points
  5. Specify the map location and enter text and media
  6. Once all points are added, get the public URL or embed code from “Share”

Using JSON Format

For more advanced customization, you can define data in JSON format and display it using the JavaScript library. This approach is suitable for self-hosted deployments.

Use Cases

Retracing Historical Journeys

Consider recreating Matsuo Basho’s “The Narrow Road to the Deep North” as a StoryMap. Plot the journey from Edo through Nikko, Nasu, Matsushima, Hiraizumi, Dewa Sanzan, Kisakata, Kanazawa, and Ogaki. Each slide can include the relevant haiku, modern translations, photographs, and historical context — creating a resource that deepens spatial understanding of the literary work.

Cultural Heritage Mapping

Display the distribution of World Heritage sites or national treasures on a map, with photographs and descriptions at each location, to create a digital cultural heritage guide.

Migration and Movement Records

Track historical migration routes, telling stories about conditions at departure points, events at transit locations, and life at settlement destinations — all within a geographic context.

Research Fieldwork Reporting

In archaeology or ethnology fieldwork, plot survey sites on a map and report findings and observations at each location through slides.

Gigapixel Mode Applications

  • Art Analysis: Zoom into sections of large paintings to explain techniques and symbolic motifs
  • Historical Map Reading: Magnify specific areas of old maps to compare place names and structures with modern equivalents
  • Architectural Plan Explanation: Walk through structural features on historical building plans

Customization

Map Tile Options

Beyond the default map style, you can select alternative map tiles from OpenStreetMap, Stamen, and others. Antique-style map tiles complement historical themes nicely.

Language Settings

The interface language can be changed. Japanese is supported, with navigation buttons displayed in Japanese.

Considerations

  • StoryMaps created with the online editor are saved to Google Drive
  • Images must be specified via external URLs; direct local file uploads have limitations
  • Gigapixel mode requires pre-processing images with tiling tools (such as Zoomify)
  • On mobile devices, slide appearance may differ due to screen size constraints

Combining with TimelineJS

StoryMapJS can be combined with TimelineJS (also from Knight Lab) to tell stories across both temporal and spatial axes. Use a timeline for chronological overview and a StoryMap for geographic detail.

Summary

StoryMapJS enables easy creation of interactive content that tells stories by tracing points on a map. With slide-based intuitive navigation, animated map transitions, and the unique Gigapixel mode, it can be applied broadly — from disseminating DH research results to creating educational content.