Oso mudslide - Before and after

Create a web map

After you analyze imagery or prepare geospatial data, you often publish those items as layers in ArcGIS Online, as a step to share them with your audience. A good way to present these layers in an engaging manner is to encapsulate them into a web app.

Before you can create the web app, you first need to gather all the layers of interest in a web map. First, you'll set up a new web map in ArcGIS Online.

  1. Go to ArcGIS Online, click Sign In, and sign in to your ArcGIS organizational account.
    Note:

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

  2. On the ribbon, click Map.

    Map

    Note:
    Depending on your organizational and user settings, you may have opened Map Viewer Classic, formerly known as Map Viewer. 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.

    This lesson uses Map Viewer.

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

    Map Viewer opens.

    Tip:

    If you're in a new session, clicking Map opens a new map. Otherwise, it opens an existing map (the last map you were using). If an existing map opens, click New Map.

    Blank map in new Map Viewer

    Next, you’ll add the layers of interest and start organizing your map. The first layer is the imagery captured right after the 2014 landslide.

    Note:

    For this lesson, the layers were already published in ArcGIS Online. In a real project, the layers would have most likely been published by you or your organization. Or you might also use preexisting layers from reliable and authoritative sources, such as ArcGIS Living Atlas of the World.

  4. In the Layers pane, click Add layer.

    Add layer button

    The Add layer pane appears.

  5. In the Add layer pane, click My Content and choose ArcGIS Online.
  6. In the search bar, type Aerial Imagery Oso Slide Area owner: esri_event and press Enter.

    Several results appear.

  7. Identify the Aerial Imagery Oso Slide Area layer and click Add.

    Add button for Aerial Imagery Oso Slide Area layer

    The layer is added to the map, and the map viewer zooms in to its extent. This is the imagery that was captured right after the 2014 Oso landslide, in a rural area of Snohomish County, Washington (north of Seattle). The light-colored shape in the middle of the imagery is the result of the mudslide. The slide began on a hill to the north and sped down, damming the river, blocking a nearby highway, and completely burying the Steelhead Drive community. The tragic destruction caused 43 people to lose their lives.

    Since the map you are building will be mostly made of imagery, you also want to choose a basemap based on satellite imagery, so that it all looks more cohesive.

  8. On the Contents (dark) toolbar, click Basemap. Choose the Imagery basemap.

    Imagery basemap

    This basemap shows satellite imagery of the entire world and serves as a backdrop for the other layers. You'll now add a polygon layer to show the boundary of the mudslide impact.

  9. In the Contents pane, click Layers and click Add layer.
  10. Search ArcGIS Online for the Oso Mudslide Impact Area owner:Learn_ArcGIS layer. Add the Oso Mudslide Impact Area layer.

    The layer is added to the map.

    Oso Mudslide Impact Area added to map

    It represents the boundaries of the mudslide impact, which includes the mudslide itself and the flooding it caused on the east side by damming the nearby Stillaguamish River. You'll now change its symbolization to make sure it does not hide the imagery.

  11. At the top of the Add layer pane, click the back arrow.

    Back arrow

    The Layers pane appears, where you can see a list of the layers you have added so far.

  12. Ensure the Oso Mudslide Impact Area is selected, and on the Settings (light) toolbar, click Styles.

    Styles

  13. In the Styles pane, under Try a drawing style, for Location (single symbol), click Style options.

    Style options

  14. Click the symbol under Symbol style.
  15. In the Symbol style window, turn off Enable fill. Expand Outline and Colors, and choose a red color.

    Symbol style settings

  16. Expand Stroke and increase the Width to 5.

    Stroke Width

  17. In the Style options pane, click Done two times.

    The map now shows the impact boundary without obscuring the imagery. You'll now rename the layers to shorter, more meaningful names.

  18. In the Layers pane, for the Oso Mudslide Impact Area layer, click the Options button and choose Rename.

    Rename layer

  19. Rename the layer Impact area and click OK.
  20. Similarly, rename the Aerial Imagery Oso Slide Area layer to Postevent imagery.

    After choosing a more precise extent, you'll save the map.

Add historical basemap

One issue with the map is that the default imagery basemap shows the current landscape. For comparison purposes, it would be more useful to have a basemap that shows the landscape before the slide occurred. You'll now remedy that by adding a historical imagery layer as a basemap.

  1. If necessary, on the Contents toolbar, click Basemap and click Current basemap.
  2. In the Basemap pane, click Add layer.
  3. Search ArcGIS Online for Oso_2012 owner:Learn_ArcGIS. For the Oso_2012 layer, click Add.

    Add Oso_2012 layer.

  4. At the top of the Add layer pane, click the back arrow, and if necessary, on the map, zoom in until the 2012 imagery is visible.

    2012 imagery layer added to map

    The new layer is now part of the basemap, showing the preevent landscape. This is imagery captured in 2012, two years before the Oso landslide. This pre-event imagery shows the Steelhead Drive community before it was destroyed in the mudslide.

    However, if the user zooms out beyond the extent of the Oso 2012 imagery, the regular imagery basemap will be displayed, providing a seamless experience.

  5. On the Contents toolbar, click Layers.
  6. In the Layers pane, for the Post-event imagery layer, click the visibility button on and off to compare the pre- and postevent landscape.

    Visibility button

    Note:

    Depending on the size of your screen, you may need to zoom in by two or more zoom levels.

    You can see how the local Steelhead Drive community was completely buried by the slide.

    Area where Steelhead Drive community was located

    After choosing a more precise extent, you'll save the map.

  7. If necessary, turn on the Post-event imagery layer, and for the Impact area layer, click Options and choose Zoom to.

    You can now see the entire impact boundary.

    Extent of impact area

  8. On the Contents toolbar, click Save and open, and click Save.

    Save on Save and open tool

  9. In the Save map window, enter the following:
    • For Title, type 2014 Oso Mudslide Imagery and Extent and add your initials at the end.
    • For Tags, type Oso, Washington, and mudslide, pressing Enter after each word.
    • For Summary, type This web map displays the 2014 Oso mudslide impact area (estimated) and imagery of the aftermath.

    Save map window

  10. Click Save map.

    Next, you'll add notes to your map to make it easier to understand.

Add a sketch layer

You'll now add a sketch layer to your map. Creating a sketch layer is a good way to add a small number of features to a map, such as arrows and labels. The features in a sketch layer are saved with the map so that only you, the map author, can edit and save them.

  1. If necessary, turn off the Post-event imagery layer to make it easier to add the Sketch layer features.

    Add Sketch layer

    The Sketch pane appears.

  2. On the Contents toolbar, click Add and choose Sketch layer.
  3. Under Draw features, choose Line.

    The Line pane appears.

  4. In the Line pane, expand Stroke. For Arrow, choose the symbol that ends with the arrow on the right.

    Arrow end on the right

  5. For Width, type 6.
  6. Click a point on the map to begin drawing.

    A point appears on the map and a line extends from it, controlled by the mouse pointer.

  7. Double-click to place the endpoint arrow and complete the line.

    The arrow should give a sense of the mudslide direction.

    Arrow sketch on map

    Note:

    To modify the arrow, under Select features, click Select, and click the line. The feature is selected on the map and the pane associated with the feature appears. Optionally, drag a feature's handles to resize or rotate it.

    You'll now add a few labels.

  8. In the Sketch pane, under Draw features, click Text.

    Draw a text feature.

    The Text pane appears.

  9. On the map, click a location above the mudslide arrow. In the Text pane, for Content, replace the text with Landslide.

    The text updates on the map. You'll now change the font color to white.

  10. In the Text pane, set the following parameters:
    • For Font, choose Arial Bold.
    • For Color, choose white.
    • Under Halo, for Color, choose black.

    Text settings on Text pane

    The text feature is now clearly visible on the map.

    Text feature on map

    Note:

    If you need to reposition the text feature, on the Sketch pane, under Select features, click Select, click the text feature, and hover over the feature until your cursor updates to a move feature symbol. Drag the text feature to the desired location.

  11. Similarly, use the Sketch pane to create text features to label the location of the upstream flooding, located toward the east of the impact area, and the Steelhead Drive Community.

    Two additional text features added to map

    The text features you added are labels. Next, you will add dotted lines to point to the exact location of the affected communities.

  12. In the Sketch pane, under Draw features, click Text. On the map, click the location where you want to start the dotted line, and double-click where you want to end it.

    First line added

  13. In the Line pane, expand Stroke. For Pattern, choose the smaller dotted line.

    Small dotted line pattern

  14. For Width, type 4.

    The first dotted line appears.

    Line formatted on map

  15. Similarly, create a second dotted line to label the Steelhead Drive Community. Use Select features to rearrange the features as needed.

    Second line added

    Your map note layer is now complete. You’ll now finalize and share the map.

  16. Close the Sketch pane, and on the Contents toolbar, click Layers. Turn the Post-event imagery layer back on.
  17. For the Impact Area layer, click the Options button and click Zoom to.

    The map returns to the extent where all layers and features are visible.

  18. In the Layers pane, click the Options button for Sketch layer and click Rename. Rename the layer Reference Information.
  19. Save the map.

    Finally, you will share the map.

  20. On the Contents toolbar, click Share map. In the Share window that appears, choose Everyone (public) and click Save.

You have built an online map containing all pre- and postevent imagery, as well as supplementary data and notes to help users make sense of the map. Comparing the pre- and postevent imagery tells a compelling story about the devastation the mudslide caused, although a side-by-side comparison would be more convenient than switching the layer on and off. You’ll now encapsulate the map in a web app to enhance its functionality and make it more user-friendly.

Create an app

Now that your web map is ready, you will add it to a web app to present its information in the best way possible. Specifically, your goal is to allow your audience to easily compare the pre- and postlandslide imagery. An app takes a web map and adds functions and tools to improve the user experience. You can create an app using a template, or you can use Web AppBuilder to create a custom app that fits your specifications exactly. In this lesson, you will use Web AppBuilder to create a custom app.

  1. Next to the map title, click the menu button and choose Content.

    Home menu

    The My Content page appears.

    The My Content tab on the content page contains all of your ArcGIS Online content. It includes the copy of the 2014 Oso Mudslide Imagery and Extent map you saved, which you'll use to create your app. Although you don't have to own a map to create an app from it, any changes made to a map will be reflected in your app. By using a copy that you own, you can ensure nobody else will change the map.

    Note:

    Saving a copy of the map does not give you ownership of the layers in the map, such as the Post-Event Imagery layer. If the owner of these layers deletes them, it will affect both your map and your app. For this exercise, you don't have to worry about the layers suddenly being deleted.

  2. At the top of the page, click Create app, and click Web AppBuilder.

    Create an app using Web AppBuilder.

    The Create a web app window appears.

  3. In the Create a web app window, enter the following:
    • For Title, type Oso Mudslide Before and After.
    • For Tags, add terms describing the geography and content of the map, such as Oso, Washington, and mudslide. Press Enter after typing each tag.
    • For Summary, type Pre- and post-event imagery of the 2014 Oso mudslide.

    Create a web app window

  4. Click OK to open Web AppBuilder.

    Web AppBuilder opens with a default map.

    Web AppBuilder

    To one side of the map is a pane that allows you to configure the app. The pane has four tabs, each with a different set of options. The first tab is Theme. It allows you to change the style and layout of the app.

  5. On the Theme tab, under Style, choose the black style.

    Style

    The title bar updates to reflect the change. The black color will evoke a serious tone to match the severity of the disaster.

  6. For Layout, keep the default, which is named Foldable Theme.

    The layout determines where the functionality widgets will be located in the web app.

  7. Click the Map tab.

    Map tab

    The Map tab allows you to choose the web map used in the app. You can also set the initial extent of the map and change the scale levels the map can zoom to.

  8. Click Choose web map. In the Choose web map window, under My Content, click your copy of the 2014 Oso Mudslide Imagery and Extent map and click OK.

    The mudslide map replaces the default map. It is set to the same extent as when you saved it, which may not show the full extent of the data. You'll change the default extent so the app opens with all data visible.

  9. If necessary, zoom and pan the map until all of the layers are completely visible.

    Full extent

  10. On the Map tab, under Set initial extent, click Use current map view.

    Set initial extent

    You'll now save your app.

  11. At the bottom of the side pane, click Save.

    Save button

Configure widgets

Next, you'll configure widgets for your app. Widgets are tool functions that can be added to the user interface. Many of them are turned on by default. This section won't describe every available widget, but it will cover many of the most important ones.

  1. Click the Widget tab.

    Widget tab

    The Widget tab shows some of the available widgets. Widgets that are turned off appear dimmed. At the bottom of the list are spaces for five additional widgets. You'll begin by hiding the widgets you don't need on your app.

  2. Point to the Attribute Table widget and click the Hide this widget button.

    Attribute Table widget

    The Attribute Table widget allows the user to open a table of attributes related to the data on the map. Your data is more visual in nature and has few useful attributes, so this widget is not needed.

  3. Hide the My Location, OverviewMap, and Search widgets.

    Search and My Location widgets

    Note:

    When a widget is turned on, and you hover over it, its location is highlighted in red on the web app. This can be useful to identify the widget.

    The My Location widget, which is based on a computer's current location, zooms the map to the user's current location. The Search widget allows the user to search for and zoom to a specific address. The Overview Map widget shows the map extent in a larger context, but it is not very useful when looking at imagery. Hiding these widgets prevents users from deviating from the default map extent.

    The other default widgets are useful for your app. The Home Button widget is located in the upper left of the map and allows a user to zoom to the map's initial extent. The Coordinate and Scalebar widgets are located in the lower left of the map and give geographic reference information about the map.

    Note:

    You can learn more about individual widgets in the ArcGIS Web AppBuilder documentation.

  4. Locate the Coordinate and Scalebar widgets in the lower left of the map.

    Coordinate and Scalebar widgets

    You'll configure the Scalebar widget to make it more visible.

  5. On the Widget tab, point to the Scalebar widget and click the Configure this widget button.

    Scalebar widget

    The Configure Scalebar window appears.

  6. In the Configure Scalebar window, for Style, choose ruler.

    Configure Scalebar

    Note:

    You can also use this window to change the unit type. Based on your audience, you can decide whether English, metric, or dual is more appropriate.

  7. Click OK.

    The broad bar is easier to see than the thin line. Next, you'll turn on additional widgets to give your app added functionality. First, you'll click an empty widget so you can activate the Swipe widget, which allows users to quickly compare two layers.

  8. On the Widget tab, click the first empty widget.

    First widget

    The Choose Widget window appears, showing additional widgets.

  9. In the Choose Widget window, search for and choose the Swipe widget. Click OK.

    Swipe widget

    The Configure Swipe window appears.

  10. In the Configure Swipe window, for Type of swipe tool, confirm that Vertical bar is selected.

    Choose a style for the swipe tool.

  11. For Swipe mode, confirm that Single layer is selected. For Swipeable layers, uncheck Reference Information and Impact Area, so only Post-Event Imagery, the layer you want users to swipe, is selected.

    Post-Event Imagery selected as the only layer to swipe

  12. Accept the default for all the other options, and click OK.

    The Swipe widget is added to the top of the map.

    Faded swipe widget

    The Swipe widget allows a user to change the visibility of a layer by dragging a slider bar across it. In your case, you want the user to be able to change the visibility of the Post-Event Imagery layer so they can compare it with the imagery below.

    Although you can use the widgets on the map while editing the app, you'll test the Swipe widget later in the lesson. For now, you'll add more widgets. The four widgets at the bottom of the list are empty spaces that can hold more widgets.

  13. On the Widget tab, click the first empty widget, now numbered 1.

    First empty widget

  14. In the Choose Widget window, click the About widget and click OK.

    About

    The Configure About window opens.

  15. In the large text box, delete the default icon and text and copy and paste or type the following:

    This app shows imagery from the 2014 Oso mudslide in Snohomish County, Washington. Use the Swipe tool to compare imagery from before and after the slide.

    The red outline shows the extent of the slide's impact, including flooding.

    This disaster led to the deaths of 43 people and caused millions of dollars of damage.

  16. Select the text and for Size, choose medium and click OK.

    Font size

    The About widget appears at the top of the map next to the Swipe widget you just added. When you click the About widget, the text appears in a window. Next, you'll add a widget that allows users to measure distances and areas.

  17. On the Widget tab, click the next empty widget (renumbered to 1). In the Choose Widget window, click Measurement and click OK.

    Measurement

    The Configure Measurement window allows you to choose the default unit of measurement. Depending on your audience, the default measurement units are fine, but you can change them if you want.

  18. In the Configure Measurement window, click OK.

    The Measurement widget appears next to the About widget at the top of the map. You have space for two more widgets, but you can leave them empty. If you want, look through the remaining widgets and see if there are any you think would be useful in your app.

    Lastly, you'll set the widgets in the header controller (the title bar).

  19. At the top of the Widget tab, click Set the widgets in this controller.

    Header Controller

    The Header Controller is another place where widgets can be added. Two widgets are here already: Legend and Layer List. You can find them on the opposite side of the title on the title bar. The Layer List widget shows all of the layers on the map and gives the user the ability to turn them on and off. The Legend widget shows the symbology for each layer. Since most of your layers are imagery, they don't have symbology. The Legend widget does not convey much meaningful information, so you'll turn it off.

  20. On the Widget tab, point to the Legend widget and click the Remove this widget button.

    Legend widget with Remove this widget button

  21. When asked if you are sure you want to remove the widget, click OK.

    The Legend widget is removed from the header controller. Your widgets are now configured.

  22. At the bottom of the side pane, click Save.

Finish and test the app

Before you launch your app and test the widgets, you'll add a few finishing touches.

  1. Click the Attribute tab.

    Attribute tab

    The Attribute tab allows you to change some of the details in the title bar. You can change the title, subtitle, and logo, as well as add links. First, you'll download an image of the Snohomish County seal to use as your logo.

  2. Save the Snohomish County seal to your computer where you can easily find it.
  3. On the Attribute tab, under Branding, point to the default logo and click Custom.

    Snohomish County logo

  4. In the Set logo window, click Upload and browse to your saved image of the Snohomish County seal.
  5. For Alt text, type Snohomish County seal and click OK.

    Alt text for Snohomish County seal

    The logo appears on the app title bar.

    Title bar

    Next, you'll add a link to supplemental information about the 2014 Oso mudslide.

  6. On the Attribute tab, under Links, click Add new link.

    Add new link

    A pane appears to enter the link title and URL.

  7. For Title, type Additional Information. For URL, copy and paste the following URL:

    https://www.snohomishcountywa.gov/2371/SR-530-Slide-Permit-Building-Info

    Link settings

    This URL goes to the Snohomish County website's page on the Oso mudslide (called the SR 530 slide on the site, after the highway that was destroyed during the disaster). The page contains many resources and will provide a good starting place if your users want to learn more about the event.

  8. Click OK.

    The Additional Information link appears on the title bar.

  9. On the title bar, click the Additional Information link.

    The link opens in a new page.

  10. Once you've confirmed the link works correctly, close the page and return to the app.
  11. At the bottom of the side pane, click Save.

    Next, you'll launch the app and test some of its widgets.

  12. At the bottom of the side pane, click Launch.

    Launch button

    The app launches in a new browser tab.

    Finished app

    You'll first test the Swipe widget.

  13. Zoom to the Steelhead Drive community. At the top of the map, click the Swipe widget.

    Swipe tool

    A vertical slider bar appears on the map. On one side of the slider, the Post-Event Imagery layer is shown, while on the other side, the layer is hidden, revealing the 2012 basemap imagery of the area.

  14. Drag the slider bar to the left and right to hide or show more of the layer.

    Swipe slider

    Using the Swipe tool, it becomes easier to compare what the area looked like before and after the event. The compelling imagery indicates that the Steelhead Drive community was completely buried by the slide, with little to no trace remaining.

  15. Click the Swipe widget to turn it off.

    Next, you'll use the Measurement widget to see how far the mudslide traveled before reaching the community.

  16. Zoom and pan the map until you can see both the beginning of the landslide and the Steelhead Drive community.

    Landslide distance

  17. At the top of the map, click the Measurement widget.

    Measurement widget

    The Measurement window appears.

    It gives you the option to measure by area or distance. You can also use it to find the coordinates of a single point on the map, similar to the Coordinates widget.

    Note:

    If necessary, you can move the Measurement window out of your way, while you are doing the measurements, by dragging its title bar.

  18. In the Measurement window, click the Distance button.

    Distance

    The default unit of measurement is miles, unless you changed it when you configured the widget.

  19. On the map, click a point near the beginning of the landslide to add a marker.

    Landslide start

    Note:

    Don't worry about clicking the exact locations in the example images.

    After you place the marker, a blue line connects your mouse pointer to the marker.

  20. Click the tip of the large arrow to place another marker.

    Landslide middle

    The Measurement window shows the distance between these markers. The distance should be between 0.4 miles.

  21. Continue the measurement and double-click a point in the Steelhead Drive community to finish the measurement.

    Landslide end

    The final distance the landslide traveled before reaching the community is about 0.6 miles.

  22. On the Measurement window, click Clear to clear the measurement markers and close the Measurement window.

    Clear button

    The lines and markers are removed from the map. You've now tested some of the widgets in your app. Try out some of the other widgets if you want (you can return to the app editor from My Content). For now, you'll move on to the final part of the lesson.

Add metadata

The last step before finishing your app is to add metadata. Metadata is information that explains what your app is about. All ArcGIS Online items have metadata, which you can access through the item page.

  1. Close the app. At the top of the app editor, click Home and choose Content.

    The Oso Mudslide Before and After web mapping application is now in My Content. Both the app and the map on which it's based need to be shared before you can show the app to others. You already shared the map with the everyone, and you'll now share the app.

  2. Check the box next to the Oso Mudslide Before and After app.

    Oso Mudslide web map and app selected

  3. Above the list of items, click Share, and in the Share window that appears, choose Everyone (public).
  4. Click Save.

    Now that your app is shared, you'll add metadata.

  5. Click the more options button for the Oso Mudslide Before and After web app and choose View item details.

    View item details

    The item page appears. You previously filled in some of the metadata, like the summary and tags, when you first created the app. However, the app still has no description and no credits. It also uses a generic default thumbnail.

    First, you'll replace the default thumbnail. You can replace it with a screen capture of the app, an image of your choice, or the image from the Learn ArcGIS site.

  6. Above the thumbnail image, click Edit Thumbnail.

    Edit Thumbnail

  7. In the Create Thumbnail window, under Upload an image, click Browse.
  8. Browse to the file to use as the thumbnail and double-click it. In the Create Thumbnail window, click OK.

    Next, you'll add a description.

  9. On the item page, below the thumbnail and next to Description, click Edit, and copy and paste or type the following description:

    This map displays the 2014 Oso mudslide impact area (estimated) and imagery of the aftermath. The Impact Area Boundary layer was created from remote-sensing imagery and provided by FEMA and the NGA. The Post-Event Imagery layer is an image of the Oso mudslide area taken two days after the event.

  10. Click Save.
  11. For Terms of Use, click Edit, and type None. Click Save.
  12. At the bottom on the side of the page, for Credits (Attribution), click Edit, and type Esri Disaster Response Program, FEMA, NGA, Snohomish County, and Washington Department of Transportation.

    These are the organizations that originally compiled the data.

  13. Click Save.

    The metadata is added to the item details. Your app is now complete.

In this lesson, you took existing imagery layers related to the 2014 Oso mudslide and put them together into a web map in ArcGIS Online. Then you encapsulated the web map into a web app with Web AppBuilder. You customized your app with widgets to tailor the user experience to your specifications. Then you shared the map and gave it metadata. You now have an app that you can show your audience to tell the story of the disaster.

You can find more lessons such as this on the Introduction to Imagery & Remote Sensing page.