Using color in web map pop-ups

Crafting a great pop-up is essential for making great web maps. Using color in your web map pop-ups is just one of the techniques that you can apply that can turn of dump of GIS attributes into a more meaningful and intuitive display of information.

Some examples

Here’s an example from a past election map showing the voting results.┬áThe use of color in the pop-up makes it easy to understand who the Republican (red) and Democratic (blue) candidates are.

In the next example, color was used for emphasis.

Color can also be used in a pop-up to echo the legend, or make a complex legend easier to understand.

Using Arcade, text in pop-ups can be displayed with colors based on the evaluation of expressions. In this example if there was a loss of forest area, red is used, if an increase in forest area, green is used.

Adding color the easy way

Adding color to pop-ups is easy, and can be accomplished by authoring a custom attribute display. Simply create the attribute display, select the desired text and/or attribute, and change the color. Follow these steps:

Step 1. Click layer options (), and choose Configure Pop-up.

Step 2. Choose Custom Attribute display

Step 3. Enter text and attributes in the Custom Attribute Display panel, and change color as desired. Below we’ve opened the election results map from 2008 to look at the pop-up configuration. The pop-up has been configured with a custom attribute display, and results are displayed in different colors indicating party affiliation.

Note that attributes appear in curly braces, and can be colored like other text. Select the text and attributes, click the Foreground color tool, then choose the desired color.

Using Arcade expressions to add color

Arcade is an expression language that can be used to control how features are rendered, to control label text, and much more. Arcade provides a simple scripting syntax to deliver these capabilities, and enables you to add additional logic to styling maps, including pop-ups. For more information see ArcGIS Arcade.

In this example we will build two expressions that evaluate an attribute value, then display colored text based upon the value. Follow the steps outlined below, you can open the sample map to follow along.

The example uses wells, and evaluates whether a well is Active or Inactive. If inactive, red text will be used in the pop-up. If active, green text will be used. The workflow starts with configuring a custom pop-up and adding attribute expressions, and uses the expressions to determine color used in the pop-up.

Step 1: Click layer options (…), and choose Configure pop-up.

Step 2: Add an expression. In the Attribute Expressions section, click Add.

Step 3: Construct the needed expressions.

To accomplish our task, we need to evaluate the field STATUS which contains one of two attribute values; Active or Inactive. While the logic here may initially seem confusing, we are creating two expressions which return the value Active or Inactive. If the expression does not evaluate to True, Null is returned.

This first expression evaluates whether the field for the feature contains the word Active:

If ($feature.STATUS == 'Active') {
return $feature.STATUS
else {
return ""

We titled the expression IsActive to help us remember what the expression does.

This second expression evaluates whether the field for the feature contains the word Inactive:

If ($feature.STATUS == 'Inactive') {
return $feature.STATUS
else {
return ""

And the expression is titled IsInactive to help us remember what the expression does.

Note that your expressions are listed and indexed starting at 0.

Step 4: In the Pop-up Contents section, choose A custom attribute display and click Configure.

Step 5: Configure the custom attribute display. You can use a combination of fields and expressions along with text. Click Add Field Name

to list the fields and any expressions. Expressions will be listed at the end, after all fields.

Step 6: Use the expressions created in Step 3 above to provide the desired color – green if the well is active and red if the well is inactive.

In our configured pop-up, the well name {well_name} will be displayed in bold, black text. The expressions, respectively in green and red bold text, are evaluated and will also be part of the custom attribute display. If the expression evaluates to Null, nothing is displayed.

Step 7: When finished, click Ok to exit Custom Attribute Display, and click Ok once more to save the changes you have made to your layer pop-up. When finished, save your map.

View the saved map and the configured pop-ups. Click Modify (or sign in and Save As), to examine the pop-up configuration. The custom attribute display shown in Step 6 generates the pop-ups below.

Tip: As with many visual techniques, use pop-up color sparingly. Too much color might be distracting, detract from the overall map aesthetics, or just look plain ugly.

For more information

This post was originally published on September 25, 2012, and has been updated.

This entry was posted in ArcGIS Enterprise, ArcGIS Online and tagged , , . Bookmark the permalink.

Leave a Reply


  1. jocsch says:

    This offers undreamd-of possiblities !!!

  2. eamonn.doyle says:

    Is it possible to do this of Feature Services or only on Map Services? I’m finding I don’t get the Custom Attribute Display option, or any Display Option Dropdown with a Feature Service on ArcGIS Online.

  3. edonah7935 says:

    Great Tip – easy to use tip that makes pop-ups much easier to read!

  4. Andrew says:

    Pop-up charts are simply unusable because you can’t use custom colors. The auto colors in the charts do not match the symbology found in each person’s map.
    You can actually trace this bug being shared in the ESRI community for more than 4 years…

  5. johnmdye says:

    Dear Esri,
    Please support use of internal style blocks in a custom popup configuration so that we can just change how popups appear without having to neccesarily do so explicitly for every single attribute. I’m a developer and as such, I am very lazy and do not want to write explicit expressions for every single attribute when using a custom attribute display. Instead, I’d much rather just provide some style overrides.