Digital Storytelling Made Easy: StoryMap.js

April 17, 2014

Sharing is Caring

My childhood copy of “Around the World in 80 Days”by Jules Verne was a tattered paperback lacking any map that might help me contextualize the travels of Phileas Fogg - so I used my imagination. A nice frontispiece map might have dampened my creative freedom but it also would have increased my spatial literacy and understanding of the relationships between various countries and cities. However,even access to a well-designed map has limitations; the reader is constantly flipping back and forth from the text to the visual - enter, the story map.

The term “story map” may remind you of a social studies course where students are often asked to create documents, sometimes called history frames, to help organize people, events and places in a logical, often linear,fashion constrained by time. It may remind you of elaborately annotated field guides like the ones created by Alfred Wainwright and recently described by Kenneth Field. Or perhaps you’re a digital native and you immediately think of Esri’s Story Map tool - which offers a variety of options for creating a Web-based story that incorporates an underlying map of your choice - or Maptia’s spatially-enabled blogging interface.

Figure 1: Graphic from Alfred Wainwright’s “Pictorial Guide to the Lakeland Fells.”Esri’sKenneth Field discusses it on the ICA’s MapCarte blog.

In my opinion, this interaction between text, supportive media and geography offers an immersive and seamless means of digital storytelling. The creative folks working in the Knight Lab at Northwestern University recently released a stunningly simple tool for creating beautifully designed stories on the Web called StoryMap.js. They provide a simple authoring tool that allows you to add slides to an underlying map and embed a variety of media files like Youtube, SoundCloud, etc. The tool requires access to a Google Drive account, where any images you add to the slides and a json file containing coordinates for each slide, are stored.Advanced users can access and explore the code libraries on GitHub.

Figure 2: Home page of the author’s southern California field course experience titled Biogeography of Southern California

After using StoryMap.js to develop a story map for a recent spring break field course insouthern California, I was most impressed by its simplicity for producing a high quality interface. It doesn’t require any coding, any hosting capabilities beyond Google Drive and is device-aware, meaning it looks great regardless of how your audience is engaging with your content. If you’re a digital storyteller, take a few minutes to explore this simple tool and offer your readers a spatial narrative.

Watch the slideshow of StoryMap.js interface and document below:


Sharing is Caring

Explore more: Esri

Geospatial Newsletters

Keep up to date with the latest geospatial trends!

Sign up

Search DM

Get Directions Magazine delivered to you
Please enter a valid email address
Please let us know that you're not a robot by using reCAPTCHA.
Sorry, there was a problem submitting your sign up request. Please try again or email

Thank You! We'll email you to verify your address.

In order to complete the subscription process, simply check your inbox and click on the link in the email we have just sent you. If it is not there, please check your junk mail folder.

Thank you!

It looks like you're already subscribed.

If you still experience difficulties subscribing to our newsletters, please contact us at