Configure pop-ups

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

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

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

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

7. Save your map.

Congratulations, you're done!

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

Related Labs

Style a web map

Use the Map Viewer to style layers and create meaningful visualizations.

10 minutes Start Lab

Style feature layers with smart mapping

Use the Map Viewer to create visually stunning, useful maps based on real data.

10 minutes Start Lab

Draw graphics

Use the Map Viewer to interactively create points, lines, and polygons.

10 minutes Start Lab

Import data

Load your data into the cloud (xls, gpx, GeoJSON, shapefiles).

10 minutes Start Lab

Create a web map (2D)

Use the Map Viewer to find layers and create a new web map.

10 minutes Start Lab

Create a new dataset

Define and populate datasets in the cloud for your apps.

10 minutes Start Lab

Create a web scene (3D)

Use the Scene Viewer to find layers and create a new web scene.

10 minutes Start Lab

Explore layer data

View features with ArcGIS Online tools and the REST API.

10 minutes Start Lab

Challenge

Create custom content

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

Add a media item to your pop-up