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.
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.
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.
Another source where photographers distribute both free and premium images is Unsplash.
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.
Creating The Story Map App
From your ArcGIS Online Content page, select Create app and Story Maps.
Give your Story Map a meaningful title.
Cover Image
A cover image is an image that appears at the top of your story map. This image should be something iconic that will draw viewers into your story and be something that viewers remember and associate with their experience.
The cover image can be placed above the title as a hero image, beside the title, or behind the title.
- At the top of your story map, press the Add cover image or video button.
- Browse your files to upload your cover image. By default, the image will be placed above your title.
- If you want to move the image beside or below the title, click the Design link and choose the option.
- Note that if you place the image behind the title, you may want to either choose a dark, uncomplicated image (unlike the example below) so your title is legible.
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.
Heading Text Sections
A heading section is a text section with the text styled as a large, bold heading. Headings can be used to demarcate groups of sections under a common descriptive name.
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.
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.
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.
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.
Immersive Sections
There are a handful of "immersive" section types that allow users to interact with maps and / or collections of images.
Map Tour
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 sequence of location with associated photos, a map tour may be the primary section in your story map.
Slideshow
If a section of your story map should be a collection of images or graphics with associated narrative that are tangential to the sequence of sections, a slideshow may be appropriate.
Sidecar
Collections of related images with descriptive text that do need to flow in the sequence of the story map can be sequenced with text that rides alongside or over the imagery in a Sidecar.
Publishing
To publish the story and make it visible to the world, press the Publish button.
To gain maximum exposure, share it with Everyone.
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.
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.