{"id":492942,"date":"2019-04-24T11:11:08","date_gmt":"2019-04-24T18:11:08","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=492942"},"modified":"2024-11-11T12:34:17","modified_gmt":"2024-11-11T20:34:17","slug":"bring-colors-from-your-map-into-your-pop-up-using-arcade","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade","title":{"rendered":"Bring Colors From Your Map Into Your Pop-up Using Arcade"},"author":6461,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[777102,22941],"tags":[32551,268131,176452,28061,212872],"industry":[],"product":[36551],"class_list":["post-492942","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-mapping","tag-arcade","tag-living-atlas","tag-mapping","tag-pop-ups","tag-popups","product-arcgis-online"],"acf":{"short_description":"Use an arcade expression to mimic the colors from your map into your pop-up text. ","flexible_content":[{"acf_fc_layout":"content","content":"

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\u2019s alert color matches the pop-up text when clicking on different stations.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":492952,"id":492952,"title":"popupExampleGIF","filename":"popupExampleGIF.gif","filesize":191399,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/popupexamplegif","alt":"","author":"6461","description":"","caption":"","name":"popupexamplegif","status":"inherit","uploaded_to":492942,"date":"2019-04-16 19:59:57","modified":"2019-04-16 19:59:57","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":527,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF.gif","medium-width":396,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF.gif","medium_large-width":768,"medium_large-height":506,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF.gif","large-width":800,"large-height":527,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF.gif","1536x1536-width":800,"1536x1536-height":527,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF.gif","2048x2048-width":800,"2048x2048-height":527,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF-706x465.gif","card_image-width":706,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF.gif","wide_image-width":800,"wide_image-height":527}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popupExampleGIF.gif"},{"acf_fc_layout":"content","content":"

This trick uses an Arcade expression<\/a> 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.<\/p>\n

It can be done in three easy steps:<\/p>\n

    \n
  1. Get the hexadecimal color values from the map<\/strong><\/li>\n
  2. Build the arcade expression<\/strong><\/li>\n
  3. Use the arcade expression within the pop-up HTML<\/strong><\/li>\n<\/ol>\n

    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\u2019s get started!<\/p>\n

    Step 1: Get the hexadecimal color values from the map<\/strong><\/h2>\n

    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.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493042,"id":493042,"title":"hex color","filename":"hex-color.gif","filesize":240401,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/hex-color","alt":"","author":"6461","description":"","caption":"","name":"hex-color","status":"inherit","uploaded_to":492942,"date":"2019-04-16 20:25:40","modified":"2019-04-16 20:25:40","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":487,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color.gif","medium-width":429,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color.gif","medium_large-width":768,"medium_large-height":468,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color.gif","large-width":800,"large-height":487,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color.gif","1536x1536-width":800,"1536x1536-height":487,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color.gif","2048x2048-width":800,"2048x2048-height":487,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color-764x465.gif","card_image-width":764,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color.gif","wide_image-width":800,"wide_image-height":487}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/hex-color.gif"},{"acf_fc_layout":"content","content":"

    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.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493062,"id":493062,"title":"legend2","filename":"legend2.png","filesize":4984,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/legend2-2","alt":"","author":"6461","description":"","caption":"","name":"legend2-2","status":"inherit","uploaded_to":492942,"date":"2019-04-16 20:30:47","modified":"2019-04-16 20:30:47","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":484,"height":242,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2.png","medium-width":464,"medium-height":232,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2.png","medium_large-width":484,"medium_large-height":242,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2.png","large-width":484,"large-height":242,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2.png","1536x1536-width":484,"1536x1536-height":242,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2.png","2048x2048-width":484,"2048x2048-height":242,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2.png","card_image-width":484,"card_image-height":242,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/legend2.png","wide_image-width":484,"wide_image-height":242}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    I’ll be using this as my cheat-sheet later on when writing my arcade expression.<\/p>\n

    Step 2: Build the arcade expression<\/strong><\/h2>\n

    Within your layer options, configure a custom pop-up<\/a> calling to the field that is being mapped. This is where you\u2019ll 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:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493102,"id":493102,"title":"Popup BEFORE2","filename":"Popup-BEFORE2.png","filesize":194969,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/popup-before2","alt":"","author":"6461","description":"","caption":"","name":"popup-before2","status":"inherit","uploaded_to":492942,"date":"2019-04-16 20:37:11","modified":"2019-04-16 20:37:11","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1122,"height":730,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2.png","medium-width":401,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2.png","medium_large-width":768,"medium_large-height":500,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2.png","large-width":1122,"large-height":730,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2.png","1536x1536-width":1122,"1536x1536-height":730,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2.png","2048x2048-width":1122,"2048x2048-height":730,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2-715x465.png","card_image-width":715,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2.png","wide_image-width":1122,"wide_image-height":730}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Popup-BEFORE2.png"},{"acf_fc_layout":"content","content":"

    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.<\/p>\n

    In my example, I’ll match each alert level to its color. This can be accomplished using if\/else logical statements<\/a> 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.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493442,"id":493442,"title":"empty if statements","filename":"empty-if-statements.png","filesize":59339,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/empty-if-statements","alt":"","author":"6461","description":"","caption":"","name":"empty-if-statements","status":"inherit","uploaded_to":492942,"date":"2019-04-16 22:11:08","modified":"2019-04-16 22:11:08","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1230,"height":781,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements.png","medium-width":411,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements.png","medium_large-width":768,"medium_large-height":488,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements.png","large-width":1230,"large-height":781,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements.png","1536x1536-width":1230,"1536x1536-height":781,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements.png","2048x2048-width":1230,"2048x2048-height":781,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements-732x465.png","card_image-width":732,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements.png","wide_image-width":1230,"wide_image-height":781}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/empty-if-statements.png"},{"acf_fc_layout":"content","content":"

    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<\/a>.<\/p>\n

    The gif below shows how I built my first if statement:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493482,"id":493482,"title":"first if statement","filename":"first-if-statement.gif","filesize":98935,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/first-if-statement","alt":"","author":"6461","description":"","caption":"Note: return the hex value with quotations around it to return it as text","name":"first-if-statement","status":"inherit","uploaded_to":492942,"date":"2019-04-16 22:20:35","modified":"2019-04-16 22:22:16","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":509,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement.gif","medium-width":410,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement.gif","medium_large-width":768,"medium_large-height":489,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement.gif","large-width":800,"large-height":509,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement.gif","1536x1536-width":800,"1536x1536-height":509,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement.gif","2048x2048-width":800,"2048x2048-height":509,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement-731x465.gif","card_image-width":731,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement.gif","wide_image-width":800,"wide_image-height":509}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/first-if-statement.gif"},{"acf_fc_layout":"content","content":"

    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.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493582,"id":493582,"title":"Test it","filename":"Test-it.gif","filesize":77527,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/test-it","alt":"","author":"6461","description":"","caption":"","name":"test-it","status":"inherit","uploaded_to":492942,"date":"2019-04-16 22:36:39","modified":"2019-04-16 22:36:39","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":509,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it.gif","medium-width":410,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it.gif","medium_large-width":768,"medium_large-height":489,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it.gif","large-width":800,"large-height":509,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it.gif","1536x1536-width":800,"1536x1536-height":509,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it.gif","2048x2048-width":800,"2048x2048-height":509,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it-731x465.gif","card_image-width":731,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it.gif","wide_image-width":800,"wide_image-height":509}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/Test-it.gif"},{"acf_fc_layout":"content","content":"

    Step 3: Use the arcade expression within the pop-up HTML<\/strong><\/h2>\n

    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}.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493642,"id":493642,"title":"where is it","filename":"where-is-it.png","filesize":287936,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/where-is-it","alt":"","author":"6461","description":"","caption":"","name":"where-is-it","status":"inherit","uploaded_to":492942,"date":"2019-04-16 22:44:39","modified":"2019-04-16 22:44:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1230,"height":781,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it.png","medium-width":411,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it.png","medium_large-width":768,"medium_large-height":488,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it.png","large-width":1230,"large-height":781,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it.png","1536x1536-width":1230,"1536x1536-height":781,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it.png","2048x2048-width":1230,"2048x2048-height":781,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it-732x465.png","card_image-width":732,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it.png","wide_image-width":1230,"wide_image-height":781}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/where-is-it.png"},{"acf_fc_layout":"content","content":"

    Now is where the magic happens. Start by going into the custom text configuration of your pop-up.<\/p>\n

    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.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493732,"id":493732,"title":"popup html","filename":"popup-html.gif","filesize":225672,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/popup-html","alt":"","author":"6461","description":"","caption":"","name":"popup-html","status":"inherit","uploaded_to":492942,"date":"2019-04-16 22:53:12","modified":"2019-04-16 22:53:12","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":636,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html.gif","medium-width":328,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html.gif","medium_large-width":768,"medium_large-height":611,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html.gif","large-width":800,"large-height":636,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html.gif","1536x1536-width":800,"1536x1536-height":636,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html.gif","2048x2048-width":800,"2048x2048-height":636,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html-585x465.gif","card_image-width":585,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html.gif","wide_image-width":800,"wide_image-height":636}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/popup-html.gif"},{"acf_fc_layout":"content","content":"

    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.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":493762,"id":493762,"title":"HTMLwithExpressionHighlighted","filename":"HTMLwithExpressionHighlighted.png","filesize":265867,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/htmlwithexpressionhighlighted","alt":"","author":"6461","description":"","caption":"","name":"htmlwithexpressionhighlighted","status":"inherit","uploaded_to":492942,"date":"2019-04-16 22:57:45","modified":"2019-04-16 22:57:45","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1510,"height":922,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted.png","medium-width":427,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted.png","medium_large-width":768,"medium_large-height":469,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted.png","large-width":1510,"large-height":922,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted.png","1536x1536-width":1510,"1536x1536-height":922,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted.png","2048x2048-width":1510,"2048x2048-height":922,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted-762x465.png","card_image-width":762,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted.png","wide_image-width":1510,"wide_image-height":922}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/HTMLwithExpressionHighlighted.png"},{"acf_fc_layout":"image","image":{"ID":494292,"id":494292,"title":"final popup","filename":"final-popup.gif","filesize":306846,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/bring-colors-from-your-map-into-your-pop-up-using-arcade\/final-popup","alt":"","author":"6461","description":"","caption":"","name":"final-popup","status":"inherit","uploaded_to":492942,"date":"2019-04-17 20:47:13","modified":"2019-04-17 20:47:13","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":600,"height":428,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup-150x150.gif","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif","medium-width":366,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif","medium_large-width":600,"medium_large-height":428,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif","large-width":600,"large-height":428,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif","1536x1536-width":600,"1536x1536-height":428,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif","2048x2048-width":600,"2048x2048-height":428,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif","card_image-width":600,"card_image-height":428,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif","wide_image-width":600,"wide_image-height":428}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/04\/final-popup.gif"},{"acf_fc_layout":"content","content":"

    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<\/a>. You can also check out the Living Atlas dashboard<\/a> and layer<\/a> that inspired this blog.<\/p>\n

    Concluding thoughts<\/strong><\/h2>\n