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 transience, page weight, etc.), Story Maps are a useful tool for organizing spatial information into a coherent whole.

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.

As the name implies, Story Maps tell stories and you should think of the content in terms of a script with a story line that has a beginning, middle, and end.

Story Maps are divided into sections. Because Story Maps designed to be image intensive you should limit text in individual sections to a maximum of 100 - 150 words.

The script 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.

Prepared script in Word Online

Preparing Images

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

In addition to images you capture your capture or create yourself, 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).

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

An ArcGIS Online Map

Creating The Story Map App

From your ArcGIS Online Content page, select Create and Story Maps.

Give your Story Map a meaningful title.

Creating a Story Map in ArcGIS Online

Adding Sections

A story map is a sequence of sections.

Text Sections

Text sections are paragraphs of text. Remember that Story Maps are visually oriented, so your text should be concise and pithy.

For this example, we copy the introductory text from the script.

Creating a Story Map text section

Image Sections

Images can be inserted as sections.

In this example, an 19th century image of the Five Points slum is used to accompany the text on the formation of Manhattan's first Chinatown.

Adding an image section

Chart and Graph Sections

Charts and graphs can be inserted as image sections.

Charts and graphs created in Google Sheets can also be inserted as <iframe> code as described below.

In this example, we copy an Excel chart of percents of Asian residents, paste it into the Paint app, save it as a PNG file, and insert it into a new section.

Adding an image section

Embed Sections

HTML <iframe> tags allow you to insert one web page into an internal frame inside another web page. Web apps like most of the Google apps will provide you with <iframe> code that you can add as a section.

For this example, we embed a Google street view of Flushing's Chinatown as a section.

Adding an embed section

Map Sections

Sections can feature maps.

You should prepare a master map as directed above, and then customize the layers and extent for each section using that map.

In this example, we insert both an overall NYC map and a map zoomed into the Flushing, Queens Chinatown.

Inserting a map section

Immersive Sections

There are a handful of "immersive" section types that allow users to interact with content.

This example shows a map tour section with a descriptive sidebar that zooms in on the individual Chinatowns across NYC as you scroll down the list.

If your story map is primarily a tour with a sequence of photos, a map tour may be the primary section in your story map.

Inserting a map tour section

Publishing

To publish the story and make it visible to the world, press the Publish button.

To gain maximum exposure, share it with Everyone.

Publishing your story map

To get a link to your shared map, press the link button at the top of the story map that looks like a chain link.

Getting a link to your story map

Your story map will be listed under Content in your ArcGIS Online account if you need to edit it or get a link in the future.

Reopening your story map