ArcGIS Online

Pop-ups: the essentials

Authoring web maps is easy, although authoring a truly great map requires a bit of additional thought and tradecraft. Smart mapping guides us to choices that help us use one or more attributes to present data in effective and meaningful ways, and makes it easier than ever to create visually compelling maps that unlock the stories in your data.

But going beyond layer styling, layer pop-ups are an equally essential and important part of crafting the complete map information experience. Pop-ups can transform an otherwise dull list of attributes into a far more meaningful display of intuitive and engaging information for your audience. While it’s also easy to craft good pop-ups, they are often are overlooked, and in too many maps we see a default dump of sometimes meaningless fields and values.

 

See the difference

It’s easy to see the difference between a weakly implemented pop-up and one that is well-crafted. The default pop-up appearance for a layer is a plain list of attributes. As a map or layer owner, you can reconfigure the pop-ups to define the list of visible and hidden fields, create field aliases, format numbers and dates, add charts and images, and choose how information for features is best presented.

For example, rather than show a list of attributes, you can provide a rich interactive experience for visualizing and comparing features in a particular layer by providing custom-formatted text and charts.

Compare the two examples below – which delivers the more meaningful and engaging experience?

Compare pop-ups

With additional configuration capabilities, such as using Arcade expressions, HTML, or data from related tables, you can do even more. For an overview, see Configure pop-ups.

 

An example

You can follow the steps outlined in this article using the pop-up examples map. Once you open the map, click Modify Map, or Sign In to save the map to your Content. Each pop-up technique is represented by a unique layer. To view the configuration, toggle visibility on for the desired layer, then click a feature in the map to view the configured pop-up.

To view how the pop-up was configured, click Configure Pop-up.

Configure Pop-up

 

Configure and save the pop-up

There are two ways to configure and save your pop-up. You can configure layer pop-ups in your map and save the map, or save the layer from the map. If you own the layer you can configure layer pop-ups in the layer item and save your changes. Both methods are outlined below.

 

Configure the layer pop-up in your map

All pop-up configurations will be saved along with the map, and (if permissions allow) you can modify existing layer pop-up configurations as desired for your use. You can also save the layer configuration from the map.

Open the layer options.

More Options

And choose Configure Pop-up.

Configure Pop-up

The Configure Pop-up panel appears, presenting various configuration options discussed below. With appropriate permissions, you can also save the layer.

Save layer

See Copy and save layers for more information.

 

Configure the layer pop-up via the layer item

If you own the layer item, you can also configure and save the pop-up from the item pages. Open the Visualization tab

Visualization tab

Then click Configure Pop-up.

Configure pop-up

The configuration panel is the same as when opened from the map. When finished, click Save Layer or Save As New Layer.

Save Layer or Save As New Layer

Configuring and saving layers is a best practice. This ensures your layers are ready-to-use by others, and makes them good building blocks for authoring new maps.

 

The default pop-up

The default pop-up appearance for a layer is a plain list of attributes, with attribute field names “as-is” from the source, and default formatting for numbers. Viewing the default display below, you may notice a few simple changes that could be made to improve the information display: some attributes are not needed and can be hidden, field aliases can be used to change all caps to mixed case, and to make the names more understandable, and numeric display can be formatted.

For example, LAT and LONG are not needed, the number of decimal places can be adjusted for numeric values, and other fields can be aliased to make them more readable and understandable (e.g., DESC can be aliased to Description).  Yet other other fields have important information, such as links to photos and more information, that we can use to further improve and refine the pop-up.

Default pop-up

 

Pop-up title

The pop-up title appears at the top of the pop-up, and can be blank, a field, or a combination of text and fields. Choose fields from the drop-down by clicking [+].

Note that field names appear within curly braces—{field_name}—and the contents will be populated by the value for the specific feature clicked.

 

Pop-up title

Examples:

Title examples

 

Pop-up Contents

Pop-up Contents fill the main part of the pop-up window.  Choose a Display option from the drop-down list. Choices are:

A list of field attributes – displays all attributes as configured.

A description from one field – displays the contents of a single attribute field.

A custom attribute display – enables you to craft a custom display, using a combination of text and attributes. You can change font, color, add links, and more.

No attribute information – uses no attributes, this part of the pop-up will be omitted.

 

A list of field attributes

This options displays all the fields you’ve selected with the formatting and aliases that you have applied. Click Configure Attributes to make changes.

Configure Attributes

Choose which attributes you want to display, create a Field Alias to display a more understandable name (and REMOVE ALL CAPS), format values, and also change the display order.

Configure Attributes panel

In the sample web map, compare the unconfigured layer pop-up with the configured layer pop-up, shown side-by-side below. While there are only small changes, the overall result improves the display of information.

Unconfigured vs. configured

 

A description from one field

You can choose the contents of one field, selected via the drop-down, to fill the pop-up contents. The layer in the sample map contains the {DESC} field which stores a short description of the peak.

Description from one field

 

A custom attribute display

A custom attribute display provides a versatile way to create an informative and engaging pop-up by combining text and attributes. You can choose fonts, colors, add links, and more. Click Configure to open the Custom Attribute Display panel.

Configure

Begin by adding text, and choosing attributes from the drop-down.

Choose attributes

Select text to change font, weight, size, and color, or add links. An example is shown below.

Custom attribute display example

To add links, see the Add links from fields section in Configure pop-ups: custom attribute display. The article also includes details on how to do more using HTML in custom attribute displays.

 

Pop-up media

The Pop-up media section allows you to display images and charts in the pop-up. To add an image to your pop-up, click Add. then select Image.

Add Image

In Configure Image, add a Title and/or Caption (both are optional). Next add the field containing the URL to the image, and optionally add a link which will open when the image is clicked.

In the example below we have added a caption of “Tap to view larger image” since the pop-up may be displayed on a device, and have provided a field containing a URL to a small thumbnail ({THUMB_URL}) of the image, and added a link to a larger version of the image ({URL}).

Configure image

To add a chart, select the desired chart type from the Add drop-down.

Add chart

Complete the Title, Caption, and choose the appropriate chart fields (must be numeric). In this example, we used a bar chart to show the prominence of the peak vs. its elevation.

Configure chart

You can add multiple images and/or charts. When multiple media components are used, an arrow will enable moving from one media component to another.

Next media

 

Once a pop-up, always a pop-up

Once a pop-up has been configured, it is used across all apps and devices. For example, the pop-up used in the example used in this article is shown below in the Basic Viewer, one of the configurable app templates.

Basic Viewer pop-up

Tip: Though the essential pop-up configuration persists across apps and devices, note that some configurable apps and app builders will display pop-up contents slightly differently. If your goal is to craft a map for a specific app, for best results test your configuration in the app, and make adjustments in the layer pop-up configuration accordingly.

 

More information

For more information see:

 

This article was originally published on March 17, 2011, and has been updated.

About the author

Tech evangelist and product strategist at Esri, focusing on ways to broaden access to geographic information and helping users succeed with the ArcGIS Platform. On a good day I'm making a map, on a great day I'm on one. Follow @bernszukalski or email bszukalski@esri.com

Connect:

Next Article

What's New in ArcGIS GeoEvent Server at 10.7.1

Read this article