Tell an interactive story using map actions

This tutorial will be retired April 2024. We apologize for any inconvenience this may cause. You may view an archived version of this tutorial here.

Maps are a central part of the ArcGIS StoryMaps experience. But knowing how to direct the presentation of those maps and adjust what they will show will take your stories to the next level. Map actions allow your readers to control what the map shows and reward curiosity. They can be configured to allow readers to turn layers on and off and change the map extent. In this tutorial, you'll set up a story's map actions.

This tutorial was last tested on January 24, 2024.

View final result

Requirements

• Storyteller, Publisher, or Administrator role in an ArcGIS organization (see options for software access)
• Microsoft Word

Create a story

One of the most effective ways to learn is to copy good examples. This tutorial is inspired by Segregation is Killing Us, which won first place in the 2020 ArcGIS StoryMaps Competition for the Sustainable Development Goals. Written by the team at Territorial Empathy, it weaves together numerous data presentations to show how uneven the impacts of COVID-19 have been in the New York City area.

Since the Segregation is Killing Us story contains a lot of content and took some time to build, you'll re-create a shorter story for the purposes of this tutorial. The tutorial will focus on a few of the key elements and allows you assemble a story that contains an immersive sidecar hosting an interactive map with actions configured.

Study an example

First, you'll spend a few minutes to review the first place winner of the 2020 ArcGIS StoryMaps Competition for the Sustainable Development Goals.

1. Open and review the Segregation is Killing Us story.

   

   The authors present their content as a mix of text, maps, charts, and videos. The story is structured using different layouts and immersive sections to break the material into logical chunks.

   

   Within the story, the authors have used map actions to let you control what the map shows and allow you to reveal additional map details as needed.

   

2. Open and review the short sample story to see an example of what you'll be creating in this tutorial.

   

3. When you're finished, close the story.

Re-create the example story

Now that you've seen the finished story, you'll start a new story and add a title, and initial text block. To save time, all resource material has already been created for you to use during the tutorial.

1. Go to the StoryMapData item on ArcGIS Online and click Download.
2. Unzip the downloaded file to a location you can easily access.

   

   The .zip file contains information that you will use to create your story: a Word document with narrative text for you to copy into your story and a photo that you will use in your story. There is a separate folder if you are using a Mac.

   You may want to open and keep the word document handy as you can copy and paste blocks of text from it. Next, you'll add the map you'll use to create the story to your Favorites folder. This way, you'll be able to access it when you create your story.

3. Go to the details page for the COVID-19 Phase 1 - Demographics-070120 map.
4. On the ribbon, click Sign In. Sign in to your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

   After you sign in, you have the option to add the map to your Favorites folder.

5. Under the map thumbnail, click Add to Favorites.

   

   Next, you'll open ArcGIS StoryMaps and create a story.

6. On the ribbon, click the app launcher button and choose StoryMaps.

   

   ArcGIS StoryMaps appears.

7. Click the New Story button and choose Start from scratch.

   

   The story builder displays a blank story.

8. Click Story title and type Segregation is killing us...
9. Click Start with a short introduction or subtitle (optional) and type or copy and paste Contrary to popular belief, COVID-19 is no great equalizer. In our analysis, we found segregation itself is a public health crisis in NYC.

   

   Next, you'll start adding content to the story.

Add a text block

Next, you'll add some narrative text to your story.

1. Under the title and subtitle, click the Add content block button and choose Text.

   

   Note:

   Your unzipped instructional folder includes a Microsoft Word document called Copy for Mini Story that contains story text for you to copy and paste.

2. In the text block, copy and paste the following text:

   The Uneven Impacts

   In New York City, the destructive path of COVID-19 mirrors the destruction left by generations of segregated communities and schools. However, segregation is about more than the separation of people from each other. It is about separating historically marginalized people from resources, power, opportunity, and self-determination. It is about the proliferation of racial and economic stratification. It is about strategic over-policing, mass incarceration, and the murder of Black, Latinx, and Indigenous people with unchallenged impunity.

   Segregation facilitates and upholds the concentration of privilege and vulnerability in our schools and communities.

   As Rucker Johnson points out in his book, Children of the Dream, segregation negatively impacts Black and Latinx communities' access to healthcare, education, and their interactions with the carceral state. So we say again... Segregation is killing us.

3. In the text, highlight The Uneven Impacts. In the text formatting options, change Paragraph to Heading 1.

   

   The highlighted text is updated.

   

4. Highlight the second paragraph (which starts with Segregation facilitates) and change the text format from Paragraph to Quote.

   

   The text is reformatted.

   

You've created a story and added a title and text. Next, you'll make the story interactive by adding map actions.

Add interactive elements

Next, you'll add a sidecar and map actions to give your story the interactive elements that will engage readers.

Add a sidecar

To enhance your story, you'll add a sidecar. A sidecar combines a stationary media panel with a scrolling narrative panel to create a more captivating reading experience. Your sidecar will use the map you previously added to your favorites as the media panel.

1. In the story, point to the bottom of the text and click the Add content block button. Under Immersive, choose Sidecar.

   

2. In the Change layout window, choose Docked panel.

   

3. Click Done.

   Next, you'll add the map. Previously, you added this map to your favorites, so you'll be able to browse to it even though the map was not created by you or your organization.

4. In the media panel of the sidecar, click Add and choose Map.

   

5. Click the My Favorites tab and choose the COVID-19 Phase 1 - Demographics map.

   

   The story updates. The Adjust map appearance window appears. In this window, you can adjust the web map appearance.

   

   In the Layer panel, four map layers are listed. All layers are currently visible, which makes the map a bit hard to read.

   

   You'll turn off the visibility for all but one of the map layers before you place the map in the story, because you only want to show one map layer at a time.

6. In the list of layers, point to the Deaths by Race layer and click the visibility button to turn the layer off.

   

7. Turn off the Deaths by Median Household Income and Cases by Median Household Income layers.
8. Ensure the Cases by Race layer remains visible.

   

   The map displays only the Cases by Race layer.

   

9. Under the map, click Place map.
10. Click Continue your story to add text to the Narrative Panel. In the narrative panel, copy and paste the following text:

    Phase 1 Casualties by Neighborhood

    To better understand the alarming discrepancies affecting New Yorkers of Color, we conducted an analysis of all Phase 1 COVID-19 confirmed cases and deaths. The following maps visualize the casualties by each ZIP Code (NYC Health reported COVID-19 data regions) predominant race and income.

    Cases by Race [label for map action button]

    Deaths by Race [label for map action button]

    Cases by Income [label for map action button]

    Deaths by Income [label for map action button]

    As you can see, wealthier less diverse neighborhoods of our city were less impacted by the pandemic.

    Low income communities of color were devastated by the disease. At one point neighborhoods such as Corona, Queens were global hot spots. In this one neighborhood, 396 people died and 4,532 were infected just during Phase 1.

    We attribute the discrepancies by income to the ability to quarantine and preserve social distance. Privilege and wealth plays an important part in the ability to isolate and therefore be less exposed to the infection.

11. In the text, highlight Phase 1 Casualties by Neighborhood. On the formatting toolbar, choose Heading 2.

    

Add map actions

Next, you'll configure map actions for the associated placeholder buttons in the narrative text.

1. In the narrative text, review the map action placeholder text.

   

   You'll add map actions to these labels so that when users click them, the map will change to show different layers.

2. Above the placeholder text Cases by Race [label for map action button], click the Add content block button.

   

3. Under Media, choose Map action.

   

   The Describe this map action button appears.

   

4. In the Describe this map action field, type Cases by Race.

   

   Next, you'll edit the state of the map associated with this button.

5. Point to the Cases by Race map action button and click the Edit button.

   The Configure map action: Cases by Race window appears. Because the map already shows the Cases by Race layer, you don't have to make any edits at this time.

   

6. Click Save action.
7. Point to the placeholder text Deaths by Race [label for map action button], click the Add content block button, and choose Map action.
8. In the Describe this map action field, type Deaths by Race.
9. Point to the Deaths by Race map action button and click the Edit button.
10. In the list of layers, point to the Deaths by Race layer and turn the layer on. Turn off the Cases by Race layer.
11. Click Save action.
12. Repeat the process and configure the Cases by Income [label for map action button] and Deaths by Income [label for map action button] map action buttons, with each button only displaying the layer corresponding to the button's name.

    

    Now that you have four working map action buttons, you'll delete the placeholder text.

13. In the narrative text, delete Cases by Race [label for map action button], Death by Race [label for map action button], Cases by Income [label for map action button], and Deaths by Income [label for map action button].

    

Add finishing touches and preview your story

Next, you'll finalize your story by changing the theme and previewing the outcome.

1. At the top of the builder, click Design.
2. In the Design panel, for Theme, choose Obsidian.

   

   The story updates and the theme now matches the original Segregation is Killing Us story.

   

3. In the Design panel, for Cover, click the Side-by-side option.

   

4. Close the Design panel.

   You have not yet added a cover image to your story.

5. Scroll to the top of the story and click Add cover image or video.

   

6. Browse to the folder you downloaded and extracted at the beginning of the tutorial and choose the MaskCover.jpeg photo.

   

7. Click Add.

   The story updates to display the image to the right of the story title on the cover page.

8. Click the Swap panel placement button.

   

   The title and the image swap positions.

   

   Next, you'll identify and credit the organization Territorial Empathy, who authored the words and maps used in this tutorial.

9. Highlight your name and copy and paste Excerpts taken from a story by Territorial Empathy.

   

   Note:

   Getting proper permissions is important. Whenever you author a story, be sure you have permissions to use content. Do not use material you are not legally entitled to use. The world is full of good open source and usable Creative Commons licensed content, or seek written permission from others before publishing your story.

10. At the top of the page, click Preview to see your finished story. When prompted Preview will reset undo history, click Yes, continue.

In this tutorial, you created a story and added several map actions to allow your readers to control what the map shows and to elevate them from passive to interactive readers. Map actions help to engage your readers and reward their curiosity by allowing them to change the map extent and zoom in to a city or pan to a different country. They also work equally well on phones and desktops.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• Segregation is Killing Us story developed by Territorial Empathy; content used with permission.
• Dark Basemap sources: Esri, TomTom, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community
• Demographics: United States Census Bureau. American Community Survey 2014-2018 5-Year Estimates
• COVID-19 Deaths data: NYC Health