ArcGIS Online

Bring Colors From Your Map Into Your Pop-up Using Arcade

Want to make your maps easier to understand? One way to do this is to bring the colors from your map into your pop-up text. For example, this map uses this technique to show coral reef stations by the level of bleaching that is predicted to occur in different parts of the ocean. Notice how each symbol’s alert color matches the pop-up text when clicking on different stations.

This trick uses an Arcade expression within Map Viewer Classic to mimic the colors from the map into the pop-up text using hexadecimal color values. Arcade sits on top of ArcGIS in order to help you perform on-the-fly calculations in your maps. You don’t need to be a coder to write this expression, and we’ve provided some simplified steps below. It takes a few minutes to accomplish this and can greatly enhance the readability of the pop-ups within your maps and apps. It also helps reduce the necessity of a legend, especially in apps such as Cascade Story Maps.

It can be done in three easy steps:

  1. Get the hexadecimal color values from the map
  2. Build the arcade expression
  3. Use the arcade expression within the pop-up HTML

The map above classifies coral reef bleaching based on five different alert levels. Within the map, each of those alert levels is shown as a different color, which we will imitate in the pop-up. Let’s get started!

Step 1: Get the hexadecimal color values from the map

Hexadecimal (or hex) values specify exact shades of color, making it easy to replicate colors that appear within your map. Once you are done setting the cartography for your map, grab the hex color values from each category in your map. You can do this by going into the symbology options for the layer and getting the hex values from the color picker window.

I like to take a screenshot of my legend with each hex value so that I can easily reference it later. In the coral reef example, I have five hex values. One for each alert level.

I’ll be using this as my cheat-sheet later on when writing my arcade expression.

Step 2: Build the arcade expression

Within your layer options, configure a custom pop-up calling to the field that is being mapped. This is where you’ll use the matching map color. In the coral reef map, I want to make the alert level text to be colored. This is what my pop-up looks like before I add the color:

Now, write an arcade expression that will return a hex value based on data values from your layer. Within the configure pop-up pane, choose to add a new arcade expression to get started.

In my example, I’ll match each alert level to its color. This can be accomplished using if/else logical statements for each color. Here, we are mimicking the logic that is being accomplished by the map’s symbology. Using my cheat sheet from above, I’ll write a placeholder if(){} statement for each of my five scenarios. This will make it easy for me to fill in each scenario.

Using the same field being mapped (alert level), type in the logic you want the expression to use for each scenario, and return the hex value for each if statement. For example, when my alert level is zero, I want it to return the hex code 2E578. To check if something is equal to something else, the double equal sign (==) is used. For all of the arcade logical operators, check out this part of the documentation.

The gif below shows how I built my first if statement:

Note: return the hex value with quotations around it to return it as text

Repeat this logic for each if statement until all scenarios are handled. Test the expression to confirm that the expression is returning a hex value as a string. That way it will easily be absorbed in the pop-up configuration.

Step 3: Use the arcade expression within the pop-up HTML

Now, use the arcade expression to tell your pop-up which hex colors to use. In the pop-up configuration panel, you’ll be able to see the name of the expression you wrote. You’ll need this in step 3. Mine was called {expression/expr2}.

Now is where the magic happens. Start by going into the custom text configuration of your pop-up.

Select the text you want to be colored, and choose any color from the selector. Now, go into the HTML view of your pop-up and you’ll see where the color is defined within the HTML.

In the HTML, swap the random color hex value to be the expression we wrote. This will assign the text color based on the arcade expression. Save all of your settings and check that the pop-up works as expected.

Now, you’re pop-up is easier to understand (and it looks cool, too). To check out the final map and arcade statements, click here. You can also check out the Living Atlas dashboard and layer that inspired this blog.

Concluding thoughts

Happy mapping!

About the author

I am a Senior Product Engineer on the Living Atlas team at Esri. I work to create clear and concise stories about demographic, socioeconomic, and policy topics using cartography. I also build data layers and tutorials to help others create their own map masterpieces.

Notify of
Inline Feedbacks
View all comments

Next Article

Maxar's Precision3D in Esri's World Elevation 3D and Hillshade Layers

Read this article