Creating an ArcGIS Online Story Map

An ArcGIS Online Story Map is a web application that allows you to combine maps with narrative text, images, and multimedia content into aesthetically pleasing presentations.

A web application is an interactive web page that allows visitors to change the content of the page through their actions. This is in contrast to a static web page where the content is set by the provider of the content and does not change, or a dynamic web page (such as a page giving current weather conditions) where the content changes over time, but those changes are controlled by the content provider.

While there are other ways of creating similar types of web experiences, and ESRI Story Maps have numerous issues (vendor lock-in, content permanence, page weight, etc.), Story Maps are a useful tool for organizing spatial information into a coherent whole.

There are a number of different kinds of Story Maps, and the choice of which is most appropriate depends on the type of content you wish to present.

This tutorial will demonstrate how to create a simple Story Map Journal for a simple research presentation.

Planning Your Structure

Your first step in developing your Story Map should be to plan and prepare your structure, text, and imagery. While all web content evolves over time, and your final product may only bear limited resemblence to your initial plan, if you fail to plan, you can plan on failing.

Story Map Journal pages have two parts:

  1. A main stage that usually contains a large image or map
  2. A side panel that contains text (and sometimes small images) describing the content on the main stage
Story Map Journal Page Parts

Story Map Journals are divided into sections, which each have their own main stage and side panel. For this example, our story map will have the following sections appropriate for a geospatial research report:

  1. A introductory section
  2. Literature review sections
  3. A study area section
  4. A question and hypothesis section
  5. A methods and data sources section
  6. Results sections
  7. Conclusions and significance sections
  8. A biography section
Example Sections

Preparing Text

The text you place in a Story Map Journal should be prepared in word processing software, and then copied into your Story Map. This will allow you to spell and grammar check your text. It will also allow you to recover your text in the future if your story map is forgotten or deleted by your organizational administrator.

Note that Story Maps are designed to be image intensive. Accordingly, you should edit your side panel text to the minimum necessary to support the main stage content. Long text will likely go unread by your visitors. 100 - 150 words is a good rule of thumb.

If your narrative text is long, consider splitting it into separate sections.

Prepared Text in Word Processing Software

Preparing Images

Story Maps can incorporate imagery that can make your pages both effective and aesthetically pleasing.

For this example, images are used both on the main stage and in the pop-ups of the location map. There are a wide variety of images that can be accessed on the internet, but you need to consider two issues: copyright and resolution.

Copyright

Although images on the web are free to access, almost all web imagery is protected by copyright and you do not necessarily have the legal right to reuse those images on your own pages.

While web content providers often do not exert a significant amount of effort to prosecute small copyright violators, if you are creating a web page for any kind of organization, you will want to verify the copyright status of any imagery you use, and get the copyright owner's permission, which may require purchasing a license to use the image.

For images used for classroom or personal educational purposes, the concept of fair use may apply. Although the rules of fair use are complex, if you are using an image for a limited time class project, copyright is generally not a concern.

Resolution

While there is a wide variety of imagery available on the internet, the resolution of that imagery is often reduced to the minimum amount needed for a particular application. Although higher resolution imagery looks better, lower resolution imagery loads more quickly. If an image only occupies a small area on a page, low resolution imagery is appropriate. But if you are planning on using an image to occupy a large area on a page, low-resolution imagery will be fuzzy and aesthetically unpleasing.

Web image resolution is measured in pixels width by pixel height. As a convenience, width and height are multiplied to get the total number of pixels. This number is commonly expressed as megapixels or millions of pixels. For example, an 8 megapixel image from the (ancient) iPhone 4S has a resolution of 3264 × 2448 pixels.

Low resolution images are typically under 800 pixels on the longest edge. Thumbnail images are commonly 250 pixels in width or less.

Image Sources

The easiest source for images is via a search engine like Google Images. The resolution of images can vary widely, although Google Images includes a resolution in the listings. Also, these images are usually protected by copyright, which will be a concern for organizational Story Maps.

Search in Google Images - Note the Resolution

Another option is to use photography that is licensed under a creative commons license, which permits varying levels of use without payment, provided that attribution is given of the source, and the resulting derived content is also released to the world under a similar license. One large source for creative commons imagery is Wikimedia Commons.

Wikimedia Commons

The best way to avoid copyright issues is to use imagery you generate yourself. If you personally take a photograph, you own the copyright to that photo.

Preparing a Master Map

A Story Map, by definition, should contain one or more maps. You should prepare those maps in ArcGIS Online.

In order to organize your map layers and keep them stylistically consistent, it is helpful to keep them all in a single master map, and then select specific layers to map when they are placed in the story map (explained further below).

If a single layer contains multiple attributes that need to be displayed as multiple layers, you can Copy the layer and then restyle the copies.

Using different color ramps for the different layers can help differentiate them visually when they are placed in the story map.

Make your map public for Everyone so all viewers of your Story Map can see it.

Copying a Layer With Multiple Attributes to Multiple Layers

Creating The Story Map App

From your ArcGIS Online Content page:

  1. Create
  2. App
  3. Using a Template
  4. Build a Story Map
  5. Story Map Journal

Give your Story Map a meaningful title and tags.

Choose the side panel format

The home section is the first thing a visitor sees when they visit the Story Map.

For this example Story Map on stroke we will use the map of stroke mortality as the home page.

The text for the home section side panel will be a brief introduction.

Creating a Story Map Journal and Adding a Home Section

Adding Sections

Image Sections

Sections can be based around single main stage images.

For example, the introductory section features an image of me and my father on the main stage, and brief explanatory text in the side panel.

Note the inclusion of attributions for the sources of the information for the text and the main stage image.

Adding an Image Section

Map Sections

Sections can feature maps on the main stage.

In this example, the home introduction page contains a map of the dependent variable (stroke mortality by state).

Create a custom configuration for the map location to center and zoom the map on the desired location

Create a custom configuration for the content to select only the appropriate layer for the section

Include a legend

Use the text prepared for the section.

Map Sections

Web Page Sections

You can embed external web pages on the main stage.

For example, these pages use Google Sheets charts on the main stage with explanatory text in the side frame.

Adding a Web Page Section

Header Clean-Up

Clean up the header in settings:

Cleaning Up the Header

Sharing and Previewing

Save the map so you can share it.

Share the map by making it public

Copy the link to share with visitors

Preview the map under view story to make sure

If you want to edit the map in the future, you can find it as a web app in your content section. View the information page and configure app to edit the Story Map.

Sharing and Previewing