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.

    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.

    Zoom options for the story

    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.

    Legend on map

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

    Template story

  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.

    Story resources

    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.

    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.

    Add to Favorites option

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

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

    StoryMaps option

    ArcGIS StoryMaps appears.

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

    Start from scratch option

    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.

    Story title and description

    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.

    Text option


    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.

    Heading formatting option

    The highlighted text is updated.

    Updated heading

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

    Quote formatting option

    The text is reformatted.

    Reformatted text

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.

    Sidecar option

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

    Docked panel option

  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.

    Add map option

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

    My Favorites tab

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

    Map in the Adjust map appearance window

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

    Map layers

    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.

    Visibility button

  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.

    Cases by Race layer

    The map displays only the Cases by Race layer.

    Map with only one layer visible

  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.

    Subheading format

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.

    Map action 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.

    Add content block button

  3. Under Media, choose Map action.

    Map action option

    The Describe this map action button appears.

    Describe this map action button

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

    Map action text

    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.

    Configured map action

  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.

    Button descriptions

    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].

    Final map action buttons

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.

    Design panel

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

    Updated design

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

    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.

    Add cover image or video button

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

    Cover 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.

    Swap panel placement button

    The title and the image swap positions.

    Swapped title and image

    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.

    Author byline


    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.