ArcGIS Enterprise

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:

[sourcecode language=”css” gutter=”false”]

If ($feature.STATUS == ‘Active’) {
return $feature.STATUS
}
else {
return ""
}

[/sourcecode]

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:

[sourcecode language=”css” gutter=”false”]

If ($feature.STATUS == ‘Inactive’) {
return $feature.STATUS
}
else {
return ""
}

[/sourcecode]

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.

About

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

Digital to Hand

Read this article