Educator John Van Hoesen introduces StoryMap.js, “a stunningly simple tool for creating beautifully designed stories on the Web,” from the Knight Lab at Northwestern University.
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: