Skip To Content

Create an app

In the previous lesson, you created and configured a web map with base reference data and editable incident data. This map could be used for a SAR mission in Yosemite National Park. However, while the web map viewer is ideal for authoring maps, it lacks specific tools and functionality necessary for SAR teams during an incident. Additionally, the map will be used by people who aren't GIS professionals, which means it needs a user-friendly interface.

In this lesson, you'll use your web map to create a web app. Web apps provide preconfigured and ready-to-use GIS tools that can be accessed by the click of a button. Your web app will be based on the Situational Awareness Viewer web app configuration.

Choose the theme

Although there are a variety of web app templates, the web app you'll create requires a large amount of customization to meet the specific needs of SAR personnel. You'll use Web AppBuilder for ArcGIS, which allows you to add customizable tools (called widgets) to your exact specifications.

  1. If necessary, sign in and open your Yosemite Search and Rescue web map.
  2. On the ribbon, click Share. In the Share window, click Create a Web App.

    The Create a New Web App window appears. This window contains options for how the web app will be created.

  3. Click the Web AppBuilder tab.

    Web AppBuilder tab

  4. For Title, type MapSAR Situational Awareness Viewer. For Summary, type This web app contains layers and tools to assist a search and rescue operation in Yosemite National Park.
  5. Confirm that Share this app in the same way as the map is checked and click Get Started.

    Web AppBuilder opens, showing your default web app.

    Default web app

    Before you configure any widgets, you'll change the theme. A theme is a template framework that determines the look and organization of an app. You'll use the Foldable Theme, which works well on a variety of screen sizes, including tablets and mobile devices, and which will be useful for SAR personnel accessing the app from the field.

  6. In the configuration pane (the pane to the left of the map), confirm that the Theme tab is active. Click Foldable Theme.

    Foldable Theme

    You can also change the style, or color palette, of the app. The color doesn't change how the map functions, so you can change it to whatever color you like.

  7. Optionally, under Style, choose a color you like or enter a hexadecimal code. (The example images will use the default gray color.)
  8. At the bottom of the configuration pane, click Save.

    Save button

Configure default widgets

Next, you'll configure some of the widgets the SAR teams will use. Web AppBuilder contains many widgets with parameters for configuration and customization. In general, there are two types of widgets: off-panel and in-panel.

Off-panel widgets are those that are provided with the theme you selected. They automatically appear on your map and contain basic functionality that is usually also available on a web map. They can be configured or hidden, but not removed. You'll configure the default off-panel widgets to suit the needs of SAR personnel.

  1. In the configuration pane, click the Widget tab.

    Widget tab

    The Widget tab lists the available widgets, with options to add more. The first widget listed is the Attribute Table widget, which displays a table of layer attributes at the bottom of your web app. The table can be opened, resized, or closed. The widget also provides options to export or filter the table, which is useful for SAR teams who want to convert the data to different file types.

  2. Point to the Attribute Table widget and click Configure this widget.

    Configure this widget button

    The Configure Attribute Table window appears. First, you'll choose the layers for which the table will display data. SAR teams will often need attribute information about the editable incident layers. The base reference layers will not provide as much useful information, so they should be hidden in the table.

  3. For Show, check and uncheck layers so that only the following layers are checked:
    • Initial Planning Point (and subject information)
    • SAR Team
    • Reporting Party
    • Found or Suspension
    • Clue Points
    • Cellphone Pings
    • Assets
    • Routes
    • Search Area Other
    • Search Area Statistical
    • Search Area Theoretical
    • Assignment Status
    • Search Planning Areas

    You'll also set the sort field for each of these layers. The sort field determines the attribute field by which each layer will be sorted by default. For most of these layers, the most relevant attribute field is type, status, or ID.

  4. For Sort field, choose the following sort fields:
    • For Initial Planning Point (and subject information), choose Initial Planning Point (IPP) Type.
    • For SAR Team, choose Team Status.
    • For Reporting Party, choose Name.
    • For Found or Suspension, choose Found/Suspension.
    • For Clue Points, choose Relevancy.
    • For Cellphone Pings, choose Ping Date, Time.
    • For Assets, choose Asset Type.
    • For Routes, choose Route Status.
    • For Search Area Other, choose Incident ID.
    • For Search Area Statistical, choose Incident ID.
    • For Search Area Theoretical, choose Incident ID.
    • For Assignment Status, choose Assignment Status.
    • For Search Planning Areas, choose Search Status.
  5. Check Allow exporting to CSV.

    Allow exporting to CSV option

  6. Click OK.

    Next, you'll configure the Coordinate widget, which displays geographic coordinate values on the map. The only thing you'll change about this widget is the units the coordinates are shown in. You'll change the default coordinate notation to United States National Grid (USNG), the standard coordinate format for SAR in the United States.

  7. Point to the Coordinate widget and click Configure this widget.
  8. In the Configure Coordinate window, for Actions, point to the default coordinate system and click the Edit button.

    Edit button

    The Edit coordinate system window appears.

  9. For Display units, choose USNG.

    USNG display units

  10. Click OK. In the Configure Coordinate window, click OK.

    The next widget in the list, the Extent Navigate widget, is not currently enabled. This widget allows users to navigate the map to its previous extent, a useful tool for zooming and panning back and forth between areas. You'll enable this widget.

  11. Point to the Extent Navigate widget and click Show this widget.

    Show this widget button

    The other off-panel widgets that are not enabled are the Full Screen widget, which provides functionality for displaying the map in full screen, and the Splash widget, which adds a customizable splash screen to the app. Neither of these widgets is particularly useful for your app, so you will not enable them. Many of the other widgets are relatively simple and do not need to be configured.

    The last off-panel widget you'll configure is the Search widget. With this widget, users can find locations by address or coordinates. You'll enable the ability to search by place-names (contained in one of the layers on the map), which is useful in the wilderness where there may not be any addresses.

  12. Point to the Search widget and click Configure this widget.

    The Configure Search window appears. First, you'll limit the search to only locations in the United States.

  13. For Country or region code(s), type USA.

    Country or region code option

  14. Point to Add search source and choose Feature layer.

    Add search source

  15. In the Set layer source window, scroll through the list of layers and click Placenames. Click OK.

    You also need to configure which of the layer's attributes will be used in the search.

  16. Next to Search fields, click the edit button.

    Search fields

  17. In the Set search fields window, check Name and click OK.

    You'll also add the ability to search for camps and campgrounds.

  18. Point to Add search source and choose Feature layer. In the Set layer source window, scroll through the list of layers, click Campgrounds, and click OK.
  19. Next to Search fields, click the edit button. In the Set search fields window, check Name and click OK.
  20. Repeat the process to add a search source for Trailheads and High Sierra Camps. Set Name as the search field for each search source.

    List of search sources

  21. Click OK. Save the app.

Add the basemap gallery

In-panel widgets are widgets that appear in the controller, an element of the web app's layout. In the Foldable theme, the widgets in the controller appear in the upper right corner of the app. These widgets have a wider range of uses and functionality beyond navigating the map. By default, the Legend and Layer List widgets are already added.

First, you'll add the Basemap Gallery widget. With this widget, users can change the basemap. SAR personnel may want to change the basemap to Imagery to better see vegetation and land cover or to OpenStreetMap to see where volunteers have added details to maps.

  1. In the configuration pane, on the Widget tab, click Set the widgets in this controller.

    Set the widgets in this controller option

  2. Click the Click here to add widget button.

    Click here to add widget button

  3. In the Choose Widget window, click Basemap Gallery (the widgets are arranged alphabetically) and click OK.

    The Configure Basemap Gallery window appears. You can use the organization's default basemap gallery or configure a custom basemap. The default collection of basemaps is useful, but you'll add to it the USA Topo Maps basemap that is often used by SAR personnel.

  4. Click Configure custom basemaps and click Import.

    Import button

  5. In the Import basemaps window, confirm that Esri default is selected. Click each of the basemaps to select them and click OK.

    Your custom basemap gallery contains all the default Esri basemaps, including Imagery and OpenStreetMap. Next, you'll add a new basemap.

  6. In the Configure Basemap Gallery window, click Create new.
  7. In the Create new window, for Title, type USA Topo Maps.

    Next, you'll add a thumbnail.

  8. Save the USA Topo Maps thumbnail to a location on your computer.
  9. For Thumbnail, click the default thumbnail. Browse to and double-click the thumbnail you saved.

    The Crop Image window appears. This window crops the thumbnail to the correct dimensions.

  10. Click OK.
  11. For URL, copy and paste the following URL:

    https://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer

    Parameters to create new basemap

  12. Click OK.

    The new basemap is added to your custom basemap gallery.

  13. In the Configure Basemap Gallery window, click OK.

    The widget is added to the controller.

Add in-panel widgets

Next, you'll add several basic in-panel widgets that provide functionality available to most web maps. First, you'll add the Bookmark widget, so users can navigate to the web map's bookmarks.

  1. In the configuration pane, on the Widget tab, click the Click here to add widget button. In the Choose Widget window, click the Bookmark widget and click OK.

    Bookmark widget

    The Configure Bookmark window appears. The bookmarks are displayed by default as cards, but displaying them as a list is better for mobile devices.

  2. Under Display bookmarks as, check the box for List. Uncheck Cards.

    Display bookmarks as a list

  3. Uncheck Display custom bookmarks.

    Display custom bookmarks parameters

  4. Click OK.

    Next, you'll add the Share widget. This widget allows users to share the app via email or by embedding it in a website. It also allows users to share the app with a particular extent, which is useful for SAR teams when they need to communicate new information quickly.

  5. In the configuration pane, click the Click here to add widget button. In the Choose Widget window, click the Share widget and click OK.

    Share widget

    The Configure Share window appears. The widget also provides options for sharing the app on social media. For SAR teams, this functionality isn't useful, so you'll remove it.

  6. For Choose sharing options, uncheck Facebook, Twitter, and Google+.

    Choose sharing options

  7. Click OK.

    Next, you'll add the Measurement widget. This widget allows users to measure distances and areas. The size of an area or the distance between two points is critical for estimating how far a missing person may have traveled in a given time. Although you previously configured some of your layers to measure feature area and length automatically, adding this widget will allow users to measure anything on the map.

  8. In the configuration pane, click the Click here to add widget button. In the Choose Widget window, click the Measurement widget and click OK.

    Measurement widget

  9. In the Configure Measurement window, change Default area unit to Sq kilometers. Change Default length unit to Kilometers.

    Measurement widget options

  10. Click OK.

    Next, you'll add the About widget. This widget provides a textual description of the app.

  11. In the configuration pane, click the Click here to add widget button. In the Choose Widget window, click the About widget and click OK.

    About widget

    The Configure About window appears. The only option for configuration is to type the text to display in the widget. For the purposes of this exercise, you'll be provided example text, but feel free to add to or adjust the text in any way you see fit.

  12. Erase the existing text and image. Copy and paste the following text:

    The objective of a MapSAR web mapping application is to provide technical mapping tools during the different phases of a Search and Rescue (SAR) incident.

    This application has been configured specifically for SAR incidents in Yosemite National Park.

    Note:

    Ensure that you paste the text as plain text to avoid including any unwanted formatting.

  13. Highlight the first paragraph and click the Italic button. Highlight the second paragraph and click the Bold button.
  14. Click OK.

    You'll set the About widget to open automatically when the app starts. This way, users will know the app's purpose as soon as they begin using it.

  15. In the configuration pane, point to the About widget and click the Do not open this widget when the app starts button.

    Do not open this widget when the app starts button

    The button changes color, indicating that the widget will be opened when the app starts.

    Next, you'll add the Add Data widget. This widget will enable users to add data to the map by searching for layers, uploading local files, or entering the URLs of feature services. Your app has a large number of layers, but at times SAR teams may need to add new layers to reflect information relevant to a specific SAR incident. Without this widget, SAR teams would need to add data to the original web map to add it to the app.

  16. Click the Click here to add widget button. In the Choose Widget window, click the Add Data widget and click OK.

    Add Data widget

    The Configure Add Data window appears. By default, users can add data from their content, their organization, ArcGIS Online in general, or curated content. When users search for curated content, they only receive results from a specific group of your choosing.

    You'll create a curated filter for the Resource: All-Hazards Core Information Needs Group. This group is hosted by the National Alliance for Public Safety GIS (NAPSG) organization and includes layers relevant to hazards in the United States. The group contains many countrywide layers that may be relevant to SAR operations.

    To add a group, you only need the group ID, which is included in the group's URL.

  17. Next to Allow Curated, for Optional label, type All-Hazards Core Info. For Curated filter, type group:1be96fe19d9d48ed91a2f26126002bbe.

    You'll make this group the default filter when searching for data.

  18. Point to Allow Curated and click Make default.

    Make default for curated group

  19. Click OK. Save the app.

Add off-panel widgets

Previously, you configured some of the default off-panel widgets. Next, you'll add and configure new off-panel widgets that will appear under the search box on the app.

First, you'll add the Grid Overlay widget. This widget renders a United States Military Grid Reference System (MGRS) on the map. MGRS is a standard coordinate system often used by SAR teams. It is also interchangeable with the United States National Grid (USNG) system used by SAR teams.

  1. In the configuration pane, click the Widgets button.

    Widgets button

    The pane returns to the list of off-panel widgets. At the end of the list are five spaces for new widgets to be added. These spaces correspond to the spaces under the search box on the map.

  2. Click the first empty widget.

    First empty widget

    The Choose Widget window appears. You can choose from the same gallery of widgets as when you added in-panel widgets.

  3. Click the Grid Overlay widget and click OK.

    Grid Overlay widget

    The Configure Grid Overlay window appears. You can change the size, color, and opacity of gridlines, but the default configuration is fine.

  4. Click OK.

    Next, you'll add the Coordinate Conversion widget. While SAR teams on the ground use the USNG coordinate system, aerial operations often use degree decimal minutes and older maps tend to use universal transverse Mercator (UTM). This widget will convert coordinate systems between these formats to help teams work together.

  5. In the configuration pane, click the next empty widget (labeled with the number 1). In the Choose Widget window, click the Coordinate Conversion widget and click OK.

    Coordinate Conversion widget

    The Configure Coordinate Conversion window appears. You can change the zoom scale and the coordinate systems available for conversion. The zoom scale refers to the scale used by the widget's zoom button when zooming to a set of coordinates. You'll make the scale larger so that users can see the point of interest with more detail and remove coordinate systems that aren't used by SAR teams.

  6. Change Zoom Scale to 1 : 24000.
  7. In the list of coordinate systems, uncheck GARS, GEOREF, and UTM (H).

    Coordinate Conversion widget parameters

  8. Click OK.

    Next, you'll add the Print widget. This widget gives users the ability to print the map. While your web app can be used with many mobile devices, SAR teams still frequently use printed maps.

  9. In the configuration pane, click the next empty widget (labeled with the number 1). In the Choose Widget window, click the Print widget and click OK.

    Print widget

    The Configure Print window appears. When printing a map, users have the option to add a title and author. You'll add a default title and author that explain to users what information they should provide for these parameters.

  10. For Default title, delete the text and type Enter Incident ID here. For Default author, delete the text and type Enter Team Name here.

    Because these maps are intended only for private use, you'll remove the ability to edit copyright information. You'll also change the default layout to a landscape format.

  11. Uncheck Editable. For Default layout, choose A4 Landscape.

    Parameters for the Print widget

  12. Click OK. Save the app.

Add the Situation Awareness widget

The last two widgets you'll add have more advanced configuration options and are more directly applicable to SAR teams. The Situation Awareness widget analyzes information from multiple feature layers within a specified distance of an incident. SAR teams can use this widget to plot the Initial Planning Point (IPP) and create buffers to represent statistical search areas.

A statistical search area consists of a series of concentric rings originating from the IPP. The sizes of these rings are based on the typical behavior of missing persons. The International Search and Rescue Incident Database (ISRID) compiles statistics based on the outcomes and behavioral profiles of more than 50,000 missing persons cases. Based on these statistics, ISRID then creates tables showing the likelihood of a missing person moving a certain distance from the IPP. For instance, 25 percent of cases move less than 1.4 kilometers from the IPP, while 95 percent of cases move less than 5.8 kilometers. Statistical search areas are based on these distances and inform SAR personnel of the likelihood of finding a missing person in a certain area.

SAR teams often plot these areas by hand, but the Situation Awareness widget will generate them automatically.

  1. In the configuration pane, click the next empty widget (labeled with the number 1). In the Choose Widget window, click the Situation Awareness widget and click OK.

    Situation Awareness widget

    The Configure Situation Awareness window appears. First, you'll add tabs to display summarized information about features in certain layers close to the chosen IPP.

  2. Click Add tab. For Layer, choose Trailheads, and for Analysis Type, choose Summary.
    Note:

    When you set Analysis Type, you may receive an error message stating that there are no valid fields in the pop-up. You can ignore this message, as you'll edit the pop-up settings in a later step.

    Tab for Trailheads layer with summary analysis type

    For trailheads, you only want to summarize the number of trailheads that are near the IPP. You'll remove any other attribute fields that might be summarized.

  3. Point to the empty space under Actions and click the Edit button.

    Edit button for new tab

    The Select Fields: Trailheads window appears. By default, two fields are selected to be summarized: Id and Quota.

    Note:

    If you received an error message for Analysis Type, there may be no fields selected to be summarized. This means you can skip the following step, which removes any selected fields.

  4. If necessary, for each field, point to the empty space under Actions and click the Delete button. (If you do not see any listed fields, you can ignore this step.)

    Delete button

  5. Check Display feature count.

    Display feature count option

    Now, the number of trailheads near the IPP will be displayed when users access the Trailheads tab.

  6. Click OK.
  7. Repeat the process to add tabs for the following layers (making sure that Analysis Type is Summary, all fields are removed, and Display feature count is checked):
    • Campgrounds
    • High Sierra Camps
    • Reporting Party
    • Cellphone Pings
    • Assets
    • Routes
    • Assignment Status
    Note:

    For some layers, you may receive an error symbol around the analysis type. This error indicates that there are no attribute fields that can be summarized using that analysis type. The error should go away after you remove all attribute fields for the tab and check Display feature count.

    For some layers, it will be useful to group features by a certain attribute. You'll add a tab for the Watershed Boundary Dataset layer and group features by name so that boundaries belonging to the same watershed are summarized together.

  8. Add a tab for the Watershed Boundary Dataset: HUC 12s layer. For Analysis type, choose Grouped Counts, and for Label, type Watershed Boundaries.
  9. For the Watershed Boundaries tab, point to the empty area under Actions and click Edit.
  10. In the Select Fields window, for Group by Field, choose Name. Check Display feature count.

    Group by Field option

  11. Click OK.
  12. Add tabs with an Analysis Type of Grouped Counts for the following layers (remember to check Display feature count for each):
    • For PSAP 911 Service Area Boundaries, group by Name.
    • For SAR Team, group by Team Status.
    • For Clue Points, group by Relevancy.

    You have configured 12 tabs.

    Final list of tabs

    You can also configure several general settings related to the buffers users can create around the IPP. You'll change the units to kilometers to match other widgets in your app and make sure the buffers are geodesic.

  13. Under General Settings, for Distance units, choose Kilometers. Check Draw geodesic shapes.

    Distance units and geodesic shapes settings

    Next, you'll configure some additional capabilities so users can save and export the data they create using the widget.

  14. Scroll to the top of the list of tabs. Above the list, click Output.
  15. Check Enable Save. Check Save points, Save lines, and Save polygons.

    You can choose the layers to which points, lines, and polygons will be saved. For instance, when users create a point using the widget, you can set it so that they can save that point to the Initial Planning Point layer.

  16. For Save points, choose Initial Planning Point. For Save lines, choose Routes. For Save polygons, choose Search Area Statistical.

    Enable save option

    You'll also enable the option for users to create a snapshot of the widget at a specific moment.

    Note:

    To create a snapshot, a user's account must have permission to create, update, and delete. The user must also have permission to publish hosted feature layers.

  17. Check Enable snapshot.

    The option Export all fields is checked by default. This option enables users to export spreadsheets for selected features. You'll also enable users to create a report based on summarized information from the tabs you configured.

  18. Under Report Settings, check Enable report.
  19. Click OK. In the configuration pane, point to the Situation Awareness widget and click Do not open this widget when the app starts.
  20. Save the app.

Add the Smart Editor widget

The incident data layers you added to your web map are editable. To enable SAR teams to plot incident assets or other developing information using the web app, you'll add the Smart Editor widget. This widget provides feature editing options for editable layers.

  1. In the configuration pane, click the final empty widget (labeled with the number 1). In the Choose Widget window, click the Smart Editor widget and click OK.

    Smart Editor widget

    The Configure Smart Editor window appears. First, you'll enable the option to delete features in all layers.

  2. On the Layer Settings tab, check Allow Delete to enable deletion for all layers.

    Allow Delete option for all layers

    Next, you'll adjust some general settings. First, you'll make sure feature editing uses a template filter.

  3. Click the General Settings tab. Under Feature Template and Filter value Settings, check Use feature template filter.

    Use feature template filter option

    Next, you'll change settings for saving. Some of these changes will only adjust the user interface, while others will ensure users save their edits and don't accidentally delete important features.

  4. Under Save Settings, for Position of Save, Delete, Back and Clear Selection buttons, click Above Edit Form.
  5. Check Prompt to save unsaved edits when form is closed or switched to the next record, Require confirmation when deleting a record, and Remove feature from selection on save.

    Save Settings configured

    You'll also change settings for editing geometry.

  6. Under Geometry Settings, check Enable geometry edit by default and Enable moving of selected point feature to XY location.

    Geometry Settings configured

    Next, you'll add some text to be displayed on the editing panel. You'll include some basic instructions to help users.

  7. For Provide display text for the edit panel, replace the existing text with the following text:

    1. Select or search for a template to create a new point, line, or area.

    2. Click the map to begin drawing.

    3. Enter related information in the provided pop-up window.

    4. When finished, click Save.

  8. Click OK.

    The Smart Editor widget is configured.

  9. Save the app.

Provide attribute information

You've finished configuring widgets. Next, you'll configure some basic attribute information for your app.

  1. In the configuration pane, click the Attribute tab.

    Attribute tab

    You can change the map's title, subtitle, and logo. You can also add a link to a website. Some SAR teams may want to use an organizational logo, but for your purposes, the logo isn't necessary.

  2. Point to the default logo and click the Remove button.

    Remove button

  3. Change the subtitle to Yosemite National Park.

    Title and subtitle

  4. Save the app.

    Your app is finished. Next, you'll open it.

  5. At the bottom of the configuration pane, click Launch.

    Launch button

    The app opens in a new browser tab.

    Final app

In this lesson, you created and configured an app to help SAR teams in Yosemite National Park. Your app includes many widgets to edit and analyze features on the map. SAR teams can use it to search for locations, add an IPP, create a statistical search area, generate search assignments, convert coordinates, and print maps.

In the next lesson, you'll test your web app. You'll learn how to use the widgets you configured to respond to search operations and archive data.