ArcGIS Online

Pop-ups: use color in text elements

Crafting a great pop-up is essential for making great web maps. Use color in your pop-up text elements to apply more meaning or emphasis on attributes, or clarity to what your map is showing.

 

Examples

The example shown below uses color to emphasize specific bits of information, in this case the travel time shown in the analysis, the number of residents served, and the percentage of the total population.

Pop-up text color

Color can also be used in a pop-up to echo the legend and clarify the map style. The use of color and text helps the viewer understand the what they are seeing.

Pop-up text color

Below, the color in the pop-up emphasizes the unique value of the feature. Color matching was accomplished using ArcGIS Arcade. See the example at the end of this blog article.

Pop-up text 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 text color

 

Add color to text elements

Adding color to text in pop-ups can be accomplished by applying a color to the desired text, field, or Arcade expression. See Pop-ups: text element essentials to learn the basics of working with text content in pop-ups.

In the text editor, select the text, field, or expression and click the Font Color button.

Font color

Then choose any color.

Color chooser

In the example shown below of California peaks, the peak name, elevation, prominence, and isolation are blue. The peak rank is red. The Arcade expression, which returns a ranking of prominence (Low, Moderate, High), is brown.

Pop-up text color
View larger image

Tip: To apply a custom color not shown in the palette, click the Source button and enter the hexadecimal value of the color you want.

Hex color value

 

Use Arcade expressions to add color

Arcade is an expression language that is supported across ArcGIS. It can be used to perform calculations, manipulate text, and evaluate logical statements.

In pop-ups, Arcade can be used in two ways; to create expressions in text elements that can be evaluated like fields, or as separate elements that return a complete block of content.

The sample map includes two layers presenting the the techniques discussed below. The attribute expressions can be found by opening the Options section of Configure pop-ups in each layer.

Attribute expresssions

Use expressions and color

Observation Wells (expression color) layer in the sample map.

To accomplish the goal of coloring the text to show the well status, two expressions were constructed to evaluate the {STATUS} field 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 string value Active or Inactive. If the expression does not evaluate to True, Null is returned.

The first expression, titled IsActive, evaluates whether the field for the feature contains the word Active.

Arcade expression

The second expression, titled IsInactive, evaluates whether the field for the feature contains the word Inactive.

Arcade expression

Color is applied to the expression, which is treated like a field, in the text editor. The results are shown below.

Text element color
View larger image

Use expressions to specify hexadecimal color

Observation Wells (expression hexadecimal color value) layer in the sample map.

You can also use expressions to return the hexadecimal color value to change pop-up text to match unique symbol colors. The Arcade expression shown below checks the STATUS field and returns the hex color value; green when active, red when inactive. If you have more unique values, just extend the expression for all possible values.

Arcade expression

Click the Source button in the text editor and use the expression to set the text color (shown highlighted below). Using hex values you can set the color for the entire text block (as is done in this example), or individual words, fields, or expressions.

Hex color value

The text color in the pop-up is set by the expression and matches the feature color.

Text color
View larger image

 

Color tips

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

Stay away from light or pale colors, they are difficult to see on the white pop-up background.

 

More information

For more information, see the following:

 

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

About the author

Corporate technology evangelist and advocate at Esri, focusing on ways to broaden access to geographic information and helping customers succeed with the ArcGIS system. 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

Pop-ups: the essentials

Read this article