Integrate maps, apps, and scenes to tell a story

Being prepared for an earthquake can be lifesaving, particularly when living in a seismically active region such as California. In this tutorial, you work for a nonprofit organization that promotes earthquake preparedness in the state of California. You have an ArcGIS Online account and you need to use web-based GIS to communicate the importance of earthquake awareness and preparedness. You'll use datasets available through ArcGIS Living Atlas of the World to bring together existing maps and scenes using web apps. You'll integrate these apps into a story that can be shared with the public.

This tutorial was last tested on December 15, 2023.

View final result

Requirements

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

Create a dashboard

First, you want to illustrate the frequency and severity of earthquakes in California. While you can do this with a simple web map showing the location and size of recent earthquakes, it's more effective to also provide a number total. To show this data, you'll configure a dashboard. Dashboards can contain a number of elements that you can configure to show various statistics about the data shown on the map.

Open the map

The key component of the dashboard will be the web map. To create the dashboard, you'll share an existing map that shows several layers of earthquake data pulled from ArcGIS Living Atlas.

1. Open the California Recent Earthquakes and Earthquake Risk map and sign in to your ArcGIS Online account.

   Note:

   Depending on your organizational and user settings, you may have opened Map Viewer Classic. ArcGIS Online offers two map viewers for viewing, using, and creating maps. For more information on the map viewers available and which to use, please see this FAQ.

2. If necessary, in the pop-up window, click Open in Map Viewer or on the ribbon, click Open in Map Viewer.

   This map opens in Map Viewer with the Legend pane open.

   The map contains a few layers related to earthquakes and is centered on the state of California. The Legend pane shows the map legend for the layers currently visible on the map:

   • The Dark Gray Canvas Reference tile layer provides a city reference overlay for the world designed for use over a dark neutral background style with minimal colors, labels, and features.
   • The Recent Earthquakes layer shows earthquake events from the past seven days from a live feed of earthquake events provided by USGS.
   • The Earthquake Faults and Folds in the USA layer displays the location of known active faults and folds throughout the country.
   • The USA Earthquake Risk layer highlights the areas of the United States with the highest potential for earthquake activity. Each of these layers is available through ArcGIS Living Atlas of the World.
3. Sign in to your ArcGIS organizational account.

   Note:

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

4. On the Contents (dark) toolbar, click Layers.

   

   The Layers pane appears. There are three group layers on the map, two of which contain additional data layers.

5. Expand the Recent Earthquakes group layer and click the visibility button to turn the layers on and off and explore the data.

   

   Familiarizing yourself with the data is helpful because it will help you decide which elements to add later. Elements primarily provide a numerical view of your data and can be configured in multiple ways, including charts, graphs, counters, and lists.

6. On the Contents toolbar, click Create app and click Dashboards.

   

   The Create new dashboard window appears.

   The new dashboard inherits the title and tags of the original map. To ensure that your dashboard is given a unique name in your ArcGIS Online organization, you'll add your initials.

7. In the Create new dashboard window, for Title, add your initials to the end of the default name.
8. Leave the summary and tags unchanged and click Create dashboard.

   

   The dashboard opens with a display of the web map. The application theme is currently set to Light. To make the bright map stand out, you'll change the theme to Dark.

9. If necessary, on the bottom corner click the Expand button to expand the dashboard toolbar.

   

10. On the dashboard toolbar, click Theme.

    

11. Under Layout, for Theme, choose Dark.

    The application updates to the Dark theme.

12. For Element background color, click the color and choose a dark gray shade, such as the one with a Hex value of #242424.

    

13. Close the Theme panel.

Add elements

The dashboard now contains a single element: the map you shared. To provide viewers with more context, you'll use built-in elements that can be configured to display information about the contents of the web map. Elements are data driven and primarily display numerical data, which can be shown as charts, indicators, and so on. You'll add two elements that give context to the information in the web map: a map legend and an indicator that totals the number of earthquakes shown on the map.

1. On the dashboard toolbar, click Add element.

   

   You can now add an element to any location on the dashboard's layout.

2. Click on the + icon close to the dashboard toolbar and choose Map legend.

   

   The Map legend configuration view opens. The Legend element shows the same legend information as the Legend pane in the map. No additional configuration is needed.

3. Click Done.

   Now that the legend has been added, you can choose where in the dashboard to display it.

4. If necessary, dock the Legend element on the left side of the map and resize the legend so that the map takes roughly three-quarters of the dashboard.

   

   Adding the map legend helps users understand the symbology displayed on the map. You'll also add an element that totals the number of points shown on the map.

5. On the dashboard toolbar, click Add element, click the + icon and choose Indicator.

   

   The Select a layer window opens to show a list of the layers contained in the web map.

6. In the layer list, expand Recent Earthquakes, choose Events by Magnitude.

   This layer filters the entire earthquake dataset to show only the events that have occurred in the past week, symbolized by magnitude. Magnitude is a measurement commonly used to communicate earthquake severity and will be recognizable to most individuals viewing the application.

7. In the Indicator configuration pane, click the Indicator tab.

   

   The Indicator tab allows you to configure the appearance of the element, including title, font, and alignment. Without configuration, the indicator would only show the count of points. To provide context, you'll add text to the indicator.

8. For Top text, type Significant Events. For Bottom text, type in the Past 7 Days.

   

   The element box now shows the number supplied by the layer with explanatory text.

   Note:

   Because this is a live data feed, the number of significant events on your indicator may be different than the one shown in the example image.

9. Click Value formatting and disable Unit Prefix using the toggle button.

   

10. Click Done.

    The element is added to the dashboard but takes up a large part of the screen.

11. Resize the Indicator element so that it only takes up about a quarter of the screen.

    

    The Indicator element currently shows all the earthquakes that have occurred around the world in the last week. Because your story is focused on preparedness in California, the indicator would be more meaningful if it focused on points in the state. To filter the data, you'll connect it to the current map extent. As the viewer zooms and pans the map, the indicator will update to show the number of events that happened within that specific extent.

12. Point to the upper left corner of the Map element and click Configure.

    

13. In the Map configuration pane, click the Map actions tab.

    

14. Under When map extent changes, click Filter.
15. In the Filter action, enable 99! Indicator (1) using the toggle button.

    

16. Click Done.
17. Pan and zoom the map.

    When you change the extent of the map, the Indicator element updates to show the count of earthquakes in the map view.

18. On the dashboard toolbar, click Save and Save again.

    

    The dashboard is fully configured. To make sure viewers can see all the content, you'll need to change the subscriber content settings.

19. On the dashboard toolbar, click Subscriber content.

    

    All three of the layers on the web map are subscriber content, meaning that you must be signed in to an ArcGIS Online account to view it. For dashboards and other public applications, you can choose to allow anonymous viewers access through your account. These layers won't cost your organization any credits to view.

20. In the Subscriber content window, under Enabled, switch the layer on.

    

    Once you enable the subscriber content, you're also given the option to limit how many views it gets. This doesn't matter as much for subscriber content, which is free, but can be important to set for premium content, which is charged to your organization.

21. Click Done.

    The content you've created, including the California Recent Earthquakes and Earthquake Risk dashboard, is listed. Because the original web map was shared with everyone, the dashboard is also shared with everyone by default.

The dashboard is the first application that you'll add to your final story. This application gives the reader an idea of the frequency and severity of earthquakes in California.

Build a web scene

California is the most populous state in the United States with approximately 40 million residents in 2019. Many of those residents live in close proximity to earthquake fault lines, putting them at great risk of being affected by earthquakes. To visualize where people live in relation to fault lines, you'll create a 3D web scene showing population density.

Configure a web scene

To build the 3D web scene, you'll use population data from ArcGIS Living Atlas. Similar to the map of earthquakes used in the previous section, you want to make the scene interactive for your users. You'll create slides, or bookmarks, of densely populated places on your scene, then create a web app so that your users can easily navigate to them.

1. Go to the CA Population Density item page.
2. If necessary, sign in to your ArcGIS organization account.
3. On the item details page, click Open in Scene Viewer.

   

   The web scene shows population density, or how close together people live. In urban areas with high population density, there are more people who may be affected by earthquakes.

   The data points are shown in the center of each census block group. These boundaries aren't useful to your visualization, so you'll remove them.

   Next, you'll add earthquake fault data to your web scene and configure slides. Doing so will allow users of your application to easily navigate to highly populated areas.

4. In the side pane, click Layers.

   

   The Layers pane appears.

5. In the Layers pane, for the Census Block Groups layer, click the options button and choose Remove.

   

   Next, you'll add the fault line layer.

6. In the side pane, click Add layers and click Browse layers.

   

7. In the My content pane, click My content and choose Living Atlas.

   

8. Search for Earthquake Faults and Folds in the USA. In the list of results, for the Earthquake Faults and Folds in the USA layer, click Add.

   

9. Click Done.
10. In the Layers pane, expand the Earthquake Faults and Folds in the USA layer and uncheck the Ca offshore layer.
    

    Close the Layers window.

11. In the Slide Manager pane, click Slides.

    

    Capturing a slide creates a snapshot of the map exactly the way you see it. When clicked, the slide zooms and pans the scene to the same view. For the purposes of this application, you'll create slides for four majority cities in California that are located near active faults.

12. Click the Search button and type Los Angeles. Press Enter.

    

    The scene zooms to Los Angeles, California. As a major population center, the city of Los Angeles has a high population density. It's also in close proximity to several faults.

13. If necessary, zoom out until you can see the fault north of the city of Los Angeles. Close the Search result pop-up.

    

14. In the Slides pane, click Capture slide and type Los Angeles and press Enter.
15. Capture slides for San Diego, San Jose, and San Francisco, California.

    You may need to zoom out on each of these locations until a fault line appears in view.

16. Click Save.

    

17. In the Save scene window, add the following information:

    • For Title, type Population Density and Earthquake Faults and add your name or initials.
    • For Summary, type Population Density and Earthquake Faults in and around the state of California.
    • For Tags, type Earthquakes, California.

18. Click Save.

Build a 3D web application

Once the web scene is configured the way you want it, you'll build a 3D web application from it. It's also possible to share web maps and scenes, but choosing an app template that showcases the slides you created will make it easier for your viewer to understand the data as you want to display it.

1. In ArcGIS Online, on the ribbon, click the Content tab and click the Population Density and Earthquake Faults scene to open its item details page.

   

2. On the item details page, click Create Web App and choose Instant Apps.

   

   The Instant Apps templates gallery appears with templates that are compatible with 3D scenes.

3. For the 3D Viewer template, click Choose.

   

4. In the Create App - 3D Viewer window, for the title, type Population Density and Earthquake Faults App and click Create App.

   The app configuration window appears. When configuring the app, you can use the default Express setup to create an app with the most essential settings or switch to Full setup to access and search all its configurable settings.

   You'll use the Full setup settings to include the Scene bookmark widget in your app. If the default settings are acceptable for your use case, you don't need to go through each step in the setup.

5. On the configuration toolbar, disable Express using the toggle button.

   

6. If necessary, in the Turn off express mode window, click Continue.
7. On the configuration toolbar, click Interactivity.

   

8. In the Interactivity pane, click Explore/navigate.
9. Under Explore, enable Display preset slides using the toggle button.

   

   The app preview updates with a new button that users can click to access the slides you created for the four California cities. You can test the app as you configure it.

10. On the configuration toolbar, click Theme & Layout. In the Theme pane, click Theme. For Select a mode, choose Dark.

    

    The theme colors for the app now match the dark palette you used for the dashboard.

11. Click Publish and click Confirm.

    A success message appears briefly when publishing is completed and the Draft badge changes to a Published badge with the date and time you published. In the Share window that appears, you can click Launch to open your app and test it in a new window. To make sure it's visible in your story later, you'll update the sharing status.

12. Click Close. Click Exit. When prompted, confirm that you want to exit.

    The app's item page appears. The title and tags are already completed from when you created the app. You could also add more details, such as a detailed description.

13. In the item page for the app, click Share, choose Everyone (public), and click Save.
14. In the Update sharing window, click Update.

You've completed the second application that you'll embed in your final story. The 3D Viewer app allows your audience to use slides to quickly navigate to densely populated areas of the state to view population data and earthquake fault locations in 3D.

Share the story

To tell the full story of earthquake risk in California, you'll create a story using ArcGIS StoryMaps. A story can display multiple apps, such as the two you've created, and enrich the experience with multimedia and text for additional context.

Create a story

First, you'll download an image you will use in the story.

1. Download the earthquake image and save it to the location of your choice.

   You'll use this image to help create your story.

2. In ArcGIS Online, click the Apps button and choose StoryMaps.

   

   Note:

   You can also browse to the ArcGIS StoryMaps website and sign in using your ArcGIS Online account.

3. On the My Stories page, click New story and choose Start from scratch.

   

   Note:

   Depending on whether you have created a story before, the site layout may be different than in the example image.

   The ArcGIS StoryMaps builder opens to a blank title page. Before you start building your story, you'll change some of the appearance settings. Like the other two apps you built, you want the story to have a dark color scheme.

4. On the ribbon, click Design.

   

5. In the Design pane, for Theme, choose Obsidian.

   

   The builder updates.

6. Close the Design pane.
7. For Title Your Story, type California Earthquake Risk.
8. Under the title, paste the following introduction: Now is the time to prepare.

   

   The story will be saved under the new title. The draft is automatically saved. On the other side of the title page, you can add an image or video.

9. Next to the title, click Add cover image or video.

   

   A window appears to choose the image.

10. In the Add an image or video window, click Browse your files. Browse to the folder where you saved the earthquake_damage.png image. Select it and click Open.
11. Click Add.

    The image appears in your story as the cover image.

Add content

Next, you'll embed text, photos, and your web applications in the story to create a final product. Each story is built using a series of content blocks that include a variety of types of text, images, applications, maps, and other media.

1. Point to the area under the story title, click the Add content block button and choose Text.

   

2. Type or copy and paste California is home to 15,700 known faults, and scientists discover more each year.
3. Highlight the text and In the text editor bar, click Paragraph and choose Heading 1.

   

4. Below the Header 1 text, click the Add content block button and choose Embed.

   The Add web content window appears. In this window, you'll paste the link to the dashboard you created.

5. In a new browser window, go to the Contents tab in your ArcGIS Online account and open the item page for your California Recent Earthquakes and Earthquake Risk dashboard.

   For the dashboard to be visible to anyone viewing the story, you will update its share setting.

6. On the item details page for the California Recent Earthquakes and Earthquake Risk dashboard, click Share. In the Share window, click Everyone (public) and click Save.

   Now you will copy the URL for the dashboard.

7. On the item page, scroll down to the URL section and click Copy.

   

8. Return to your story. In the Add web content window, paste the link and click Add.

   The dashboard is added to the story. By default, it's added in the smallest format.

9. Point to the app. On the toolbar, click Medium.

   

10. Below the application, click the dashboard title and add the caption Earthquake fault locations, recent earthquakes in the past 7 days, and earthquake risk in California.

    

11. Below the dashboard, click Add content block, choose Text. Add the following text: Most California residents live within 30 miles of an active fault. Highlight the text and in the text editing bar, click Paragraph and choose Heading 1.
12. Click Add content block and choose Embed. In the Add web content window, paste the shareable link to Population Density and Earthquake Faults App.

    Go to the item details page for your Population Density and Earthquake Faults App web app and copy the link in the URL section.

13. Click Add.

    By default, the app is embedded as an interactive display. You will also make the app larger to match the size of the scene you embedded earlier in the story.

14. Point to the Population Density and Earthquake Faults App card. On the toolbar, choose Medium.

    The application is resized to its medium dimensions. The slides you saved are shown in the upper right corner of the app. If you aren't signed in, the scene prompts you to do so.

    

15. Below the application, replace the Scene Viewer title text with the caption Use the Slides widget to view active faults near major California cities.
16. Add a Heading 1 text content block with the following text: There is a 99 percent chance of one or more magnitude 6.7+ earthquakes occurring in California within the next 30 years.

Publish the story

The last elements to add to your story are links for the reader to learn more about earthquake preparedness. You'll add links to websites for more information before publishing your story.

1. Click Add content block and choose Separator.

   A line is added to the story to create a division between the sections of content.

2. Under the separator, add a Heading 1 text content block and for the text Now is the time to prepare for an earthquake event.
3. Add a Large paragraph text content block and for the text For more information about how to prepare for and stay safe during an earthquake, see the following resources:
4. Add two Embed content blocks, one with the resource link https://www.earthquakeauthority.com/California-Earthquake-Risk and one with the link https://www.shakeout.org/california/.

   The links are added to the story.

   

   Your story is now complete and ready to be published.

5. On the ribbon, click Publish .
6. In the Publish options window, under Share, for Set sharing level, select Everyone (Public)

   

7. Click Publish.

Your story is now ready and available to share with Californians. Using web maps, apps, and scenes, you've shown the hazard and potential impact of an earthquake and provided links for readers interested in learning more about preparedness.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• The CA Population Density data is derived from Esri Updated Demographics Variables 2023.
• The Earthquake Fault and Folds in the USA layer is available in the ArcGIS Living Atlas. Data is provided by the U.S. Geological Survey's (USGS) Earthquake Hazards Program (EHP).
• The Building Emergency Disaster image is by Rafael Ben-Ari.
• Light Gray Canvas map sources: Esri, HERE, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community