Overview

You will learn: how to style pop-ups to show information about layer in a web map.

The Map Viewer can easily style pop-ups for each layer. You can change fields, format data, add or remove information, or add charts, images or url links. These settings are stored with the saved map and is accessible by any clients' apps that reference the map.

In this lab you will style the pop-up to show the most relevant data fields and values when users click on features.

Steps

Explore data

  1. Go to ArcGIS Online and sign in.

  2. Open the starter map and click Save > Save As to save your own copy.

  3. Click on the Trailheads, Trails and Parks and Open Space features and take note of the numerous fields available. This is what we will improve next.

Configure pop-ups for layers

  1. Click on Trailheads > More Options ... > Configure Pop-up and set the following:

    • Popup-Title: Trailheads
    • Configure Attributes:
      • Uncheck all of the fields (Hint: At the top, select and unselect the Display checkbox.)
      • Check the following and set the Field Alias:
        • {TRL_NAME} Name
        • {CITY_JUR} City
        • {X_STREET} Cross Street
        • {PARKING} Parking
        • {ELEV_FT} Elevation (ft)
      • Use the up and down arrows to re-order the fields.
    • Click OK
    • Click on some Trailheads features to view the styled pop-up.
  2. Click on Trails > More Options ... > Configure Pop-up and set the following:

    • Popup-Title: Trails
    • Configure Attributes:
      • Uncheck all of the fields (Hint: At the top, select and unselect the Display checkbox.)
      • Check the following and set the Field Alias:
        • {LENGTH_MI} Length (miles)
        • {ELEV_GAIN} Elevation Gain (ft)
        • {USE_HIKE} Hike
        • {USE_BIKE} Bike
        • {USE_EQR} Equestrian
        • {USE_ATV} ATV
      • Use the up and down arrows to re-order the fields.
    • Click OK
    • Click on some Trails features to view the styled pop-up.
  3. Click on Parks and Open Space > More Options ... > Configure Pop-up and set the following:

    • Popup-Title: {PARK_NAME}
    • Configure Attributes:
      • Uncheck all of the fields (Hint: At the top, select and unselect the Display checkbox.)
      • Check the following and set the Field Alias:
        • {AGENCY_NAME} Agency
        • {TYPE} Type
        • {ACCESS_TYP} Access
        • {GIS_ACRES} Acres
      • Use the up and down arrows to re-order the fields.
    • Click OK
    • Click on some Parks and Open Space features to view the styled pop-up.
  4. Save your map.

Congratulations, you're done!

Once your pop-ups are configured, your web map should look something like this.

Challenge

Create custom content

Go to Trails > Configure Popup and remove the title and the selected fields. Now click Display > A custom attribute display > Configure and apply the content below:

This is {TRL_NAME} with {ELEV_GAIN} ft of climbing.

Add a media item to your pop-up

Explore the Pop-up Media option. For the Parks and Open Spaces layer, try adding a pie chart that shows the park rating. Give it a title of Park Rating and use the following attributes:

  • TOTAL_GOOD
  • TOTAL_FAIR
  • TOTAL_POOR