ArcGIS Online

Pop-ups: custom attribute display

An important, but sometimes overlooked, part of authoring good web maps is configuring pop-ups for layers. A good pop-up can turn a list of raw data into much more meaningful information, and provide an intuitive experience for viewers of your map. There are several ways you can configure pop-up contents; using a formatted list of attributes, using a description from one field, and creating a custom attribute display. In addition, you can use attribute expressions (Arcade), and use pop-up media like photos, charts, and more.

This article covers configuring a pop-up using A custom attribute display, including HTML.

 

Open the pop-up configuration panel

To configure pop-ups, click More Options (…) on the layer.

Then choose Configure Pop-up.

A very flexible choice that permits the combination of free text, field contents, and links is A custom attribute display. You’ll find it among the Pop-up Contents display options in the drop-down list.

Click Configure to open the custom attribute display configuration panel.

 

Configure a custom attribute display using text and fields

In Custom Attribute Display you can enter a combination of free text and fields. Click [+] to display a drop-down list of fields, the field names appear in curly braces when added to your pop-up.

For example, below we’ve added a combination of free text and fields in the pop-up configuration for a layer containing locations of high peaks in California. What appears within curly braces (brackets) are field names. When the pop-up is opened these will be replaced by the attribute value for the feature that is clicked.

The configuration shown above yields this pop-up:

 

Add more style

Other style options can be applied to field names as desired. Select the field name (including the curly braces) and apply the desired styling. Below we’ve changed the name of the peak to appear in bold blue text:

 

Add links from fields

You can also use fields as text links in custom attribute displays. Use the field drop-down list to select the field containing the link, and add it to your custom attribute display. In this case we’ve chosen a field containing a link to the credits for the photo of each peak.

However when the pop-up is opened, we don’t quite get the desired result—we see the URL string displayed, but not as a link.

How do we create the link? Follow these steps:

Step 1 – Select and copy the field name from the Custom Attribute Display editing panel.

Step 2 -Replace the field name with the text for the link and select it.

Step 3 – Click Create Link.

Step 4 – Paste the field name in the URL input. Click Set, then OK to save your configuration.

Here’s the pop-up after these changes. The text “Photo credit” is now a unique hyperlink, with the link going to the URL stored in {Photo_Credit} for each feature.

 

Enhancing your pop-up

You can add other pop-up elements like images and charts to your custom attribute displays. We’ve completed our pop-up configuration by adding a link to a thumbnail photo of each peak, which when clicked opens a larger version of the same photo.

Here’s the configured pop-up with custom attribute display and image.

 

Configure a custom attribute display using HTML

You can also use HTML to format your pop-up, providing even more flexibility and options. In the Custom Attribute Display panel, click the View HTML Source button.

Using the HTML shown below, a pop-up was configured to display the description from one of the fields, and a table listing some information about each peak from several other fields.


{DESC}<br /><br />
<div style="padding:5px;background-color:rgb(251,183,46)"><b>Peak Information</b></div>
<table style="width:100%;">
  <tbody>
<tr>
    <td style="border:0.5px solid rgb(215,215,215)"><b>Name</b></td>
    <td style="border:0.5px solid rgb(215,215,215)">{NAME}<br /></td> 
  </tr>
<tr>
    <td style="border:0.5px solid rgb(215,215,215)"><b>Rank</b>
	</td><td style="border:0.5px solid rgb(215,215,215)">{RANK}</td> 
  </tr>
<tr>
    <td style="border:0.5px solid rgb(215,215,215)"><b>Elevation</b></td>
	<td style="border:0.5px solid rgb(215,215,215)">{ELEV_FEET} feet</td> 
  </tr>
<tr>
    <td style="border:0.5px solid rgb(215,215,215)"><b>Prominence</b></td>
	<td style="border:0.5px solid rgb(215,215,215)">{PROM_FEET} feet</td> 
  </tr>
<tr>
    <td style="border:0.5px solid rgb(215,215,215)"><b>Range</b></td>
	<td style="border:0.5px solid rgb(215,215,215)">{RANGE}</td> 
  </tr>
</tbody></table>

The HTML above configures the pop-up as shown below:

 

Summary and examples

Using pop-up custom attribute displays, you can use a variety of techniques and style options to craft a compelling, and interesting pop-up. Open California Peaks – Pop-up examples to view a variety of pop-up configurations, including those covered in this post.

 

More information

For more information see the following:

This post was originally published on July 25, 2013, 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

Exploring Vineyard Operations

Read this article