Skip To Content

Share results with a web app

In the previous lesson, you created a policy map to show priority counties for increased prenatal programs in Colorado. You want to present your policy map to key audiences within your state agency in a way that is clear and easy to understand. To do so, you'll create a web app.

A web app is a customized user interface that enhances your map's appearance, adds (or removes) functionality, and helps you integrate the map with other media. The decision makers who will see your map aren't GIS experts, so a web app that simplifies the user interface and calls attention to the most important details is ideal.

Choose a template

First, you'll share your map and choose a web app template. You'll use the Minimalist template.

  1. If necessary, open your Priority Counties for Prenatal Programs map.
  2. On the ribbon, click Share.

    Share button

  3. For Choose who can view this map, check Everyone.
  4. Click Create a Web App.

    The Create a New Web App window opens. This window contains a sortable list of available web app templates.

  5. In the search bar, type Minimalist. Click the Minimalist template.

    Minimalist web app template

    A pane opens with more information about the template. The description reads that this template has a simple user interface, which is what you want.

  6. Click Create Web App.

    Next, you'll specify some metadata for your web app. The default title and tags are the same as your map and don't need to be changed. However, you do need to add a summary.

  7. For Summary, type This web mapping application presents information on priority counties in Colorado for prenatal programs.
  8. Click Done.

    The web app is created. A configuration pane opens.

    Default web app

Configure the user interface

Next, you'll configure elements of the web app's user interface. You'll change the color scheme to a darker color. Then, you'll remove unneeded functionality and add functionality that will help users understand your map.

  1. On the left pane, click the Theme tab.

    Theme tab

  2. For Color Theme, choose Dark.

    Color Theme, Dark option


    If your organization has its own branding colors, you can check Select custom theme colors. You can also add your organization's logo to the map and a link to your organization's website.

  3. Click the Options tab.

    This tab contains options to choose which user interface elements appear or don't appear on the map. Currently, only the zoom slider and scale bar are checked. The zoom slider is useful for navigation, but the scale bar doesn't add much, since users don't need to measure distances and most will already be familiar with the relative size of Colorado.

  4. Uncheck Scalebar.

    Next, you'll turn on functionality. You'll want to add a side panel that presents textual information about the map. This side panel will include map details (its metadata) and pop-up content. You'll also want to show the legend.

  5. Check Display the side panel when the app loads, Display a legend, Display map details in side panel, and Display popup content in side panel. For Choose the default panel, choose Details.

    Options tab parameters

  6. Below the map, click Save.

    The parameters are applied. A dark side panel is added. By default, the panel shows the Details pane, which will include your map's description when you configure it.

    App with theme and options configured

  7. Click the Legend tab.

    This tab displays your map's legend. It uses the labels you configured when you created the map. These labels are already descriptive, so they won't need to be changed.

  8. Click the Info tab. Click any county on the map.

    The county's pop-up information is displayed in the side panel instead of as a pop-up.

  9. Below the map, click Close.

    Your app's details page opens.

Configure the map details

Your app's side panel displays the description of your web map. To provide meaningful information to your users, you'll configure your map's description.

  1. On the ribbon, click Content.

    Content option on ribbon

    A list of all content in your account appears.

  2. Click the Priority Counties for Prenatal Programs web map.

    Priority Counties for Prenatal Programs web map title

    The details page opens for the web map. It looks similar to the details page for the app. The page already contains a title and summary, but it needs a description.

  3. Click Add an in-depth description of the item. Type (or copy and paste) the following description:

    Low birth weight is a public health concern. Babies born at low birth weight are at higher risk of infection, developmental delays, and even death.

    The Center for Disease Control and Prevention (CDC) has set a goal that by 2020, no more than 7.8 percent of all births should have a birth weight of under 5.5 lbs. or 2,500 grams (the cutoff for low birth weight). The national prevalence was 8.2 percent in 2016, but the State of Colorado's was 9.0 percent.

    This map identifies four sets of counties:

  4. Press Enter twice to add a new line of text. Click the Bullet List button and add the following bulleted list:
    • Counties in most need of programs.
    • Counties with room for improvement.
    • Counties that could benefit from a small amount of intervention.
    • Counties that have already met the CDC's 2020 goal.
  5. Highlight all text and change the font size to medium.

    Medium font size

  6. Highlight the bullet list and click the Bold button. Click Save.

    The description is added. This description will appear in the Details pane of your web app.

Reconfigure pop-ups

The pop-up you originally configured worked well for your web map, but you could add more information to increase clarity and explicitly indicate areas where policy should be implemented. You'll add another Arcade expression to your pop-up in the web map.

  1. In the upper right corner of the details page, click Open in Map Viewer.

    The map opens.

  2. Open the Configure Pop-up pane for the County Health Rankings 2018 layer. Under Attribute Expressions, click Add.

    A window opens for a new Arcade expression. This expression will classify the counties based on how their symbols are classified and add unique text for each classification.

  3. Change the name of the expression from Custom to Classify Counties.

    Like the previous pop-up expression, this expression will be a when expression. This time, the condition will be a specified range of low birth weight percentages and the outcome will be text that suggests the viability of policy action for that range.

  4. For Expression, type (or copy and paste) the following expression:
    when($feature["Percent_Low_Birthweight"]>14, "Programs here could really decrease our state's average.",
    9<$feature["Percent_Low_Birthweight"] && $feature["Percent_Low_Birthweight"]<=14, "Programs here should be considered if resources allow.",
    7.8<$feature["Percent_Low_Birthweight"] && $feature["Percent_Low_Birthweight"]<=9, "Programs here could move this county from above the goal to meeting the goal.",
    $feature["Percent_Low_Birthweight"]<7.8, "Programs here are less necessary than in other counties.",
    "Need for programs cannot be determined."

    The four ranges in this equation (less than 7.8, 7.8 to 9, 9 to 14, and more than 14) match the ranges you used to style the counties. The fifth line of the equation indicates the text that will be displayed if there is no data for a county.

  5. Click OK.

    Next, you'll add the expression to your pop-up.

  6. In the Configure Pop-up pane, for Pop-up Contents, click Configure.
  7. In the Custom Attribute Display window, at the end of the existing text, press Enter twice. Click the Add field name button and choose the Classify Counties field (at the end of the list).

    Classify Counties field

    Because this information is especially important, you'll make sure it stands out.

  8. Highlight the expression you added. Apply bold formatting to it and change its font size to medium.
  9. Click OK. In the Configure Pop-up pane, click OK. Click any county on the map to test the pop-up.

    Final pop-up

    The text looks big in the pop-up. However, in your web app the text will be displayed in a side panel, where the medium-sized text will appear more natural.

  10. Close the pop-up.

    When you first looked at the layer's fields, there were a few other fields about low birth weight. These fields showed the percentage of low-weight births by the race of the mother. This information may provide context and help state administrators better incorporate community programming plans.

    The racial breakdown is not available for every race group for every county. You'll create copies of the expression you created to deal with null values and use them as the base for the race group expressions.

  11. Reopen the Configure Pop-up pane for the County Health Rankings 2018 layer. Under Attribute Expressions, click Add.
  12. Rename the new expression Null Values Exception for Black Low Birth Weights. Click the Existing tab and click the Null Values Exception expression.

    Null Values Exception expression on the Existing tab

    The existing Null Values Exception expression is added to the Expression box.

  13. Modify the expression so that both instances of Percent_Low_Birthweight are changed to Percent_Low_Birthweight__Black_.

    The modified expression reads as follows:

    when($feature["Percent_Low_Birthweight__Black_"] == null, "not available",$feature["Percent_Low_Birthweight__Black_"] + " percent")
  14. Click OK.
  15. Create a Null Values Exception for Hispanic Low Birth Weights expression using the following expression:
    when($feature["Percent_Low_Birthweight__Hispan"] == null, "not available",$feature["Percent_Low_Birthweight__Hispan"] + "percent")
  16. Create a Null Values Exception for White Low Birth Weights expression using the following expression:
    when($feature["Percent_Low_Birthweight__White_"] == null, "not available",$feature["Percent_Low_Birthweight__White_"] + " percent")

    You now have five expressions total.

  17. In the Configure Pop-up pane, for Pop-up Contents, click Configure. At the end of the existing text, press Enter twice and add the following text:

    Breakdown by Race of Mother:

    Black: {expression/expr2}

    Hispanic: {expression/expr3}

    White: {expression/expr4}

    This information is only for context, so you won't display it as prominently as the previous text.

  18. Highlight the text you added. Change its font size to small and remove any bold formatting.
  19. Click OK. In the Configure Pop-up pane, click OK. Click any county to test its pop-up.

    Completed pop-up with all expressions

  20. Close the pop-up and save the map.

    Once the map is saved, the changes are also applied to the web app.

Test the web app

Last, you'll open the web app and test its functionality.

  1. Next to the name of the map, click Home and choose Content.

    Content option in Home menu

  2. For the Priority Counties for Prenatal Programs web mapping application, click the options button and choose View Application.

    The application opens in a new tab. The Details pane contains the description you previously added.

  3. Click the Info tab. Click any county on the map.

    The pop-up content appears in the pane, instead of as a pop-up. The formatting you used for the pop-up looks more natural in the side pane, with the most important information emphasized.

  4. Close the web app to return to your content. Click the title of the Priority Counties for Prenatal Programs web mapping application.

    The app's details page opens. At the bottom of the page, under URL, a shareable link is available. You can copy and paste this link to show your app to decision makers or whoever else needs to see it.

In this lesson, you found public data, styled it meaningfully, and configured informative pop-ups to create a policy map about low birth weight in Colorado. You then created a web app that provided a detailed description and streamlined the user experience for decision makers.

This workflow could be replicated for many different geographies and with many types of demographic data, not just low birth weight. Which area of the world is relevant to you? What problems do you think a policy map might help fix? Try exploring the Living Atlas for the necessary data and start mapping.

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