{"id":128671,"date":"2018-04-18T22:28:53","date_gmt":"2018-04-18T22:28:53","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=128671"},"modified":"2024-11-11T12:37:44","modified_gmt":"2024-11-11T20:37:44","slug":"combining-arcade-and-html-for-a-real-life-pop-up-display","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display","title":{"rendered":"Combining Arcade and HTML for a Real-life Pop-up Display"},"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,22871,23351],"tags":[32551,43131,29091,28061],"industry":[],"product":[36551,36601],"class_list":["post-128671","blog","type-blog","status-publish","format-standard","hentry","category-arcade","category-mapping","category-state-government","category-transportation","tag-arcade","tag-arcade-expression","tag-html","tag-pop-ups","product-arcgis-online","product-developers"],"acf":{"flexible_content":[{"acf_fc_layout":"content","content":"

*Written by Ellen van den Berg, Esri Netherlands<\/strong><\/p>\n

Arcade expressions allow a wide array of on-the-fly customization for your maps. Arcade can be used across the ArcGIS platform, including in ArcGIS Online. You can use these expressions to create new values to be shown in your ArcGIS Online pop-ups, but they can also be used within the HTML code for further customization. This is the strategy we used in one of our more recent content services containing location markers<\/a> in the Netherlands. In this blog, we will describe how we did this.<\/p>\n

Imagine you are on a road trip and in the middle of the road your car breaks down. How are you going to describe where you are? In the Netherlands, location markers are placed along the highways to allow you to indicate your location. The markers have a specific look that everyone in the Netherlands will recognize. An example is shown in the image below.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":128691,"id":128691,"title":"Picture1","filename":"Picture1.jpg","filesize":66268,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture1","alt":"","author":"6461","description":"","caption":"Example of a location marker","name":"picture1","status":"inherit","uploaded_to":128671,"date":"2018-03-27 04:40:50","modified":"2018-04-17 20:07:55","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":640,"height":480,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","thumbnail-width":213,"thumbnail-height":160,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","medium-width":348,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","medium_large-width":640,"medium_large-height":480,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","large-width":640,"large-height":480,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","1536x1536-width":640,"1536x1536-height":480,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","2048x2048-width":640,"2048x2048-height":480,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","card_image-width":620,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture1.jpg","wide_image-width":640,"wide_image-height":480}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Each corner of the location marker describes information about the location. The following information can be found on the marker:<\/p>\n

    \n
  1. The number of the road<\/li>\n
  2. The side of the road, either Left (Li) or Right (Re)<\/li>\n
  3. The distance from the beginning of the road<\/li>\n
  4. The designation of the lane, for example an exit<\/li>\n<\/ol>\n"},{"acf_fc_layout":"image","image":{"ID":128711,"id":128711,"title":"Location Marker","filename":"Picture2.png","filesize":6216,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture2","alt":"","author":"6461","description":"","caption":"Information that is indicated on a location marker (source: https:\/\/www.bergnet.nl). ","name":"picture2","status":"inherit","uploaded_to":128671,"date":"2018-03-27 04:43:12","modified":"2018-04-17 20:10:24","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":480,"height":295,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","thumbnail-width":213,"thumbnail-height":131,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","medium-width":425,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","medium_large-width":480,"medium_large-height":295,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","large-width":480,"large-height":295,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","1536x1536-width":480,"1536x1536-height":295,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","2048x2048-width":480,"2048x2048-height":295,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","card_image-width":480,"card_image-height":295,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture2.png","wide_image-width":480,"wide_image-height":295}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    In ArcGIS Online we can perfectly describe this information in the pop-up. However, it would be nice to show this information in a familiar way in the form of this sign.<\/p>\n

    HTML Source code<\/strong><\/p>\n

    In order to create our customized pop-up, we opened the feature service with the location markers in the ArcGIS Online Map Viewer. By right-clicking on the layer, we were able to go to the \u201cConfigure Pop-up\u201d screen. For the Pop-up Contents Display we chose \u201cA custom attribute display\u201d and clicked \u201cConfigure\u201d to enable the display in which we were able to type our own text. There is also the option to view the HTML Source which can enabled by the following button:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":128731,"id":128731,"title":"Configure Popup HTML","filename":"Picture3.png","filesize":34906,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture3","alt":"","author":"6461","description":"","caption":"The HTML Source can be found in the lower left corner of the Custom Attribute Display.","name":"picture3","status":"inherit","uploaded_to":128671,"date":"2018-03-27 04:46:01","modified":"2018-04-17 20:10: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":1309,"height":322,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","thumbnail-width":213,"thumbnail-height":52,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","medium-width":464,"medium-height":114,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","medium_large-width":768,"medium_large-height":189,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","large-width":1309,"large-height":322,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","1536x1536-width":1309,"1536x1536-height":322,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","2048x2048-width":1309,"2048x2048-height":322,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","card_image-width":826,"card_image-height":203,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture3.png","wide_image-width":1309,"wide_image-height":322}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Creating a table<\/strong><\/p>\n

    The information that will be displayed in the pop-up is present in several fields of the data. In order to put this information in the marker, we chose to create a table to structure the data in a way that looks similar to the real-world signs. We started with the most noticeable features of the location marker, namely the green background with white letters. These colors are indicated in the table row information as can be seen in the source code below. Furthermore, the marker is not as wide as the pop-up, that is why we indicated a width of 50%.<\/p>\n

    <table style=”background-color:#2E746D; color:#FFFFFF; text-align:center; width:50%”><\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":128741,"id":128741,"title":"HTML in the Popup","filename":"Picture4.png","filesize":24409,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture4","alt":"","author":"6461","description":"","caption":"The HTML code starts with creating a table with the style of the marker.","name":"picture4","status":"inherit","uploaded_to":128671,"date":"2018-03-27 04:46:36","modified":"2018-04-17 20:11:58","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":575,"height":342,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","thumbnail-width":213,"thumbnail-height":127,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","medium-width":439,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","medium_large-width":575,"medium_large-height":342,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","large-width":575,"large-height":342,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","1536x1536-width":575,"1536x1536-height":342,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","2048x2048-width":575,"2048x2048-height":342,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","card_image-width":575,"card_image-height":342,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture4.png","wide_image-width":575,"wide_image-height":342}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    After this, we were able to start putting the information in the marker, but troubles arose\u2026<\/p>\n

    Road numbers<\/strong><\/p>\n

    The road number was present in our data in two fields, one containing the letter and one containing the number. We referred to these fields using curly brackets and placed them in the right cell of the table.<\/p>\n

    <td>{RoadLetter}{RoadNumber}<\/td><\/em><\/p>\n

    Unfortunately for us there was a catch: not all location markers are exactly the same! The location markers are placed along two types of roads: the \u201cA-roads\u201d, the highways, and the \u201cN-roads\u201d, the regional roads. The road numbers of highways on the markers have white letters, a red background and a white border. The regional roads require black letters a yellow background and no border.<\/p>\n

    Since the information to which markers these characteristics should apply are present in a field, the RoadLetter field, we were able to solve this problem using Arcade. In the Arcade expression we indicated that the hexagon value for the background-color should be a certain value if the RoadLetter is \u201cA\u201d and another value if it\u2019s \u201cN\u201d. If the RoadLetter is neither \u201cA\u201d nor \u201cN\u201d, we used the normal green background color, resulting in the following Arcade expression:<\/p>\n

     <\/p>\n

    IIf($feature.RoadLetter == “A”, “#96030A”, IIf($feature. RoadLetter == “N”, “#F4AE31”, “#2E746D”))<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":133621,"id":133621,"title":"Picture5a","filename":"Picture5a.png","filesize":67496,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture5a-2","alt":"","author":"6461","description":"","caption":"","name":"picture5a-2","status":"inherit","uploaded_to":128671,"date":"2018-04-05 18:41:09","modified":"2018-04-05 18:41:09","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":498,"height":658,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","thumbnail-width":151,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","medium-width":198,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","medium_large-width":498,"medium_large-height":658,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","large-width":498,"large-height":658,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","1536x1536-width":498,"1536x1536-height":658,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","2048x2048-width":498,"2048x2048-height":658,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","card_image-width":352,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5a.png","wide_image-width":498,"wide_image-height":658}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":133631,"id":133631,"title":"Picture5b","filename":"Picture5b.png","filesize":81853,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture5b-2","alt":"","author":"6461","description":"","caption":"Arcade expressions can be built below the Attribute Expressions heading in the pop-up configuration screen. The name of the expression to be used in the Custom Attribute Display can be found there as well.","name":"picture5b-2","status":"inherit","uploaded_to":128671,"date":"2018-04-05 18:41:15","modified":"2018-04-17 20:12:14","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":1123,"height":582,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","thumbnail-width":213,"thumbnail-height":110,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","medium-width":464,"medium-height":240,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","medium_large-width":768,"medium_large-height":398,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","large-width":1123,"large-height":582,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","1536x1536-width":1123,"1536x1536-height":582,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","2048x2048-width":1123,"2048x2048-height":582,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","card_image-width":826,"card_image-height":428,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png","wide_image-width":1123,"wide_image-height":582}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture5b.png"},{"acf_fc_layout":"content","content":"

    Similar expressions were made for the border color and text color, which resulted in many references to expressions in the HTML code.<\/p>\n

    <td style=” background-color:{expression\/expr0}; border-color:{expression\/expr1}; color:{expression\/expr2}”>{RoadLetter}{RoadNumber}<\/td><\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":133541,"id":133541,"title":"Picture6a","filename":"Picture6a.jpg","filesize":62721,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture6a-2","alt":"","author":"6461","description":"","caption":"Example of the different views of the road numbers. N-roads are shown in yellow (above) and A-roads in red (below).","name":"picture6a-2","status":"inherit","uploaded_to":128671,"date":"2018-04-05 18:37:12","modified":"2018-04-17 20:12:36","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":918,"height":536,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","thumbnail-width":213,"thumbnail-height":124,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","medium-width":447,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","medium_large-width":768,"medium_large-height":448,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","large-width":918,"large-height":536,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","1536x1536-width":918,"1536x1536-height":536,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","2048x2048-width":918,"2048x2048-height":536,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","card_image-width":796,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6a.jpg","wide_image-width":918,"wide_image-height":536}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":133551,"id":133551,"title":"Picture6b","filename":"Picture6b.jpg","filesize":66540,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture6b-2","alt":"","author":"6461","description":"","caption":"","name":"picture6b-2","status":"inherit","uploaded_to":128671,"date":"2018-04-05 18:37:16","modified":"2018-04-05 18:37:16","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":932,"height":544,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","thumbnail-width":213,"thumbnail-height":124,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","medium-width":447,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","medium_large-width":768,"medium_large-height":448,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","large-width":932,"large-height":544,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","1536x1536-width":932,"1536x1536-height":544,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","2048x2048-width":932,"2048x2048-height":544,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","card_image-width":797,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture6b.jpg","wide_image-width":932,"wide_image-height":544}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Side of the Road<\/strong><\/p>\n

    When we tackled the issue of indicating the road number on the sign properly, we moved on to the information showing the side of the road. In our data we were presented with the entire text, so either \u201cLeft\u201d or \u201cRight\u201d, while only an abbreviation is used on the sign. Luckily we were also able to solve this problem using Arcade:<\/p>\n

    IIf($feature.RoadSide == “Rechts”, “Re”, IIf($feature.RoadSide == “Links”, “Li”, $feature.RoadSide))<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":128791,"id":128791,"title":"Picture7","filename":"Picture7.png","filesize":153734,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture7","alt":"","author":"6461","description":"","caption":"You can test the Arcade expression to see if the correct result is displayed. In this case Left (Links) is indicated as \u201cLi\u201d as expected.","name":"picture7","status":"inherit","uploaded_to":128671,"date":"2018-03-27 04:49:59","modified":"2018-04-17 20:12:53","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":1503,"height":1139,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","thumbnail-width":213,"thumbnail-height":161,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","medium-width":344,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","medium_large-width":768,"medium_large-height":582,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","large-width":1425,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","1536x1536-width":1503,"1536x1536-height":1139,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","2048x2048-width":1503,"2048x2048-height":1139,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","card_image-width":614,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png","wide_image-width":1425,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture7.png"},{"acf_fc_layout":"content","content":"

    On to the next corner of the marker!<\/p>\n

    Distance<\/strong><\/p>\n

    The information for this part of the sign was almost completely present in the data, although there was a small challenge. The data included the distance from the beginning of the road using one decimal number, except for the distances with zero decimals. On the markers, however, these zeros are indicated as well. That is why an Arcade expression was used to find values that include a decimal number and add .0 to the ones that don\u2019t have a decimal number in the data. This shows how easily numbers can be converted with basic text manipulation without needing to make changes in the data.<\/p>\n

    IIf(Mid($feature.Distance, Find(“.”, $feature.Distance), 1) == “.”, $feature. Distance, $feature.Distance + “.0”)<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":128801,"id":128801,"title":"Picture8","filename":"Picture8.png","filesize":119721,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture8","alt":"","author":"6461","description":"","caption":"The Arcade expressions are referenced in the HTML code.","name":"picture8","status":"inherit","uploaded_to":128671,"date":"2018-03-27 04:50:37","modified":"2018-04-17 20:13:04","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":912,"height":548,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","thumbnail-width":213,"thumbnail-height":128,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","medium-width":434,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","medium_large-width":768,"medium_large-height":461,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","large-width":912,"large-height":548,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","1536x1536-width":912,"1536x1536-height":548,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","2048x2048-width":912,"2048x2048-height":548,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","card_image-width":774,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Picture8.png","wide_image-width":912,"wide_image-height":548}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Lane designation<\/strong><\/p>\n

    The last part of making up the marker included an indication for the lane designation, for example, if the road is an exit. This information is indicated with one letter on a yellow background with black letters. This extra letter is not always present and when it is not, you see the green background of the sign. We were able to show different layouts in a similar way as with the road numbers, using an Arcade expression. If there is no information in the field with the lane designation, the normal background is shown, otherwise, it should be yellow. The text color can be set to black anyway since it is not noticeable when there is no information.<\/p>\n

    IIf($feature.Letter == ” “, “#2E746D”, “#F4AE31”)<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":133651,"id":133651,"title":"Picture9a","filename":"Picture9a.png","filesize":2804,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture9a","alt":"","author":"6461","description":"","caption":"A location marker with a lane designation (above) and without a lane designation (below).","name":"picture9a","status":"inherit","uploaded_to":128671,"date":"2018-04-05 18:42:15","modified":"2018-04-17 20:13:37","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":169,"height":109,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","thumbnail-width":169,"thumbnail-height":109,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","medium-width":169,"medium-height":109,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","medium_large-width":169,"medium_large-height":109,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","large-width":169,"large-height":109,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","1536x1536-width":169,"1536x1536-height":109,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","2048x2048-width":169,"2048x2048-height":109,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","card_image-width":169,"card_image-height":109,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9a.png","wide_image-width":169,"wide_image-height":109}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":133661,"id":133661,"title":"Picture9b","filename":"Picture9b.png","filesize":2069,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture9b","alt":"","author":"6461","description":"","caption":"","name":"picture9b","status":"inherit","uploaded_to":128671,"date":"2018-04-05 18:42:21","modified":"2018-04-05 18:42:21","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":169,"height":109,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","thumbnail-width":169,"thumbnail-height":109,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","medium-width":169,"medium-height":109,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","medium_large-width":169,"medium_large-height":109,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","large-width":169,"large-height":109,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","1536x1536-width":169,"1536x1536-height":109,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","2048x2048-width":169,"2048x2048-height":109,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","card_image-width":169,"card_image-height":109,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture9b.png","wide_image-width":169,"wide_image-height":109}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Finishing up<\/strong><\/p>\n

    To finish up the pop-up, we added some more information that is not part of the sign, but can still be of interest to users. This includes information on how the marker is connected to the road and the type of marker for example. This information is presented in the form of a table without visible borders.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":154411,"id":154411,"title":"Final Popup","filename":"Picture10.png","filesize":57304,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\/picture10-2","alt":"","author":"6461","description":"","caption":"The final pop-up, first showing the sign and adding some additional information below.","name":"picture10-2","status":"inherit","uploaded_to":128671,"date":"2018-04-17 20:14:31","modified":"2018-04-17 20:14:49","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":875,"height":741,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","thumbnail-width":213,"thumbnail-height":180,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","medium-width":308,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","medium_large-width":768,"medium_large-height":650,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","large-width":875,"large-height":741,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","1536x1536-width":875,"1536x1536-height":741,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","2048x2048-width":875,"2048x2048-height":741,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","card_image-width":549,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Picture10.png","wide_image-width":875,"wide_image-height":741}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    All in all, seven Arcade expressions were used and referenced in the HTML code of the pop-up. It is possible to view the full HTML code and Arcade expressions if you access the configuration settings for the pop-up within the location markers<\/a> map. Hopefully, this blog has given you some ideas on how to increase the real-life experience of pop-ups using Arcade in HTML code. Please do share your own examples, I look forward to seeing them!<\/p>\n

    Note: For the purpose of this blog the field names were translated.<\/em><\/p>\n"}],"short_description":"Use a combination of Arcade and HTML in order to create a custom popup for your map. Esri Netherlands shows us how with this real-world tutorial.","authors":[{"ID":6461,"user_firstname":"Lisa","user_lastname":"Berry","nickname":"Lisa Berry","user_nicename":"lisa_berry","display_name":"Lisa Berry","user_email":"LBerry@esri.com","user_url":"","user_registered":"2018-03-02 00:18:23","user_description":"I am a Principal GIS Engineer and ArcGIS Living Atlas Evangelist at Esri. I promote all things Living Atlas, ArcGIS Online, ArcGIS Arcade, Smart Mapping, python, and cartography. I also specialize in socioeconomic and demographic datasets within Living Atlas, and how to visualize them.","user_avatar":""}],"related_articles":[{"ID":118911,"post_author":"4291","post_date":"2018-03-20 20:52:32","post_date_gmt":"2018-03-20 20:52:32","post_content":"","post_title":"Try an Arcade expression","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"try-arcade-expression","to_ping":"","pinged":"","post_modified":"2024-11-11 12:37:57","post_modified_gmt":"2024-11-11 20:37:57","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=118911","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":74571,"post_author":"6461","post_date":"2016-12-15 21:49:44","post_date_gmt":"2016-12-15 21:49:44","post_content":"","post_title":"Use Arcade Expressions to Map Your Ideas","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"use-arcade-expressions-to-map-your-ideas","to_ping":"","pinged":"","post_modified":"2024-11-11 12:40:53","post_modified_gmt":"2024-11-11 20:40:53","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/use-arcade-expressions-to-map-your-ideas\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":82321,"post_author":"7641","post_date":"2026-03-18 18:01:46","post_date_gmt":"2026-03-19 01:01:46","post_content":"","post_title":"Use Arcade to rotate symbols in web maps","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"arcade-rotate-symbols","to_ping":"","pinged":"","post_modified":"2026-04-13 23:18:30","post_modified_gmt":"2026-04-14 06:18:30","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/using-arcade-to-rotate-symbols-in-web-maps\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":77721,"post_author":"6981","post_date":"2017-06-28 08:18:03","post_date_gmt":"2017-06-28 08:18:03","post_content":"","post_title":"What's New in Arcade (June 2017)","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcade-june-2017","to_ping":"","pinged":"","post_modified":"2024-11-11 12:39:34","post_modified_gmt":"2024-11-11 20:39:34","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/whats-new-in-arcade-june-2017\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":76941,"post_author":"4161","post_date":"2017-05-15 18:04:56","post_date_gmt":"2017-05-15 18:04:56","post_content":"","post_title":"Use Arcade Expressions to Map the Land to Improvement Ratios in Your Area","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"use-arcade-expressions-to-map-the-land-to-improvement-ratios-in-your-area","to_ping":"","pinged":"","post_modified":"2024-11-11 12:40:14","post_modified_gmt":"2024-11-11 20:40:14","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/use-arcade-expressions-to-map-the-land-to-improvement-ratios-in-your-area\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/03\/Card-1.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Hero_noLegend-2.png"},"yoast_head":"\nCombining Arcade and HTML for a Real-life Pop-up Display<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Combining Arcade and HTML for a Real-life Pop-up Display\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-11T20:37:44+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\"},\"author\":{\"name\":\"Lisa Berry\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6f2255e7fbc5bc8827910ce81e212a2e\"},\"headline\":\"Combining Arcade and HTML for a Real-life Pop-up Display\",\"datePublished\":\"2018-04-18T22:28:53+00:00\",\"dateModified\":\"2024-11-11T20:37:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\"},\"wordCount\":9,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"arcade\",\"arcade expression\",\"HTML\",\"pop-ups\"],\"articleSection\":[\"Arcade\",\"Mapping\",\"State and Provincial Government\",\"Transportation\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\",\"name\":\"Combining Arcade and HTML for a Real-life Pop-up Display\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-04-18T22:28:53+00:00\",\"dateModified\":\"2024-11-11T20:37:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Combining Arcade and HTML for a Real-life Pop-up Display\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6f2255e7fbc5bc8827910ce81e212a2e\",\"name\":\"Lisa Berry\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/UC-2024-Plenary-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/UC-2024-Plenary-213x200.png\",\"caption\":\"Lisa Berry\"},\"description\":\"I am a Principal GIS Engineer and ArcGIS Living Atlas Evangelist at Esri. I promote all things Living Atlas, ArcGIS Online, ArcGIS Arcade, Smart Mapping, python, and cartography. I also specialize in socioeconomic and demographic datasets within Living Atlas, and how to visualize them.\",\"sameAs\":[\"https:\/\/www.instagram.com\/lisaberry_gis\/\",\"lisaberrygis\",\"https:\/\/x.com\/lisaberry_gis\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/lisa_berry\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Combining Arcade and HTML for a Real-life Pop-up Display","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display","og_locale":"en_US","og_type":"article","og_title":"Combining Arcade and HTML for a Real-life Pop-up Display","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-11-11T20:37:44+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display"},"author":{"name":"Lisa Berry","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6f2255e7fbc5bc8827910ce81e212a2e"},"headline":"Combining Arcade and HTML for a Real-life Pop-up Display","datePublished":"2018-04-18T22:28:53+00:00","dateModified":"2024-11-11T20:37:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display"},"wordCount":9,"commentCount":1,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["arcade","arcade expression","HTML","pop-ups"],"articleSection":["Arcade","Mapping","State and Provincial Government","Transportation"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display","name":"Combining Arcade and HTML for a Real-life Pop-up Display","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-04-18T22:28:53+00:00","dateModified":"2024-11-11T20:37:44+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/combining-arcade-and-html-for-a-real-life-pop-up-display#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Combining Arcade and HTML for a Real-life Pop-up Display"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/6f2255e7fbc5bc8827910ce81e212a2e","name":"Lisa Berry","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/UC-2024-Plenary-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/UC-2024-Plenary-213x200.png","caption":"Lisa Berry"},"description":"I am a Principal GIS Engineer and ArcGIS Living Atlas Evangelist at Esri. I promote all things Living Atlas, ArcGIS Online, ArcGIS Arcade, Smart Mapping, python, and cartography. I also specialize in socioeconomic and demographic datasets within Living Atlas, and how to visualize them.","sameAs":["https:\/\/www.instagram.com\/lisaberry_gis\/","lisaberrygis","https:\/\/x.com\/lisaberry_gis"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/lisa_berry"}]}},"text_date":"April 18, 2018","author_name":"Lisa Berry","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/lisa_berry","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Hero_noLegend-2.png","primary_product":"ArcGIS Online","tag_data":[{"term_id":32551,"name":"arcade","slug":"arcade","term_group":0,"term_taxonomy_id":32551,"taxonomy":"post_tag","description":"","parent":0,"count":113,"filter":"raw"},{"term_id":43131,"name":"arcade expression","slug":"arcade-expression","term_group":0,"term_taxonomy_id":43131,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":29091,"name":"HTML","slug":"html","term_group":0,"term_taxonomy_id":29091,"taxonomy":"post_tag","description":"","parent":0,"count":12,"filter":"raw"},{"term_id":28061,"name":"pop-ups","slug":"pop-ups","term_group":0,"term_taxonomy_id":28061,"taxonomy":"post_tag","description":"","parent":0,"count":39,"filter":"raw"}],"category_data":[{"term_id":777102,"name":"Arcade","slug":"arcade","term_group":0,"term_taxonomy_id":777102,"taxonomy":"category","description":"","parent":0,"count":100,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2716,"filter":"raw"},{"term_id":22871,"name":"State and Provincial Government","slug":"state-government","term_group":0,"term_taxonomy_id":22871,"taxonomy":"category","description":"","parent":0,"count":333,"filter":"raw"},{"term_id":23351,"name":"Transportation","slug":"transportation","term_group":0,"term_taxonomy_id":23351,"taxonomy":"category","description":"","parent":0,"count":217,"filter":"raw"}],"product_data":[{"term_id":36551,"name":"ArcGIS Online","slug":"arcgis-online","term_group":0,"term_taxonomy_id":36551,"taxonomy":"product","description":"","parent":0,"count":2445,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":772,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=arcgis-online","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/128671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/6461"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=128671"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/128671\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=128671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=128671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=128671"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=128671"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=128671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}