Tool report: Guiding impact tours with Knight Lab’s StoryMap

Maps are powerful. Stories are powerful. A StoryMap combines the best of both worlds to create a dynamic, engaging journey through space, time, and connection.

This week we’re back at Northwest University’s Knight Lab to look at another one of their amazing, user-friendly storytelling tools: StoryMapJS.


FREE tool for nonprofit and science storytelling - with no code required!

Psst – Are you on Pinterest? You know what to do!


Just like the Knight Lab’s Timeline, StoryMap offers many awesome features with minimal headache:

  • No coding required (but it can be further customized if you know JSON and HTML)
  • Embeddable on most sites, including those using WordPress
  • Smartphone and tablet-friendly
  • Includes multimedia of all sorts – text, images, videos, sound clips, Google Maps, web links…
  • Customizable style

In the last year or so, Knight Lab has created a guided StoryMap builder, making the mapmaking process that much easier.

What can you do with a StoryMap?

Here are a few quick ideas:

Give a “day in the life” of someone your organization is helping, with photos, video, and audio quotes to complete the story

  • Trace the path of a binner as they make their rounds through the city
  • Illustrate a police officer’s daily rounds and interactions

Trace a historical path

  • Show the experience of a civil rights Freedom Rider in the 1960s
  • Report on marchers’ experiences along the route of the Women’s March on Washington on January 21st

Trace a biological path

  • Show the typical path of a gray whale on its annual migration
  • Display the movements of an animal with a tracking collar

StoryMap can be a powerful tool, illuminating normally-invisible experiences and movements.

StoryMap in action

In the example below, the Queen Charlotte sails around the west coast of North America… in 1787. In a few entries, you can see some of the earliest recorded interactions with First Nations populations.

Once I had my data, putting it into the template took around 30 minutes, and then embedding it in this page took another 15 minutes. So that’s a total of 45 minutes and no programming for an interactive webmap.

Build your own map

All you need is information to put in the map, a Google account, and a place to put the final product (like your organization’s website). Knight Lab offers a great walkthrough of the steps you’ll need to follow.

What can you do with a StoryMap?

Any ideas for other projects? Have you made an interactive map that you’d like to share? Let me know in the comments!



  1. David C

    Awesome tool. Will definitely use this, I noticed the transition in the map wasn’t very smooth and the zoom was too close-up to provide perspective. Is it possible to change these settings easily? Looking forward to more of your work!

    • Andrea Robertson (Author)

      Hi David,

      If you use the in-browser guided map builder (the code-free method), the map will calculate zoom automatically. As far as I know, the only way you can control the zoom is if you dive into the code (the Advanced method on the Knight Lab site). But remember, I used this for a voyage at sea where points are generally surrounded by solid blue. If you use this for a city- or neighborhood-level map instead, the surrounding areas will be a lot more informative.

      As for the transitions, I believe the jerkiness has to do with the type of map I chose – I picked high-res satellite images because few areas in 1787 had documented placenames (from the sailors’ perspectives). As a result, the map images are slower to load. If you choose one of the simpler map options, I believe that problem will fix itself.

      Let me know if you end up using the tool for your own projects – I’d love to see what you come up with!