Directions Magazine
Hello. Login | Register


All Articles | Post Comment

Digital Storytelling Made Easy: StoryMap.js

Thursday, April 17th 2014
Read More About: esri, google, story maps
Classified Ads:


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:

Did you enjoy this topic? Check out these Channels:
Esri Technology

Bookmark and Share

Stay Connected

Twitter RSS Facebook LinkedIn Delicious Apple Devices Android Blackberry

Recent Comments

Mercury Rising: When to Expect the “Warmest Day of the Year”

Following the first official day of summer, many areas in the United States are approaching their highest temperatures for the year. To give you a better idea of the warmest time of year for your area, NCDC has created a new “Warmest Day of the Year” map for the contiguous United States.

The Big Four Make Big Waves in Location Intelligence
How can I use crowdsourced data?
Esri UC 2014 Plenary: The More Things Change, The More They Stay the Same
OmniEarth to Focus on Automated Intelligence from Earth Imagery
Learn ArcGIS: Esri Embraces New Vision for Teaching and Learning GIS
Ubisense’s myWorld 2.0 Addresses Enterprise Operational Awareness
Ruling on sharper satellite images poses a privacy problem we can no longer ignore
10 Common Python Errors of Beginning ArcGIS Programmers

About Us | Advertise | Contact Us | Web Terms & Conditions | Privacy Policy
© 2014 Directions Media. All Rights Reserved