ArcGIS Online

Use color in pop-ups

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

 

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.

Color in pop-ups

This next example follows the same theme—red for the Republican and blue for the Democrat—but also uses color to create more understanding of the pie chart.

Pop-up color

Below, color was used for emphasis.

Pop-up color

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

Pop-up color

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 text is used. If an increase in forest area, green text is used.

Pop-up color

Add 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 if configuring the layer from a map, if you own the layer you can also configure it via the Visualization tab in the item pages.

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

Configure pop-up

Step 2 – Choose A custom attribute display, then click Configure.

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.

Custom attribute display

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.

Color tool

 

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

Add expression

Step 3 – Construct the needed expressions.

To accomplish our goal, 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:

The expression is titled IsActive to help us remember what the expression does. Note the use of comments to clarify its purpose.

Expression

The second expression evaluates whether the field contains the word Inactive:

The expression is titled IsInactive to help us remember what the expression does, and includes a comment line.

Expression

Note that the expressions are listed in the Attribute Expressions section of the pop-up configuration panel, and indexed starting at 0.

Attribute Expressions

Step 4 – The expressions created above can be used to craft a custom attribute display which will display text in either red or green depending on how the expressions evaluate. In the Pop-up Contents section, choose A custom attribute display and click Configure.

Configure custom attribute display

Step 5 – Configure the custom attribute display using the expressions. In a custom attribute display you can use a combination of fields and expressions along with text. Click Add Field Name.

Add field name

Fields and expressions can be found in the drop-down list. Expressions will be listed at the end, after all fields.

Choosing an expression

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.

Custom attribute display using expressions

Step 7 – When finished, click Ok to exit Custom Attribute Display, and click Ok once more to save the changes you have made to the 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.

Pop-ups using expressions

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

 

More information

For more information see

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

One Minute Map Hacks: 6-10

Read this article