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.
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.
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.
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.
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.
Then choose any color.
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.
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.
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.
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.
The second expression, titled IsInactive, evaluates whether the field for the feature contains the word Inactive.
Color is applied to the expression, which is treated like a field, in the text editor. The results are shown below.
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.
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.
The text color in the pop-up is set by the expression and matches the feature color.
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:
- Pop-ups: the essentials (ArcGIS Blog)
- Pop-ups: text element essentials (ArcGIS Blog)
- Get started using ArcGIS Arcade (Learn ArcGIS)
- ArcGIS Arcade (Documentation)
This blog article was originally published on September 25, 2012, and has been updated.
Commenting is not enabled for this article.