Make a story

You are an urban planner in Portland, Oregon, tasked with presenting an urban tree management plan. You have created a scene and a map showing existing trees, potential tree locations, and data layers about heat wave risk and heat severity ratings. You want to make an interactive proposal presentation to the city council to approve locations for new street streets based on your findings.

ArcGIS StoryMaps allows you to share your maps and scenes in the context of text, photos, and videos to create a presentation that informs and inspires.

As you work through the steps in this tutorial, you'll learn the following skills:

• Configure the story theme and design
• Create the story theme and design
• Add narrative text and images
• Add a sidecar showcasing a web scene
• Publish and share the story

This tutorial was last tested on August 21, 2024.

View final result

Requirements

• ArcGIS account (see options for software access)

Make and configure the story

Note:

This tutorial was developed for an ArcGIS public account experience. An ArcGIS public account is a free, limited-functionality account designed for personal, non-commercial use. This account gives you the ability to author and publicly share basic maps and apps.

You will start by opening an existing web map you want to include in your presentation.

1. If necessary, sign in to your ArcGIS account.

   Note:

   If you don't have an ArcGIS account, you can sign up for a public account.

2. On the ribbon, click Content.
3. For the Tree planting opportunities in Portland web map, click the options button and choose Open in Map Viewer.

   

   Note:

   If you did not create the web map in the tutorial Make a map, go to the item page for Tree planting opportunities in Portland (Final) to continue this tutorial.

   The web map opens in Map Viewer.

4. In the Contents pane, click Create app and choose ArcGIS StoryMaps.

   

   Note:

   In an ArcGIS organizational account, additional web apps are available, including ArcGIS Experience Builder and ArcGIS Dashboards.

   ArcGIS StoryMaps launches the story builder with a new story. A story is a single web page that contains your maps, text, and other media items that make up your narrative or presentation.

   Next, you will start setting up your presentation by entering a title, choosing design settings, and adding an introductory paragraph of text.

5. For Story title, type Climate Resilience: Street Trees.
6. For the short introduction, type Visualizing areas in the City of Portland that would benefit from additional trees.

   

   Next, you will add a background to the story cover.

7. Download Coverr_EmptyStreetArgentina.zip.

   Note:

   The file is about 13 MB in size.

8. Extract the .zip file to a location on your computer.
9. Click Add cover image or video.

   

10. In the Add an image or video window, click Browse your files. Browse to the unzipped folder and choose the Coverr_EmptyStreetArgentina.mp4 file.
11. Click Add.

    

    The video is added to your story cover.

    Next you will configure the cover design and the story theme.

12. On the ribbon, click Design.

    

13. In the Design pane, for Cover, choose Full.

    

14. For Theme, choose Ridgeline.

    

15. Close the Design pane.

You have set up the story's title, cover design, and theme.

Add text and images

First, you'll create a header and add your first paragraph of narrative text to introduce what your viewers will learn in the story.

1. Point to the space between the cover video and the map and click the Add content block button.

   

2. Under Basic, click Text.

   

3. Type The benefits of urban canopy and press Enter to start a new line of text.
4. On the next line of text, copy and paste the following:

   Street trees are an effective strategy to increase tree canopy coverage across a city and mitigate the impacts of increasingly high temperatures due to climate change. Trees provide shade, lower surface and air temperatures and provide protection from direct sunglight, reducing the risk of heat-related illnesses.

5. Highlight the text The benefits of urban canopy. On the toolbar that appears, click Paragraph and choose Heading 1 so the text is styled as a heading.

   

   The text is now set to the Heading 1 style.

   

6. Point to the space below the paragraph of text and click the Add content block button.
7. Under Media, choose Image.

   

   Note:

   There are many other types of media you can add in a story. Some media types are not available in a public account. An organizational account provides access to more features in ArcGIS StoryMaps.

8. In the add an image window, click the Link tab and paste the following URL:

   https://images.unsplash.com/photo-1589123592035-32858c974713?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80

   

9. Click Add.

   The image adds to the story.

10. Below the image, add another Text content block and copy and paste the following text:

    Trees also clean the air by capturing particulate matter on their leaves and bark, and by absorbing pollutants such as nitrogen oxides, ammonia, sulfur dioxide, and ozone. They reduce and slow storm water by intercepting precipitation in their leaves and branches. They add beauty to their surroundings by injecting color and softening the harsh lines of city buildings. Finally, planting and maintaining trees requires workers, which provides jobs, contributing to the economy.

    Next, you'll add an inspirational quote.

11. Add a Text content block below the last paragraph, and copy and paste the following text:

    "The best time to plant a tree is twenty years ago. The second best time is now." - Chinese proverb

12. Highlight the text, and in the toolbar, click Paragraph and choose Quote.

    The text style changes to highlight the quote text.

    

    Next, you will add a separator to indicate this section of the story has concluded.

13. Point below the quote text and click the Add content block button. Choose Separator.

    

    A separator adds to the story.

    

    Note:

    In an ArcGIS organizational account, you can customize story themes and customize the separator, change its color or pattern, or make it an image. Customizing a separator allows you to personalize the experience of the story. View examples of stories with custom themes.

You have added text, an image, and a quote to your story. Next, you will configure what information you want the map to show for your presentation.

Configure the map

The map you added in the story contains a lot of information. For the flow of your presentation, you only want it to show an overview of the existing trees in Portland. First, you will add a new header and sentence to introduce the map.

1. Below the separator, add Text and type Existing trees in Portland. Set the text to the Heading 1 style.

   You have a second heading in your story.

   

2. Add another Text block below the heading:

   There are currently a number of trees in Portland. Below is a map showing trees in the two census tracts with the highest scores for heat wave risk.

   This will introduce what your map will show. Next, you will configure the map.

3. Point to the top of the map and click Edit.

   

4. Under Map layers, click the visibility button for the Sketch and the Heat Severity - USA 2021 layers.

   

5. Click the Options tab and turn on Legend and Keep legend open.

   

   The legend will now remain open and visible on the map in the story.

   

6. If necessary, adjust the extent of the map so that the trees are centered. When you are finished, click Save.

   

7. At the bottom of the map, click the caption placeholder text and type Existing trees in census tracts with highest risk scores for heat waves.

Sharing a map in a story is one way to use maps to enhance and illustrate your narrative. Next, you will add a 3D scene to a sidecar element.

Add a sidecar

To create smooth transitions between maps, images, and other media, use the sidecar block. Using a series of slides, you can integrate media with text to create a simple scrolling experience. Sidecars allow others to access your mapped data one step at a time.

1. Below the map, add a separator.
2. Below the separator, add a Text block and type text Heat severity. Set the text to the Heading 1 style.

   

3. Below the header, add the following sentence to introduce the next section:

   Trees can lower surface and air temperatures by as much as 10 degrees. The protection from direct sunlight and heat also reduces the risk of heat-related illnesses, like headaches, cramps, heatstroke that can damage internal organs, and even death. Taking into consideration where there have been high levels of heat severity will better inform where more street trees are needed the most.

4. Under the paragraph text, click the Add content block button and under Immersive, click Sidecar.

   

5. For Choose a layout, choose Slideshow and click Save.

   A blank sidecar appears.

   

   A sidecar is an immersive block with a side-by-side presentation composed of a narrative panel on one side and a media panel on the other. Together, these two panels constitute a slide.

6. At the top of the media panel of the sidecar, click Add and choose Map.

   

7. In the Add a map window, choose the Tree planting opportunities in 3D scene.

   Note:

   If you did not create this scene in the tutorial Make a scene, go to the Tree planting opportunities in 3D (Final). On the item page for the scene, under the thumbnail, click Add to Favorites. Go back to your browser tab on the Add a map window and click the My Favorites tab. Choose the Tree planting opportunities in 3D (Final) scene.

   The map appears in the Adjust map appearance window. You will set up the first slide in the sidecar to show the overview of the city with the heat severity layer visible.

8. In the Adjust map appearance window, click the Slides tab and choose the Heat Severity slide.

   

9. Adjust the extent of the scene so the building outlines are visible and click Save.

   

   The map adds to the media panel of the sidecar. Next, you will add text in the narrative panel to accompany the map.

10. In the narrative panel of the sidecar, copy and paste the following sentence:

    With consideration to areas that have experienced high heat intensity, there are many areas that may benefit from additional shade trees.

    

    You have configured the first slide in the sidecar.

11. Click the New slide button.

    

12. Use what you have learned to add the same scene to the sidecar.

    Tip:

    At the top of the sidecar, click Add and click Map. Choose the Tree planting opportunities in 3D scene.

    This time, you will choose the bookmark that shows an area in the city where additional trees would be beneficial.

13. In the Adjust map appearance window, click the Slides tab and choose the Additional Street Trees 1 slide.

    

14. Adjust the extent of the scene as needed and click Save.
15. In the text box, type This area near the Pearl District would benefit from additional trees due to the high level of heat intensity it experiences.

    

16. Use what you have learned to add a third slide to the sidecar showing the Additional Street Trees 2 slide. For the text, type Areas in East Portland would benefit from additional trees.
17. Use what you have learned to add a fourth slide to the sidecar showing the Additional Street Tree 3 slide. For the text, type: The southwest side of Portland State University has areas that also experience high heat intensity and would benefit from more shade trees.
18. Click the first slide in the sidecar and click the next slide arrow to preview your sidecar slideshow.

    

    You have completed configuring the sidecar. Next, you will configure a few final elements of the story before it is ready for publishing.

Finalize and publish the story

To finalize your story, you will add citations and add a navigation bar so your viewers can quickly jump to each section in your presentation. You will preview the story, publish it, and then set the share settings so it can be shared with anyone.

1. Scroll to the bottom of the story and click Add a credits heading. Type References.
2. For the first citation, click Content and type Bernstein, A. 2020, Rising temperatures: How to avoid heat-related illnesses and deaths. Harvard Health Blog.
3. Click Attribution, type https://www.health.harvard.edu/blog/rising-temperatures-how-to-avoid-heat-related-illnesses-and-deaths-2020080517582.
4. Click the add button below the citation.

   

5. Add the following citations:

   • Davies, C. L. 2019. Trees Play A Vital Role In Landscape Design. Texas A&M Today. https://today.tamu.edu/2019/04/25/trees-play-a-vital-role-in-landscape-design/#:~:text=The%20aesthetic%20value%20that%20a,every%20architectural%20or%20landscape%20design
   • University of Wisconsin-Madison, 2019, Trees are crucial to the future of our cities. Science Daily. https://www.sciencedaily.com/releases/2019/03/190325173305.htm
   • U.S. Dept of Agriculture Forest Service. 1977. How Trees Help Clean The Air. Agriculture Information Bulletin No. 412. https://naldc.nal.usda.gov/download/CAT87209983/PDF
   • U.S. EPA, 2022. What is Green Infrastructure? https://www.epa.gov/green-infrastructure/what-green-infrastructure#Urbantreecanopy

   You have added five sources you used for your presentation. Next, you will add a navigation bar to the story.

6. On the ribbon, click Design.
7. In the Design pane, under Optional story sections, turn on Navigation.

   

8. Close the Design pane.

   A navigation bar adds to the story. Each of the links in the navigation bar corresponds to Heading 1 text in your presentation.

   

9. Click one of the heading titles.

   Clicking the heading will jump the page to that section of the story.

   The story is ready to preview.

10. On the ribbon, click Preview.

    

11. In the Preview will reset undo history window, click Yes, continue.
12. Review the story. Ensure the text is as you expect, interact with the map and sidecar, and confirm all the citations are correct.
13. When you are finished reviewing, click Close.

    

14. On the ribbon, click Publish.
15. In the Publish options window, for Set sharing level, choose Everyone (Public), and click Publish.

    The published version of your story appears. You can now share the link of this page to share your story with anyone.

In this tutorial, you configured a story using ArcGIS StoryMaps by adding a video clip heading, adding text, images, maps. You configured a map to specifically communicate your presentation narrative, and used a sidecar to show a slideshow of your proposed tree planting areas in 3D. You included references you used for this presentation and added a navigation bar so your viewers can jump to different sections of the story.

In an ArcGIS organizational account, you can customize your story theme, use additional types of content blocks like an image gallery, embed other ArcGIS apps, or add a timeline. You also have more sharing level options, like sharing the story only within your organization. To gain inspiration, explore the winning stories from the ArcGIS StoryMaps Competition.

Note:

For additional capabilities, including private sharing, publishing data, performing analysis, and more, make ArcGIS Online part of your GIS toolset by purchasing an ArcGIS organizational subscription. Subscriptions can include a variety of user types which makes it easy to match you and your team members with the necessary tools for your work. If you have an ArcGIS public account, you can convert your public account to an organizational account.

Acknowledgements

• The video clip for the story cover is from Coverr.
• Image of street trees by Craig Vodnik from Unsplash.
• National Risk Index Census Tracts is managed by Federal Emergency Management Agency (FEMA) using data from in close collaboration with various stakeholders and partners in academia; local, state and federal government; and private industry.
• PortlandTrees.csv contains coordinate information for tree locations in Portland, Oregon, adapted from the Street Trees feature layer by the City of Portland.
• Transportation uses National Geospatial Data Asset (NGDA) data from the U.S. Census Bureau.
• Heat Severity - USA 2023 by The Trust for Public Land.
• OpenStreetMap 3D Trees (Thematic) is a 3D scene layer which presents OpenStreetMap (OSM) trees data and OpenStreetMap 3D Buildings is a 3D scene layer that presents OpenStreetMap (OSM) buildings data. Both are hosted by Esri. Esri created buildings and trees scene layers from the OSM Daylight map distribution.
• Card image created using an image from Unsplash by Ben Kolde.