Skip To Content

Create an app with Web AppBuilder

In this lesson, you'll take a web map showing the extent and imagery of the Oso mudslide and use it to configure a web app with Web AppBuilder for ArcGIS. Web AppBuilder lets you customize your web map with widgets that provide additional functionality. Widgets can range from address locators to geoprocessing functions. By choosing only widgets that provide the functionality you want your app to have, you'll tailor the user experience to best convey your map's information.

Explore the map

Before you start building your app, you'll open the web map and familiarize yourself with the data.

  1. Go to the ArcGIS Online group Oso Mudslide - Before and After. When prompted, 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.

    The group contains one item: a web map titled 2014 Oso Mudslide Imagery and Extent by Learn_ArcGIS.

  2. Click the thumbnail to open the map.

    Group item thumbnail

    The map shows the location of the mudslide: a rural area in Snohomish County, Washington (north of Seattle). It outlines the impact area of the slide (the slide itself and the flooding it caused by damming the nearby Stillaguamish River) and includes reference information about where the slide began and which direction it moved.

    Mudslide map

  3. On the pane to the left of the map, click the Content button.

    Contents pane

    The map has four layers, one of which is the Imagery basemap. This basemap shows satellite imagery of the entire world and serves as a backdrop for the other layers. The Post-Event Imagery layer shows how the area looked after the disaster. Unlike the basemap, it only covers the area of interest.

  4. In the Contents pane, point to the Post-Event Imagery layer. Click the More Options button and choose Zoom to.

    Zoom to

    The map zooms to the layer, allowing you to see it in more detail. 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.

    Post-Event Imagery

  5. In the Contents pane, uncheck the Post-Event Imagery layer.

    Uncheck layer

    The layer is turned off, allowing you to see the basemap. The Imagery basemap has been updated since the 2014 Oso mudslide, so at this map scale, the imagery no longer shows how the area looked before the disaster. To see the pre-event imagery, you'll need to zoom in.

  6. Click the Zoom In button two times to zoom in two levels. (Depending on the size of your screen, you may need to zoom in more.)

    Steelhead Drive

    The pre-event imagery shows the Steelhead Drive community before it was destroyed in the slide.

  7. In the Contents pane, check the Post-Event Imagery layer to turn it back on.

    Comparing the pre- and postevent imagery tells a compelling story about the devastation the slide caused, although a side-by-side comparison would be more convenient than switching the layer on and off.

    Now that you've explored the map, you'll save your own copy to use for the app.

  8. Zoom to the extent of the Post-Event Imagery layer again.
  9. On the ribbon above the map, click Save and choose Save As.

    Save As

  10. In the Save Map window, change the title to 2014 Oso Mudslide Imagery and Extent. Keep the tags and summary the same and click Save Map.

    A copy of the map is saved to My Content.

Create a new app

You want to present the map's information in the best way possible while allowing your users to easily compare the pre- and postevent imagery. To do that, you'll configure an app. An app takes a web map and adds (or removes) 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. You'll do the latter.

  1. Click the Home menu and choose Content.

    Home menu

    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. Above the list of items, click Create, point to App, and choose Using the Web AppBuilder.

    Create App Using the Web AppBuilder

    The Create a web app window opens.

  3. For the title, type Oso Mudslide Before and After. Add tags describing the geography and content of the map, such as Oso, Washington, and mudslide. For the summary, type Pre- and post-event imagery of the 2014 Oso mudslide.
  4. Click OK to open Web AppBuilder.

    Web AppBuilder

    Web AppBuilder opens with a default map. To the left 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 reflect the severity of the disaster. You'll leave the layout, which changes where widgets are accessed, as the default.

  6. Click the 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, 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's zoomed 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. Zoom and pan the map until all of the layers are completely visible.

    Full extent

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

    Set initial extent

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 widget and the Search widget.

    Search 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 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. 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 Overview Map widget is located in the lower right of the map and shows the map extent in a larger context. 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 Web AppBuilder for ArcGIS documentation.

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

    Coordinate and Scalebar widgets

    The Scalebar widget is difficult to see. 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 opens.

  6. For Style, choose the ruler style.

    Configure Scalebar

    Note:

    You can also use this window to change the unit type. If your audience is international, consider changing it to metric or dual.

  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 app, which allows users to easily compare two layers.

  8. Click the first empty widget.

    First widget

    The Choose Widget window opens, showing additional widgets.

  9. Click the Swipe widget.

    Swipe widget

  10. Click OK.

    The Configure Swipe window opens.

  11. For Choose a style for the swipe tool, confirm that Vertical bar is selected.

    Choose a style for the swipe tool

  12. For Choose which layers to swipe, choose Post-Event Imagery, the layer you want users to swipe.

    Post-Event Imagery selected as default layer to swipe

  13. Click OK.

    Faded swipe widget

    The widget is added to the upper left corner of the map. 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.

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

    The Configure About window opens.

  16. In the large text box, delete the default globe icon and type 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 and change the size to large.

    Font size

  18. Click OK.

    The About widget appears in the upper left 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.

  19. 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 are free to change them if you want.

  20. In the Configure Measurement window, click OK.

    The Measurement widget appears next to the About widget at the upper left 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. On 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: the Legend and the Layer List. You can find them on the right side of the title bar. The Layer List shows all of the layers on the map and gives the user the ability to turn them on and off. The Legend shows the symbology for each layer. Since most of your layers are imagery, they don't have symbology. The Legend 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 circled

  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 (next to the title and subtitle) and click Custom.
  4. In the Set logo window, click Upload and browse to your saved image of the Snohomish County seal. Click OK.

    Snohomish County logo

    The logo also appears on the app.

    Title bar

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

  5. On the Attribute tab, under Links, click Add New Link.

    Add New Link

  6. For the link title, type Additional Information. For the URL, paste the following URL:

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

    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.

  7. Click OK.
  8. On the title bar, to the right of the title, click the Additional Information link.

    The link opens in a new page.

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

    Save

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

  11. To the left of the Saved button, click Launch.

    Finished app

    The app opens. You'll first test the Swipe widget.

  12. Zoom to the Steelhead Drive community. In the upper left of the map, click the Swipe widget.

    Swipe tool

    The widget defaults to Post-Event Imagery, the layer you want to swipe.

    Swipe layer

    A vertical slider bar appears on the map. To the left of the slider, the Post-Event Imagery layer is shown, while to the right, the layer is hidden.

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

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

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

    Landslide distance

  16. In the upper left of the map, click the Measurement widget.

    Measurement widget

    The Measurement window opens. It gives you the option to measure 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:

    You can move the Measurement window by dragging its title bar.

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

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

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

    Landslide middle

    The Measurement window gives the distance between these markers. The distance should be between 0.3 and 0.4 miles. However, this is only about halfway to the community. You can continue to add line segments to the measurement by clicking more locations on the map. The measurement ends when you double-click the map.

  20. Double-click the area near 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.

  21. Close the Measurement window.

    The lines and markers are removed from the map. You've now tested some of the widgets in your app. Feel free to 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. In the app editor, which is still open, 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'll share them now before changing the app's metadata.

  2. Check the 2014 Oso Mudslide Imagery and Extent map and the Oso Mudslide Before and After app.

  3. Above the list of items, click Share. Share the items either with everyone, your organization, or a specific group, depending on who you want to be able to see the app.
  4. Click OK.

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

  5. Click the ellipsis next to the Oso Mudslide Before and After web app and choose View item details.

    View item details

    The item page opens. You 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 Upload Thumbnail window, click Choose File.
  8. Browse to the file to use as the thumbnail and double-click it. In the Upload Thumbnail window, click OK.

    Next, you'll add a description.

  9. Next to Description, click Edit, and 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. 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 an existing web map showing imagery of the 2014 Oso mudslide and used it to create 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 others to tell the story of the disaster.

For more lessons about creating web apps to tell a story, try Homeless in the Badlands or Get Started with Story Maps.