If a picture is worth a thousand words, then an interactive Story Map might be worth a thousand pictures.

ESRI’s Story Map technology offers an easy-to-use, web-based environment for telling a story with your data. It enables a user to construct a visually compelling, engaging, guided experience through the integration of data, maps, and multimedia content (e.g., pictures, videos, and web pages). 

Authoring a Story Map does not require any special knowledge or skills. Story Maps are created and edited using a simple, web-based “Builder” wizard with point-and-click interfaces and a rich-text editor.

Getting Started

The first step in authoring a Story Map is deciding what kind of story you want to tell, and selecting an appropriate Story Map template. Here are some examples:

  • Sequential, Place-based Narratives (Tour, Journal)

  • Presenting a Series of Maps (Tabbed, Side Accordion, Bulleted)

  • Comparing Two Maps (Spyglass, Swipe)

  • Presenting One Map (Basic)

  • A Curated List of Points of Interest (Shortlist, Playlist, Countdown)

  • Custom (Roll your own…)

There are purposefully a limited number of templates to keep things simple, and each is described below. Consider accompanying the map with one or more thumbnail images of generic templates.

Sequential, Place-based Narratives

The Map Tour and Map Journal templates are designed to guide people through content in a suggested order. You might think of the Map Tour as an interactive picture slide show, and the Map Journal as an interactive PowerPoint slide deck. A key characteristic of Story Maps is that it is not just the navigation between content that is interactive, but the content itself.

Maya Archaeological Sites uses the Map Tour template. It presents a large picture or video, brief text, and link to more information for each point on the map. One can explore various locations by selecting points on the map, or by selecting thumbnails from the carousel at the bottom.

You can also interactively pan-and-zoom the map to explore. Note the use of the National Geographic basemap -- one of many pre-configured basemap options -- to give their story an “explorer tourism” look-and-feel.

Mountains of Fire uses a Map Journal to tell the story of the Pacific Ring of Fire volcanoes. In addition to maps, images, this story also makes use of Web Scenes, or 3D maps of your data, in this case interactive 3D aerial imagery of the volcanoes. Also, note that Side Panel text can include links that drive interaction with the Main Stage content, such as in the Mount St. Helens Section, where clicking on the dates listed below the image display the relevant aerial photo, which shows the progression of vegetation re-growth after the eruption.

Presenting a Series of Maps

The Tabbed, Side Accordion, and Bulleted Map Series templates provide three visually distinctive organizing metaphors for collections of maps. They may be maps of the same place, displaying different parameters, such as maps of different demographic parameters for a single city. Or, they may be maps displaying the same kind of data for different places, such as maps of different mine locations illustrating the population living downstream within a certain distance at each site.

Katrina +10: A Decade of Change in New Orleans is a Tabbed Story Map, which conveys information about the diaspora immediately after Katrina and the state of reconstruction 10-years on. Note that use of pop-ups in the maps presents additional information. For instance, click on a state in the initial map to see how many people migrated to it immediately after Katrina. Or, in the Physical Damage tab, zoom in and click on a building to see the dates of a building’s construction and demolition. As an example of how one can combine different Story Maps to tell more complex stories, note the use of a Swipe map in the Flooding tab (more on that below).

Comparing Two Maps

Swipe and Spyglass maps provide two different ways to compare maps of the same place. They can present a map that highlights before and after differences, such as aerial imagery pre- and post- natural disaster or a map that presents measurements of two different parameters across the same area.

In the Katrina Story Map, introduced above, a Swipe Map is embedded in the Flooding tab. It enables interactive exploration of aerial imagery around new Orleans from before and during the flooding immediately following the storm. The locations of major levee and dam breaches are also highlighted.

Chicago 1868 and Today illustrates the use of a Spyglass Map to explore the layout of Chicago in 1868 versus today. The map displays modern aerial imagery for Chicago, while Inside the Spyglass you see a historic 1868 map of Chicago. You can drag the spyglass around the screen and note differences in the Lake Michigan shoreline, or the neighborhoods that were removed to make way for the freeways, or that many of today’s rail corridors were already present in 1868.

Presenting One Map

The Basic Story Map template is as simple as they come. It basically provides a wrapper around one map to incorporate a title, and maybe a short description to provide additional context. It is a great template to use when your map is strong enough -- or simple enough -- to speak for itself.

Average daily traffic shown using two variables is a Basic Story Map. It uses color to distinguish between road district, and symbol size to indicate the average daily flow of traffic on a roadway. You can click on road to view a pop-up with additional information.

A Curated List of Points of Interest

There are three visual layouts for this type of Story Map: Shortlist, Playlist, and Countdown. They are all variation on the theme of telling a story about places that are related to one another. You might think of it as a kind of hybrid between a Map Tour and a Map Series.

If you’re not yet tired of listening to holiday music, then check out the Smithsonian Folkways Holiday Music Map. It uses a Playlist to tell the story of holiday music from around the world using audio clips. (In case your hosting a holiday party, note the Start Audio Tour button, automatically play its way through all the songs while you celebrate!)

Custom

With the Custom template, you can pick and choose from various Story Map building blocks and combine them with your own custom capabilities. Typically Custom stories require some knowledge of HTML, CSS, and Javascript. There is also a GitHub repository for sharing open-source custom Story Maps, which includes all of ESRI’s templates.

Decisive Moments in the Battle of Gettysburg is a Custom Story Map that leverages time-aware maps. It allows you to navigate a series of maps by selecting particular points in time, similar to a Map Series. It also includes links that drive the display, like in a Map Journal; for example, at highlighted points in the timeline, you can click on Show Panorama or Show Viewshed to see additional perspectives of the scene. The viewshed is particularly enlightening, as it illustrates what the Generals responsible for the decisions on the ground could see from their vantage points.

The Five Principles of Effective Storytelling

Sometimes I feel like saying, “Keep it simple, stupid!” five times, and leaving it at that. The Story Map templates are well thought out and are responsively designed so users can experience your story across all the major browsers and different platforms, from desktop to mobile, without you having to do anything extra. The templates give you some freedom in choosing fonts, color schemes, icons, etc., and you can always go farther, if you understand HTML, CSS, and Javascript. The simpler and cleaner you keep things though, the more effective your story will be (and the less likely you will be to break the cross-browser/cross-platform design.) So if you start customizing... don’t get carried away.

ESRI also provides some great tips on effective storytelling as applied to Story Maps, The Five Principles of Effective Storytelling. I strongly encourage you to consider them as you author your own Story Maps.

Tell Your Story…

ESRI Provides free public ArcGIS Online accounts, which you can use to create your own Story Maps. They are limited accounts, however, they are sufficient for you to get started telling your own stories.  For inspiration, check out the Gallery of Story Map examples. You can also find Tutorials and other guidance on the main Story Map site.

Give Story maps a try...

Comment