{"id":993042,"date":"2020-09-01T08:30:12","date_gmt":"2020-09-01T15:30:12","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=993042"},"modified":"2020-08-31T17:46:41","modified_gmt":"2020-09-01T00:46:41","slug":"generate-popup-templates-for-data-exploration","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration","title":{"rendered":"Generate popup templates for data exploration"},"author":6561,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191,22941],"tags":[34601,212872,24581,717781],"industry":[],"product":[36831,36601],"class_list":["post-993042","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-data-exploration","tag-popups","tag-smart-mapping","tag-whats-new-july-2020","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Generate good default popup templates for unfamiliar layers in data exploration web apps.","flexible_content":[{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-the-arcgis-api-for-javascript-july-2020\/\">Version 4.16<\/a> of the <a href=\"https:\/\/developers.arcgis.com\/javascript\/\">ArcGIS API for JavaScript<\/a> (ArcGIS JS API) quietly added a couple of methods for generating default <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-PopupTemplate.html\">popup templates<\/a> based on a layer&#8217;s <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-Renderer.html\">renderer<\/a>.<\/p>\n<p>These reside in the <code>esri\/smartMapping\/popup\/<\/code> namespace. <\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-popup-templates.html#getTemplatesl\">esri\/smartMapping\/popup\/templates.getTemplates()<\/a><\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-popup-clusters.html#getTemplates\">esri\/smartMapping\/popup\/clusters.getTemplates()<\/a><\/li>\n<\/ul>\n<p>All you have to do is provide a layer, and the method will respond with one or more suggested popup templates that pair nicely with the layer&#8217;s renderer.<\/p>\n<h2>Design popups with purpose<\/h2>\n<p>You should always configure popups with purpose. Keep the end user in mind. What do they want to know about the data? How do they want it presented to them? The <code>getTemplates<\/code> methods should not be used as a lazy way to create a popup template for the sake of saving time.<\/p>\n<p>In most development scenarios you are unlikely to need these methods at all. It&#8217;s far more advisable to consider the end user and design a popup from scratch, so you have full control over the content. <\/p>\n<p>Furthermore, you are more likely to be familiar with the attributes available in the layer. If you know the layer&#8217;s data, you can easily create a popup template referencing the attributes of most interest to your users. See the snippet and map below for an example of creating a popup with a bar chart that compares three attributes.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">layer.popupTemplate = {\r\n  title: <span style=\"color: #d14\">\"{COUNTY}, {STATE}\"<\/span>,\r\n  content: [{\r\n    type: <span style=\"color: #d14\">\"media\"<\/span>,\r\n    mediaInfos: [\r\n      {\r\n        type: <span style=\"color: #d14\">\"column-chart\"<\/span>,\r\n        title: <span style=\"color: #d14\">\"Number of households with one, two, or three registered vehicles\"<\/span>,\r\n        value: {\r\n          fields: [\r\n            <span style=\"color: #d14\">\"ONE_VEHICLE\"<\/span>,\r\n            <span style=\"color: #d14\">\"TWO_VEHICLES\"<\/span>,\r\n            <span style=\"color: #d14\">\"THREE_VEHICLES\"<\/span>\r\n          ]\r\n        }\r\n      }\r\n    ]\r\n  }]\r\n};\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":982102,"id":982102,"title":"Screen Shot 2020-08-18 at 3.33.54 PM","filename":"Screen-Shot-2020-08-18-at-3.33.54-PM.png","filesize":830853,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-data-for-interactive-charts-using-arcade-in-popups\/screen-shot-2020-08-18-at-3-33-54-pm","alt":"This map visualizes each census tract based on the most common number of vehicles in each household. The popup displays a column chart to compare the number of 1-vehicle households, 2-vehicle households, and 3-vehicle households.","author":"6561","description":"","caption":"This map visualizes each census tract based on the predominant number of vehicles in each household. The popup displays a column chart to compare the number of 1-vehicle households, 2-vehicle households, and 3-vehicle households.","name":"screen-shot-2020-08-18-at-3-33-54-pm","status":"inherit","uploaded_to":976672,"date":"2020-08-18 22:41:00","modified":"2020-08-31 22:48:27","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":2400,"height":1574,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM.png","medium-width":398,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM.png","medium_large-width":768,"medium_large-height":504,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM.png","large-width":1647,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-1536x1007.png","1536x1536-width":1536,"1536x1536-height":1007,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-2048x1343.png","2048x2048-width":2048,"2048x2048-height":1343,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-709x465.png","card_image-width":709,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-18-at-3.33.54-PM-1647x1080.png","wide_image-width":1647,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/codepen.io\/kekenes\/pen\/abNmzKK?editors=0010"},{"acf_fc_layout":"content","content":"<h2>Smart popup templates for data exploration<\/h2>\n<p>So why bother generating a default popup at all? The primary case is for data exploration apps. These apps may take an unfamiliar layer as input and generate a renderer based on parameters indicated by the user for the purpose of exploring the data.<\/p>\n<p>That&#8217;s where the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/guide\/visualization-overview\/#smart-mapping-apis\">Smart Mapping APIs<\/a> come into play. These APIs provide a series of helper functions that generate good default renderers based on field values (or expressions). These renderers use color schemes best suited for the map&#8217;s basemap and set break points at meaningful stops based on statistics returned from the layer.<\/p>\n<p>The ArcGIS JS API documentation contains <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/?search=smartmapping\">more than a dozen samples demonstrating how these Smart Mapping methods work<\/a>. These methods also power the layer <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/create-maps\/change-style.htm\">styling options<\/a> in the ArcGIS Online map viewer.<\/p>\n<p>The <code>getTemplates<\/code> methods can be used to generate popup templates that match the renderers generated in a Smart Mapping workflow.<\/p>\n<h2>Default popup templates<\/h2>\n<p>Alternatively, you could use the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Popup.html#defaultPopupTemplateEnabled\">default popup template<\/a> in data exploration apps.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":994632,"id":994632,"title":"popup-default","filename":"popup-default.png","filesize":44423,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\/popup-default","alt":"The default popup template for a layer displays a scrollable table of all the attributes and values in the feature. This template can help developers familiarize themselves with the data, but it shouldn't be used for production apps.","author":"6561","description":"","caption":"The default popup template for a layer displays a scrollable table of all the attributes and values in the feature. This template can help developers familiarize themselves with the data, but it shouldn't be used for production apps.","name":"popup-default","status":"inherit","uploaded_to":993042,"date":"2020-08-28 22:15:29","modified":"2020-08-28 22:16:46","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":650,"height":595,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default.png","medium-width":285,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default.png","medium_large-width":650,"medium_large-height":595,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default.png","large-width":650,"large-height":595,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default.png","1536x1536-width":650,"1536x1536-height":595,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default.png","2048x2048-width":650,"2048x2048-height":595,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default-508x465.png","card_image-width":508,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/popup-default.png","wide_image-width":650,"wide_image-height":595}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>But this overwhelms the user and doesn&#8217;t clearly describe the information the user is exploring. The default popup template is intended for developers as they get to know data for use in an application. It shouldn&#8217;t be presented in a production app for conveying information to an end user.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Generate better popup templates<\/h2>\n<p>The Smart Mapping APIs enable end users to ask a question about their data.<\/p>\n<ul>\n<li>Where are features located?<\/li>\n<li>What do they represent?<\/li>\n<li>How much of an attribute is present?<\/li>\n<li>When did the phenomena occur?<\/li>\n<\/ul>\n<p><strong>The resulting renderer will show spatial patterns<\/strong> that answer the user&#8217;s question about the layer as a whole. <strong>The popup answers these questions for an individual feature<\/strong> much better than a renderer, even with the aid of a legend. <\/p>\n<p>For example, the following map answers the question, <em>What is the temperature in the United States?<\/em><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":994342,"id":994342,"title":"Screen Shot 2020-08-28 at 1.59.02 PM","filename":"Screen-Shot-2020-08-28-at-1.59.02-PM-scaled.png","filesize":2348445,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\/screen-shot-2020-08-28-at-1-59-02-pm","alt":"The renderer, or style of the layer, helps us see patterns for one or more attributes. In this map, we can clearly see a pattern of temperatures more than 100 degrees F in the southwest and midwest. However, the exact temperature is unknown.","author":"6561","description":"","caption":"In this map, we can clearly see a pattern of temperatures more than 100 degrees F in the southwest and midwest. However, the exact temperature of individual cities is not obvious. If you want to know the exact temperature of Indio, CA, all you know is that it is probably higher than 100 degrees F. ","name":"screen-shot-2020-08-28-at-1-59-02-pm","status":"inherit","uploaded_to":993042,"date":"2020-08-28 21:00:14","modified":"2020-08-31 22:50:32","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":2560,"height":1270,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-scaled.png","medium-width":464,"medium-height":230,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-scaled.png","medium_large-width":768,"medium_large-height":381,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-scaled.png","large-width":1920,"large-height":953,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-1536x762.png","1536x1536-width":1536,"1536x1536-height":762,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-2048x1016.png","2048x2048-width":2048,"2048x2048-height":1016,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-826x410.png","card_image-width":826,"card_image-height":410,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-1920x952.png","wide_image-width":1920,"wide_image-height":952}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.59.02-PM-scaled.png"},{"acf_fc_layout":"content","content":"<p>The renderer, or style, of the layer helps us see overall patterns where it is warm or cold. However, no matter the renderer type, whether it&#8217;s class breaks, graduated symbols, or continuous color, it is nearly impossible to know the exact value of a numeric attribute in a feature even with the help of a legend.<\/p>\n<p>Instead of overwhelming the user with a default popup that requires them to dig for the answer to their question, you can use the <code>getTemplates<\/code> method to generate a minimalist popup template that gets to the point. Just provide a layer and the method does the rest of the work.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #998;font-style: italic\">\/\/ Sets a suggested popupTemplate on the layer based on its renderer<\/span>\r\npopupTemplateCreator.getTemplates({\r\n  layer: featureLayer\r\n}).then(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>popupTemplateResponse<\/span>)<\/span>{\r\n  <span style=\"color: #333;font-weight: bold\">if<\/span> ( popupTemplateResponse.primaryTemplate ){\r\n    featureLayer.popupTemplate = popupTemplateResponse.primaryTemplate.value;\r\n  }\r\n}).catch(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>error<\/span>)<\/span>{\r\n  <span style=\"color: #0086b3\">console<\/span>.error(error);\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":994392,"id":994392,"title":"Screen Shot 2020-08-28 at 1.56.40 PM","filename":"Screen-Shot-2020-08-28-at-1.56.40-PM.png","filesize":73477,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\/screen-shot-2020-08-28-at-1-56-40-pm","alt":"The getTemplates method generates a popup that provides minimalist information about the data required for rendering the layer.","author":"6561","description":"","caption":"The getTemplates method generates a popup that provides minimalist information about the data required for rendering the layer. Now we can see the exact temperature for Indio, CA.","name":"screen-shot-2020-08-28-at-1-56-40-pm","status":"inherit","uploaded_to":993042,"date":"2020-08-28 21:02:41","modified":"2020-08-28 23:37:36","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":2512,"height":710,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM.png","medium-width":464,"medium-height":131,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM.png","medium_large-width":768,"medium_large-height":217,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM.png","large-width":1920,"large-height":543,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM-1536x434.png","1536x1536-width":1536,"1536x1536-height":434,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM-2048x579.png","2048x2048-width":2048,"2048x2048-height":579,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM-826x233.png","card_image-width":826,"card_image-height":233,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM-1920x543.png","wide_image-width":1920,"wide_image-height":543}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-1.56.40-PM.png"},{"acf_fc_layout":"content","content":"<p>The resulting popup provides the exact value of a feature based on the renderer. Nothing more. Nothing less. That may be all your user needs in their data exploration workflow.<\/p>\n<h2>Multivariate styles<\/h2>\n<p>More complicated multivariate renderers may contain information from two or more fields or expressions. This is the case for renderers that have more than one visual variable, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-predominance.html\">predominance<\/a> renderer, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-DotDensityRenderer.html\">dot density<\/a> renderer, and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-renderers-relationship.html\">relationship<\/a> renderer.<\/p>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-predominance\/index.html\">following sample<\/a> from the ArcGIS JS API documentation uses the suggested default popup template for the predominance renderer as determined by the <code>getTemplates<\/code> method. <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":994542,"id":994542,"title":"Screen Shot 2020-08-28 at 2.47.09 PM","filename":"Screen-Shot-2020-08-28-at-2.47.09-PM.png","filesize":415196,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\/screen-shot-2020-08-28-at-2-47-09-pm","alt":"The suggested popup template for a layer with a predominance layer.","author":"6561","description":"","caption":"","name":"screen-shot-2020-08-28-at-2-47-09-pm","status":"inherit","uploaded_to":993042,"date":"2020-08-28 21:47:23","modified":"2020-08-28 23:54:31","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":2452,"height":1368,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM.png","medium-width":464,"medium-height":259,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM.png","medium_large-width":768,"medium_large-height":428,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM.png","large-width":1920,"large-height":1071,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM-1536x857.png","1536x1536-width":1536,"1536x1536-height":857,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM-2048x1143.png","2048x2048-width":2048,"2048x2048-height":1143,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM-826x461.png","card_image-width":826,"card_image-height":461,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.47.09-PM-1920x1071.png","wide_image-width":1920,"wide_image-height":1071}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/visualization-sm-predominance\/index.html"},{"acf_fc_layout":"content","content":"<p>The template for predominance renderer provides a lot more information about each feature because the renderer requires more fields to answer the question, <em>What is the most common decade in which homes were built in this area?<\/em><\/p>\n<p>In fact, the <code>getTemplates<\/code> method returns multiple secondary popup templates for predominance renderer. The example below shows one with a pie chart.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":994552,"id":994552,"title":"Screen Shot 2020-08-28 at 2.51.35 PM","filename":"Screen-Shot-2020-08-28-at-2.51.35-PM.png","filesize":256053,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\/screen-shot-2020-08-28-at-2-51-35-pm","alt":"A popup showing a secondary popup template with a pie chart that matches a predominance renderer.","author":"6561","description":"","caption":"","name":"screen-shot-2020-08-28-at-2-51-35-pm","status":"inherit","uploaded_to":993042,"date":"2020-08-28 21:53:41","modified":"2020-08-28 23:54: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":1998,"height":1176,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM.png","medium-width":443,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM.png","medium_large-width":768,"medium_large-height":452,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM.png","large-width":1835,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM-1536x904.png","1536x1536-width":1536,"1536x1536-height":904,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM.png","2048x2048-width":1998,"2048x2048-height":1176,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM-790x465.png","card_image-width":790,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM-1835x1080.png","wide_image-width":1835,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-2.51.35-PM.png"},{"acf_fc_layout":"content","content":"<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\"><span style=\"color: #998;font-style: italic\">\/\/ Sets a suggested popupTemplate on the layer based on its renderer<\/span>\r\npopupTemplateCreator.getTemplates({\r\n  layer: featureLayer\r\n}).then(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>popupTemplateResponse<\/span>)<\/span>{\r\n\r\n  <span style=\"color: #998;font-style: italic\">\/\/ If available, applies a secondary template with a pie chart<\/span>\r\n  <span style=\"color: #998;font-style: italic\">\/\/ The number of secondary templates depends on the input renderer<\/span>\r\n  <span style=\"color: #998;font-style: italic\">\/\/ Sometimes none are returned<\/span>\r\n  featureLayer.popupTemplate = popupTemplateResponse.secondaryTemplates[5].value;\r\n\r\n}).catch(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>error<\/span>)<\/span>{\r\n  <span style=\"color: #0086b3\">console<\/span>.error(error);\r\n});\r\n<\/code><\/pre>\n<h2>Generate popup templates for point clusters<\/h2>\n<p>You can define popup templates for <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#\">clustered<\/a> layers using the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#popupTemplate\">featureReduction.popupTemplate<\/a>. This template allows you to present summary information about features in the cluster based on fields used in the layer&#8217;s renderer.<\/p>\n<p>Just like the layer&#8217;s popup template, you can create this popup template from scratch with a limited set of aggregate fields determined by the layer&#8217;s renderer. Read the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-support-FeatureReductionCluster.html#popupTemplate\">FeatureReductionCluster.popupTemplate<\/a> documentation for more information about aggregate fields.<\/p>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-smartMapping-popup-clusters.html\">esri\/smartMapping\/popup\/clusters<\/a> module, however, allows you to generate a good default template for any layer style where clustering is (or will be) enabled on a layer. Just generate the template and set the resulting template in <code>layer.featureReduction.popupTemplate<\/code>.<\/p>\n<pre><code style=\"padding: 0.5em;color: #333;background: #f8f8f8\">clusterPopupTemplateCreator.getTemplates({\r\n  layer: featureLayer\r\n}).then(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>popupTemplateResponse<\/span>)<\/span>{\r\n  <span style=\"color: #333;font-weight: bold\">const<\/span> featureReduction = featureLayer.featureReduction.clone();\r\n  featureReduction.popupTemplate = popupTemplateResponse.primaryTemplate.value;\r\n  featureLayer.featureReduction = featureReduction;\r\n}).catch(<span><span style=\"color: #333;font-weight: bold\">function<\/span>(<span>error<\/span>)<\/span>{\r\n  <span style=\"color: #0086b3\">console<\/span>.error(error);\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":994562,"id":994562,"title":"clustering-types-popup","filename":"clustering-types-popup.png","filesize":18069,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\/clustering-types-popup","alt":"The suggested popup template for a clustered layer with a UniqueValueRenderer. By default, this popup displays the feature count and the predominant value or type of features in the cluster.","author":"6561","description":"","caption":"The suggested popup template for a clustered layer with a UniqueValueRenderer. By default, this popup displays the feature count and the predominant value or type of features in the cluster.","name":"clustering-types-popup","status":"inherit","uploaded_to":993042,"date":"2020-08-28 22:02:44","modified":"2020-08-28 23:50:16","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":500,"height":284,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup.png","medium-width":460,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup.png","medium_large-width":500,"medium_large-height":284,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup.png","large-width":500,"large-height":284,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup.png","1536x1536-width":500,"1536x1536-height":284,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup.png","2048x2048-width":500,"2048x2048-height":284,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup.png","card_image-width":500,"card_image-height":284,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/clustering-types-popup.png","wide_image-width":500,"wide_image-height":284}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-filter\/index.html"},{"acf_fc_layout":"content","content":"<p>Check out the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/featurereduction-cluster-filter\/index.html\">Point clustering &#8211; generate suggested configuration<\/a> sample in the ArcGIS JS API documentation to learn more about this workflow.<\/p>\n<h2>Final thoughts<\/h2>\n<p>As stated earlier, you should be considerate when defining your own popup content, just as you should make deliberate choices about styling the layer&#8217;s renderer. The popup template generators are only intended to either be a starting point to get to know the data in an unknown layer, or for generating popups for data exploration applications.<\/p>\n<p>In most cases, you should allow the map author to create popups in the ArcGIS Online map viewer, or directly in the web app using JavaScript. If you need some inspiration, I suggest you browse the maps and layers from the <a href=\"https:\/\/livingatlas.arcgis.com\/en\/home\/\">Living Atlas<\/a>. This site contains curated content with many examples of scenario-specific and informative popups.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":994572,"id":994572,"title":"Screen Shot 2020-08-28 at 3.06.18 PM","filename":"Screen-Shot-2020-08-28-at-3.06.18-PM.png","filesize":68747,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\/screen-shot-2020-08-28-at-3-06-18-pm","alt":"The popup defined on the Current Weather and Wind Station Data layer in the Living Atlas. The Living Atlas contains hundreds of authoritative layers with popups already configured and ready to use in production web apps.","author":"6561","description":"","caption":"The popup defined on the Current Weather and Wind Station Data layer in the Living Atlas. The Living Atlas contains hundreds of authoritative layers with popups already configured and ready to use in production web apps.","name":"screen-shot-2020-08-28-at-3-06-18-pm","status":"inherit","uploaded_to":993042,"date":"2020-08-28 22:06:34","modified":"2020-08-28 23:53:34","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":2002,"height":660,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM.png","medium-width":464,"medium-height":153,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM.png","medium_large-width":768,"medium_large-height":253,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM.png","large-width":1920,"large-height":633,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM-1536x506.png","1536x1536-width":1536,"1536x1536-height":506,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM.png","2048x2048-width":2002,"2048x2048-height":660,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM-826x272.png","card_image-width":826,"card_image-height":272,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM-1920x633.png","wide_image-width":1920,"wide_image-height":633}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/08\/Screen-Shot-2020-08-28-at-3.06.18-PM.png"}],"authors":[{"ID":6561,"user_firstname":"Kristian","user_lastname":"Ekenes","nickname":"Kristian Ekenes","user_nicename":"kekenes","display_name":"Kristian Ekenes","user_email":"KEkenes@esri.com","user_url":"https:\/\/github.com\/ekenes","user_registered":"2018-03-02 00:18:32","user_description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"related_articles":[{"ID":199072,"post_author":"6561","post_date":"2018-06-05 08:00:08","post_date_gmt":"2018-06-05 08:00:08","post_content":"","post_title":"Generate Arcade expressions for data exploration web apps","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"generate-arcade-expressions-for-data-exploration-web-apps","to_ping":"","pinged":"","post_modified":"2024-11-11 12:37:33","post_modified_gmt":"2024-11-11 20:37:33","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=199072","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":976672,"post_author":"6561","post_date":"2020-08-19 08:30:17","post_date_gmt":"2020-08-19 15:30:17","post_content":"","post_title":"Generate data for interactive charts using Arcade in popups","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"generate-data-for-interactive-charts-using-arcade-in-popups","to_ping":"","pinged":"","post_modified":"2024-11-01 00:17:24","post_modified_gmt":"2024-11-01 07:17:24","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=976672","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":321742,"post_author":"6561","post_date":"2018-10-01 08:00:52","post_date_gmt":"2018-10-01 15:00:52","post_content":"","post_title":"Generating Arcade expressions: what Smart Mapping does for you","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"generating-arcade-expressions-what-smart-mapping-does-for-you","to_ping":"","pinged":"","post_modified":"2024-11-11 12:37:22","post_modified_gmt":"2024-11-11 20:37:22","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=321742","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":71481,"post_author":"6561","post_date":"2016-03-28 08:00:39","post_date_gmt":"2016-03-28 08:00:39","post_content":"","post_title":"Using Smart Mapping in custom web apps","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"using-smart-mapping-in-custom-web-apps","to_ping":"","pinged":"","post_modified":"2018-05-25 22:44:29","post_modified_gmt":"2018-05-25 22:44:29","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/using-smart-mapping-in-custom-web-apps\/","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/card.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/banner-2.jpg"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Generate popup templates for data exploration<\/title>\n<meta name=\"description\" content=\"Learn how to generate good default popup templates for unfamiliar layers in data exploration web maps.\" \/>\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\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Generate popup templates for data exploration\" \/>\n<meta property=\"og:description\" content=\"Learn how to generate good default popup templates for unfamiliar layers in data exploration web maps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\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\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Generate popup templates for data exploration\",\"datePublished\":\"2020-09-01T15:30:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\"},\"wordCount\":6,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"data exploration\",\"popups\",\"smart mapping\",\"what's new july 2020\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\",\"name\":\"Generate popup templates for data exploration\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2020-09-01T15:30:12+00:00\",\"description\":\"Learn how to generate good default popup templates for unfamiliar layers in data exploration web maps.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Generate popup templates for data exploration\"}]},{\"@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\/5469f723fbfb78138efbb1da56e6aa9b\",\"name\":\"Kristian Ekenes\",\"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\/2021\/10\/ekenes-zurich-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png\",\"caption\":\"Kristian Ekenes\"},\"description\":\"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.\",\"sameAs\":[\"https:\/\/github.com\/ekenes\",\"https:\/\/www.linkedin.com\/in\/kristian-ekenes\/\",\"https:\/\/x.com\/kekenes\"],\"gender\":\"male\",\"jobTitle\":\"Principal Product Engineer\",\"worksFor\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Generate popup templates for data exploration","description":"Learn how to generate good default popup templates for unfamiliar layers in data exploration web maps.","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\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration","og_locale":"en_US","og_type":"article","og_title":"Generate popup templates for data exploration","og_description":"Learn how to generate good default popup templates for unfamiliar layers in data exploration web maps.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","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\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Generate popup templates for data exploration","datePublished":"2020-09-01T15:30:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration"},"wordCount":6,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["data exploration","popups","smart mapping","what's new july 2020"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration","name":"Generate popup templates for data exploration","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2020-09-01T15:30:12+00:00","description":"Learn how to generate good default popup templates for unfamiliar layers in data exploration web maps.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/generate-popup-templates-for-data-exploration#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Generate popup templates for data exploration"}]},{"@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\/5469f723fbfb78138efbb1da56e6aa9b","name":"Kristian Ekenes","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\/2021\/10\/ekenes-zurich-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/10\/ekenes-zurich-213x200.png","caption":"Kristian Ekenes"},"description":"Kristian Ekenes is a Principal Product Engineer at Esri specializing in data visualization on the web. He works on the ArcGIS Maps SDK for JavaScript, ArcGIS Arcade, and Map Viewer in ArcGIS Online. Kristian's work focuses on researching and developing new and innovative data visualization capabilities of geospatial data in web maps, Arcade integration in web maps, and applications of generative AI assistants in web maps. Prior to joining Esri, he worked as a GIS Specialist for an environmental consulting company. Kristian has degrees from Brigham Young University and Arizona State University.","sameAs":["https:\/\/github.com\/ekenes","https:\/\/www.linkedin.com\/in\/kristian-ekenes\/","https:\/\/x.com\/kekenes"],"gender":"male","jobTitle":"Principal Product Engineer","worksFor":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes"}]}},"text_date":"September 1, 2020","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2020\/09\/banner-2.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":34601,"name":"data exploration","slug":"data-exploration","term_group":0,"term_taxonomy_id":34601,"taxonomy":"post_tag","description":"","parent":0,"count":14,"filter":"raw"},{"term_id":212872,"name":"popups","slug":"popups","term_group":0,"term_taxonomy_id":212872,"taxonomy":"post_tag","description":"","parent":0,"count":12,"filter":"raw"},{"term_id":24581,"name":"smart mapping","slug":"smart-mapping","term_group":0,"term_taxonomy_id":24581,"taxonomy":"post_tag","description":"","parent":0,"count":81,"filter":"raw"},{"term_id":717781,"name":"what's new july 2020","slug":"whats-new-july-2020","term_group":0,"term_taxonomy_id":717781,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":422,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/993042","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\/6561"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=993042"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/993042\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=993042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=993042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=993042"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=993042"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=993042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}