Build a sidecar in your story

To help readers correctly interpret your map, you can create a series of map views that take the reader from a big picture view of the data to specific patterns. Sidecars use a scrolling technique to allow you to alternate between layers of data or large scale views of specific locations on the map.

The story Urban Africa uses a sidecar to show growth of cities. As you scroll through, you'll see layers fade from one to the next, allowing you to compare the size of urban populations with the rate of urban population change. In a few instances, the map zooms in to noteworthy data points. To learn more about the value of this technique, start with this explanatory blog post. Otherwise, use the steps below to create a gradual walk-through of your visualized data. If you want to go a step further, you can download all of the content used in the Urban Africa story map in the last section of this lesson to test your new skills by rebuilding the entire story.

Sign in and locate your web map

First, you'll find and bookmark the web map that's featured in the Urban Africa story to use in your story. Adding content to My Favorites in ArcGIS Online allows you to locate to add to your story.

  1. Go to ArcGIS Online and sign in to your organizational or public account.

    Note:

    If you don't have an organizational account, you can sign up for an ArcGIS free trial.

  2. In the search bar, type Urbanization in Africa or paste the map's ID: 0263c93beb6a471e97497f1fca05d8e6.

    Searching in the global navigation allows you to find content from across ArcGIS Online.

  3. If necessary, under Filters, turn off the Only search in <your organization> option.

    Search for content outside your organization.

  4. Make sure your search locates the web map by StoryMaps. Click Add to Favorites.

    Urbanization in Africa search result and Add to Favorites button

    Adding content to My Favorites helps you locate the map in the ArcGIS StoryMaps builder. Now that you've located the web map, it's time to open the story builder and start assembling your sequential map views in a sidecar.

  5. Click the App Launcher and choose StoryMaps.

    Choose the StoryMaps icon from the app launcher.

    Note:

    You can also access the story builder from the ArcGIS StoryMaps home page. If you've created any other stories with the story builder, you can see them here under My Stories. Story maps you've added to your favorites appear in My Favorites, and stories that are shared in your organization appear in My Organization.

  6. On the My Stories page, click Create new story.

    Create new story tile

    A blank story opens in the builder.

  7. Title your story Using a Sidecar.

    This name is so you can identify the story after you close the builder.

Configure your sidecar slides

Now that you have your story set up, you can add content blocks. The sidecar block can be used to share many types of media. In this case, it's a good tool for guiding a reader through your maps and data in a series of slides in the sidecar block. You'll add a sidecar and configure a set of slides that show the patterns of urban growth in Africa.

Note:

In this lesson, you'll focus on the sidecar block. For a more thorough introduction to StoryMaps, try the Getting to Know the New ArcGIS StoryMaps learn path.

  1. Scroll past the story cover and click the Add button.
  2. In the block palette, choose Sidecar.

    Add a Sidecar block to your story.

    A new content block is added to your story with a narrow narrative panel on one side and a large media panel on the other. Together, these two panels constitute a slide.

  3. On the media panel of your first sidecar slide, click Add map.

    Add a map in the media section.

    The add a map window opens. By switching between tabs, you can choose content from your account, your organization, and the ArcGIS Living Atlas of the World. You can also add content from across ArcGIS Online through My Favorites.

  4. Click My Favorites and choose the Urbanization in Africa map.

    Choose the Urbanization in Africa map from My Favorites.

    The map opens in the designer view. When adding maps to a story, you can choose the zoom extent and view and set layer visibility before placing the map. These changes are saved in the story without affecting the original map. The map you configure here appears on the first slide in your sidecar. Start by giving your readers an overview of urban density in Africa.

    Tip:

    You can customize the names of your map's layers by clicking the layer name (or edit button) and typing. These changes only appear in the story map you're currently building and make your legend understandable to the average reader, but they do not affect the map anywhere else. To display the legend, you can turn on the toggle button in the settings tab.

  5. In the design pane, make sure the Map layers tab is visible.
  6. For the Urban Density layer, click the view button to turn the layer on.

    Urban Density layer visibility

  7. Zoom and pan until the continent of Africa is the focal point of the map and click Place map.

    Center the continent of Africa in the media panel.

    The map is placed in the media pane. You can change the map at any time while in Design mode using the toolbar. Now it's time to add the next slide in your sidecar. Because you want to show another aspect of the same Urbanization in Africa map, you'll duplicate the slide.

    Note:

    At this point you can also start adding content to the narrative panel of your sidecar slide. However, duplicating a slide duplicates content in both the narrative and media panels. Since you will use the same web map over a series of slides, it's a bit faster to first configure the media panels by duplicating them and adjusting the maps and adding the related narrative content after your sequence is set.

  8. On the bottom ribbon of the sidecar block, click Expand to show the slide pane.

    Expand the slide pane.

    The one slide you currently have is represented by a thumbnail.

  9. On the current slide thumbnail, click the More Options button and select Duplicate slide.

    Duplicate the current slide.

    A second slide is added to the sidecar block and automatically selected for you to continue editing.

    Tip:

    You can use the same web map and adjust its configuration (instead of adding an entirely separate web map) to give your readers a smoother experience. As they scroll through slides with the same web map, layers fade in or out, and the map pans and zooms to the next extent.

  10. On the media ribbon, click edit button to open the map designer for the duplicated slide.

    Edit the map.

  11. In the Map layers pane, turn off the Urban Density layer and turn on Population, 2015 (Cities 100k and up).
  12. Click Place map to save your changes.

    Map of cities larger than 100,000 people.

    The updated map is added to the second slide. Each circle represents a city with a population greater than 100,000. The larger the circle, the larger the population size. While there are many large cities on the continent, Cairo stands out as the largest. On the next slide, you'll draw your readers' attention to Egypt.

  13. Duplicate the second slide and open the map designer for the newly added third slide.
    Tip:

    You can also duplicate a slide when the slide pane is collapsed. Click the duplicate button. You are automatically placed on the newly copied slide to continue editing.

  14. In the map design pane, zoom and pan so that Egypt is centered in the map frame.

    Zooming closer to a specific area redraws the proportional symbols. Now that the circles are spaced better, it's easier to interpret patterns.

  15. Click Place map.

    Map slide showing large cities in Egypt.

    Population size is only half the story, though. Next, you'll add a slide that compares population size with the rate of population change.

  16. On the slide ribbon, click the second slide, duplicate it, and open the map design pane.
  17. In the Map layers pane, turn off Population, 2015 (100k and up) and turn on Percent Change, 2000-2015 (100k and up). Click Place map.

    Map showing the percent of population change in large cities.

    While the largest cities appear to be in Egypt and along the west coast of the continent, cities along the east coast seem to be experiencing the largest percentage of growth. In particular, cities around Lake Victoria and farther north in Ethiopia have grown by over 4,000 percent since 2000. With the slide pane expanded, you'll notice that this new slide is currently third in line in your sidecar.

  18. In the slide pane, drag the thumbnail for the third slide to the end of the deck to reorder them.

    Finally, you'll also give your readers a more detailed look at some interesting data in this layer.

  19. Duplicate the percent change slide (now fourth in line in your sidecar) and open the map design pane.
  20. In the Map layers pane, click the Bookmarks tab and choose Great Lakes.

    Choose the Great Lakes map bookmark.

    The map zooms in to the cluster of data points around Lake Victoria.

  21. Click Place map.

Build out your narrative panel and the rest of the story

You've successfully configured a series of web map views in a sidecar block. The scrolling transitions of this block guide your readers through the mapped data with a smooth experience. Scroll back and forth through your sidecar to see this in action.

To finish the sidecar block, and the rest of the story, you'll need to add some explanatory text and other media to round out your work. To continue re-creating the Urban Africa story for practice, you can download the materials.

For more instructions on configuring your story, use the Getting to Know the New ArcGIS StoryMaps learn path (especially the first tutorial) to discover the ins and outs of the ArcGIS StoryMaps builder. For questions and tips, you can also check the GeoNet community.

You can find more lessons in the Learn ArcGIS Lesson Gallery.