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. Sign in to your ArcGIS organizational account.

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

  2. On the ribbon, click Map.

    Map option


    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.

    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.


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


    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. For the Aerial Imagery Oso Slide Area layer, click the Add button.

    Add button for Aerial Imagery Oso Slide Area layer

    The layer is added to the map and the map zooms in to its extent. This layer contains the imagery that was captured immediately 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.

    Because the map you are building will be mostly made of imagery, you also want to choose a basemap based on satellite imagery.

  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. On the Contents toolbar, click Layers. In the Layers pane, click Add layer.
  10. Search ArcGIS Online for Oso Mudslide Impact Area owner:Learn_ArcGIS. Add the Oso Mudslide Impact Area layer.

    The layer is added to the map.

    Oso Mudslide Impact Area added to map

    This layer 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 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 lists all of the layers you have added so far.

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

    Styles option

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

    Style options button

  14. For Symbol style, click the edit button.
  15. In the Symbol style window, turn off Enable fill. Expand Outline and Colors and choose the red color.

    Symbol style settings

  16. Expand Stroke and increase the Width to 5.

    Width option set to 5

  17. In the Style options pane, click Done. Click Done again.

    The map now shows the impact boundary without obscuring the imagery.

    Map showing the impact boundary with a red outline

    Next, you'll 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 option

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

Add a 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. To do so, you'll add a historical imagery layer as a basemap.

  1. On the Contents toolbar, click Basemap. In the Basemap pane, click Current basemap.
  2. Under World Imagery, click Add layer.
  3. Search ArcGIS Online for Oso_2012 owner:Learn_ArcGIS. For the Oso_2012 layer, click the Add button.

    Add button for the Oso_2012 layer

  4. At the top of the Add layer pane, click the back arrow. 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, and shows the Steelhead Drive community before it was destroyed in the mudslide. Some of the imagery is covered by the imagery taken after the landslide.

    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 Postevent imagery layer, click the Hide layer button on and off to compare the pre- and postevent landscape.

    Hide layer button

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

    Area where Steelhead Drive community was located


    Depending on the size of your screen, you may need to zoom in to see the differences between the two layers.

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

  7. If necessary, make the Postevent imagery layer visible.
  8. For the Impact area layer, click the Options button and choose Zoom to.

    The entire impact boundary is displayed in the map extent.

  9. On the Contents toolbar, click Save and open and choose Save as.

    Save on Save and open tool

  10. In the Save map window, enter the following information:
    • For Title, type 2014 Oso Mudslide Imagery and Extent.
    • 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

  11. Click Save map.

Add a sketch layer

Next, you'll add notes to your map to make it easier to understand. You'll add these notes with a sketch layer. 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. Turn off the Postevent imagery layer.
  2. On the Contents toolbar, click Add and choose Sketch.

    Sketch option in the Add menu

    The Sketch pane appears. Additionally, a toolbar appears on the side of the map with options for the geometry of the sketch layer.


    If the New sketch layer window appears, you can close it.

  3. On the map toolbar, click the Line button.

    Line button

    The Sketch pane changes to show symbol options for line features.

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

    Arrow that ends on the right

  5. For Width, type 6.
  6. Click the map in the area where the mudslide started.

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

  7. Double-click the location of the Steelhead Drive community to place the endpoint arrow and complete the line.

    The arrow should give a sense of the mudslide direction.

    Arrow sketch on map


    To modify the arrow, on the map toolbar, click the Select button. Click the line to select it on the map. You can drag a feature's handles to resize or rotate it.

    Next, you'll add a few labels.

  8. On the map toolbar, click the Text button.

    Text button

    The Text pane appears.

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

    Text content changed to Landslide

    The text updates on the map. You'll give the text a halo to make it stand out more against the basemap.

  10. In the Sketch pane, turn on Halo. Under Halo, for Color, type #2b2b2b.

    Halo settings

    The text feature is more visible on the map.

    Text feature on map


    If you need to reposition the text feature, on the map toolbar, click the Select button. Click the text feature to select it. Point to the text feature until your cursor updates to a move feature symbol. Drag the text feature to the desired location.

  11. Similarly, create text features to label the location of the upstream flooding (located toward the east of the impact area) and the Steelhead Drive community. Ensure both text features have a black halo.

    Two additional text features added to map

    The text features you added are labels. Next, you'll add dotted lines to point to the affected communities.

  12. On the map toolbar, click the Line button. On the map, click under the Steelhead Drive community text feature and double-click near the group of houses that make up the center of the community.

    First line added

  13. In the Sketch pane, expand Stroke. For Pattern, choose a dotted line with medium-sized dashes.

    Medium dotted line pattern

  14. For Width, type 4.

    The line's stroke style is updated on the map.

    Line formatted on map

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

  15. Close the Sketch pane.
  16. On the Contents toolbar, click Layers. Turn the Postevent 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, for the Sketch layer, click the Options button and choose Rename. Rename the layer Reference information.
  19. On the Contents toolbar, click Save and choose Save.

    Finally, you'll share the map.

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

    You've 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 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'll use Web AppBuilder to create a custom app.

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

    Content option

    Your Content page appears. This page contains all of your ArcGIS Online content. It includes your 2014 Oso Mudslide Imagery and Extent map, 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 map that you own, you can ensure nobody else will change the map.

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

    Web AppBuilder option

    The Create a web app window appears.

  3. In the Create a web app window, enter the following information:
    • For Title, type Oso Mudslide Before and After.
    • For Tags, type Oso, Washington, and mudslide. Press Enter after typing each tag.
    • For Summary, type Pre- and postevent imagery of the 2014 Oso mudslide.

    Create a web app window

  4. Click OK.

    Web AppBuilder opens with a default map.

    Web AppBuilder default view

    To one side of the map is a pane for configuring 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 layout and style of the app. The layout determines where the functionality widgets will be located in the web app, while the style determines its look.

    The default layout is Foldable Theme. You won't change this layout, but you will change the style.

  5. On the Theme tab, under Style, choose the black 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. 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.

  7. Click Choose web map. In the Choose web map window, for My Content, click your 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.

  8. If necessary, zoom and pan the map until all of the layers are completely visible. On the Map tab, under Set initial extent, click Use current map view.

    Use current map view button

    Next, you'll save your app.

  9. 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, Overview Map, and Search widgets.

    Search, Overview Map, and My Location widgets

    The My Location widget, which is based on a computer's current location, zooms the map to the user's current location. The Overview Map widget shows the map extent in a larger context, but it is not very useful when looking at imagery. The Search widget allows the user to search for and zoom to a specific address. 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.


    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.

    When a widget is turned on, and you point to it, its location is highlighted in red on the web app.

    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. For Unit, confirm that english is chosen.

    Configure Scalebar window

  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.

    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 Postevent Imagery layer so they can compare it with the imagery below.

  10. Click OK.

    The Configure Swipe window appears.

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

    Vertical bar swipe tool

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

    Postevent Imagery selected as the only layer to swipe

  13. Click OK.

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

    Swipe widget in the app

    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.

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

    First empty widget

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

    About widget

    The Configure About window opens.

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

    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.

  17. Highlight the text. For Font, choose Verdana, and for Size, choose medium and

    Font and Size parameters

  18. Click OK.

    The About widget appears at the top of the map next to the Swipe widget. 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.

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

    Measurement widget

    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.

  20. 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).

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

    Set the widgets in this controller option

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

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

    Legend widget with Remove this widget button

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

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.

    Custom option

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

    Alt text for Snohomish County seal

  6. Click OK.

    The logo appears on the app title bar.

    Title bar

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

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

    Add new link button

    A pane appears to enter the link title and URL.

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


    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.

  9. Click OK.

    The Additional Information link appears on the title bar.

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

    The link opens in a new page.

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

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

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

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

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

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

  17. Zoom and pan the map until you can see both the beginning of the landslide and the Steelhead Drive community.
  18. 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.


    If necessary, you can move the Measurement window by dragging its title bar.

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

    Distance button

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

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

    Landslide start


    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.

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

    Landslide middle

    The Measurement window shows the distance between these markers. The distance is about half of a mile.

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

  23. On the Measurement window, click Clear to clear the measurement markers.

    Clear button

    The lines and markers are removed from the map.

  24. Close the Measurement window.

    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 your Content page. 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. In the Share window, choose Everyone (public).
  4. Click Save.

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

  5. Click the title of the Oso Mudslide Before and After web app.

    The details 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 Save.

    Next, you'll add a description.

  9. On the item page, next to Description, click Edit. Copy and paste 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.

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