{"id":1622562,"date":"2022-06-27T09:10:12","date_gmt":"2022-06-27T16:10:12","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1622562"},"modified":"2024-04-12T03:39:16","modified_gmt":"2024-04-12T10:39:16","slug":"how-to-create-heat-maps-that-work-at-all-scales","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales","title":{"rendered":"How to create heat maps that work at all scales"},"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":[758301,761092,765772,34771,765092],"industry":[],"product":[761642,36831,36601],"class_list":["post-1622562","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-data-viz","tag-heat-map","tag-heatmap","tag-scale","tag-whats-new-june-2022","product-platform","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Heat maps are notoriously sensitive to scale. Learn four things you should consider when creating heat maps so they work across all scale levels.","flexible_content":[{"acf_fc_layout":"content","content":"<p><a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/4.24\/\">Version 4.24<\/a> of the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS API for JavaScript<\/a> (JS API) adds a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-HeatmapRenderer.html#referenceScale\">referenceScale<\/a> property to <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-HeatmapRenderer.html\">HeatmapRenderer<\/a>. This property allows you to fix the configuration settings for a heat map at a specific scale level, making the density appear consistent at all scales.<\/p>\n<p>By default, HeatmapRenderer dynamically updates the density of its surface as the user zooms in and out, making it hyper sensitive to scale. The way you configure a heat map at one scale may result in a misleading visualization at other scales.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1623282,"id":1623282,"title":"zoom-out-heatmap-bad","filename":"zoom-out-heatmap-bad.gif","filesize":3062000,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales\/zoom-out-heatmap-bad","alt":"By default, heat maps appear more dense as you zoom out. The sharp contrast to the original scale is jarring and may confuse the user.","author":"6561","description":"","caption":"By default, heat maps appear more dense as you zoom out. The sharp contrast to the density at the original scale is jarring and may confuse the user.","name":"zoom-out-heatmap-bad","status":"inherit","uploaded_to":1622562,"date":"2022-06-22 01:07:57","modified":"2022-06-22 18:15:45","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-out-heatmap-bad.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":1623312,"id":1623312,"title":"zoom-in-heatmap-bad","filename":"zoom-in-heatmap-bad.gif","filesize":3220738,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales\/zoom-in-heatmap-bad","alt":"By default, heat maps will disappear as you zoom in, which may cause the user to question where the data went.","author":"6561","description":"","caption":"Conversely, heat maps appear to disappear as you zoom in, which may cause the user to question where the data went.","name":"zoom-in-heatmap-bad","status":"inherit","uploaded_to":1622562,"date":"2022-06-22 01:08:28","modified":"2022-06-22 18:16:10","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":800,"height":450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad.gif","large-width":800,"large-height":450,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad.gif","1536x1536-width":800,"1536x1536-height":450,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad.gif","2048x2048-width":800,"2048x2048-height":450,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad.gif","card_image-width":800,"card_image-height":450,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/zoom-in-heatmap-bad.gif","wide_image-width":800,"wide_image-height":450}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>While the effect can be confusing for the end user, this approach actually makes sense when you consider that points generally appear more dispersed as you zoom to large scales, and more dense as you zoom to small scales.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1621542,"id":1621542,"title":"large-scale-points","filename":"large-scale-points.png","filesize":27153,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/heat-maps-now-render-faster-and-smoother-in-the-browser\/large-scale-points","alt":"Motor vehicle crashes in New York City (2020). At large scales, individual points appear dispersed; pixels are more likely to contain individual points than at small scales.","author":"6561","description":"","caption":"Motor vehicle crashes in New York City (2020). At large scales, individual points appear dispersed; pixels are more likely to contain individual points than at small scales.","name":"large-scale-points","status":"inherit","uploaded_to":1621232,"date":"2022-06-21 19:03:21","modified":"2022-06-22 00:21:23","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":796,"height":446,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points.png","medium_large-width":768,"medium_large-height":430,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points.png","large-width":796,"large-height":446,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points.png","1536x1536-width":796,"1536x1536-height":446,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points.png","2048x2048-width":796,"2048x2048-height":446,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points.png","card_image-width":796,"card_image-height":446,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/large-scale-points.png","wide_image-width":796,"wide_image-height":446}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":1621582,"id":1621582,"title":"small-scale-points","filename":"small-scale-points.png","filesize":201844,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/heat-maps-now-render-faster-and-smoother-in-the-browser\/small-scale-points","alt":"Motor vehicle crashes in New York City (2020). Pixels at small scales are more likely to contain multiple points than pixels at large scales.","author":"6561","description":"","caption":"Motor vehicle crashes in New York City (2020). Pixels at small scales are more likely to contain multiple points than pixels at large scales. This increases the point density in the image","name":"small-scale-points","status":"inherit","uploaded_to":1621232,"date":"2022-06-21 19:03:46","modified":"2022-06-22 18:16:59","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":796,"height":444,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points.png","medium-width":464,"medium-height":259,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points.png","medium_large-width":768,"medium_large-height":428,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points.png","large-width":796,"large-height":444,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points.png","1536x1536-width":796,"1536x1536-height":444,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points.png","2048x2048-width":796,"2048x2048-height":444,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points.png","card_image-width":796,"card_image-height":444,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/small-scale-points.png","wide_image-width":796,"wide_image-height":444}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Let&#8217;s take a look at a few ways you can configure the heat map to work well at various scales\u2026starting with the new <code>referenceScale<\/code> property.<\/p>\n<ul>\n<li><a href=\"#reference-scale\">Reference scale<\/a><\/li>\n<li><a href=\"#navigation-constraints\">Navigation constraints<\/a><\/li>\n<li><a href=\"#visible-scale-range\">Visible scale range<\/a><\/li>\n<li><a href=\"#scale-dependent-renderers\">Scale-dependent renderers<\/a><\/li>\n<\/ul>\n<p><a name=\"reference-scale\"><\/a><\/p>\n<h2>Reference scale<\/h2>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-HeatmapRenderer.html#referenceScale\">referenceScale<\/a> property of a HeatmapRenderer allows you to lock the visualization to a specific scale. This has the effect of making the heat map static, so the density surface remains consistent as you zoom in and out.<\/p>\n<p>The following table shows how different the same renderer looks as you zoom in and out when configured with a reference scale versus without a reference scale. Notice how the heat map looks exactly the same at the reference scale.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1615122,"id":1615122,"title":"heatmaps","filename":"heatmaps.jpg","filesize":108923,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/announcements\/whats-new-in-arcgis-api-for-javascript-version-4-24\/heatmaps","alt":"Compare the differences between static and dynamic (default) heatmaps at various scales above and below the reference scale.","author":"4271","description":"","caption":"Compare the differences between static and dynamic (default) heatmaps at various scales above and below the reference scale.","name":"heatmaps","status":"inherit","uploaded_to":1615042,"date":"2022-06-19 04:32:13","modified":"2022-06-22 00:44:41","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":1119,"height":506,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps.jpg","medium-width":464,"medium-height":210,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps.jpg","medium_large-width":768,"medium_large-height":347,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps.jpg","large-width":1119,"large-height":506,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps.jpg","1536x1536-width":1119,"1536x1536-height":506,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps.jpg","2048x2048-width":1119,"2048x2048-height":506,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps-826x374.jpg","card_image-width":826,"card_image-height":374,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps.jpg","wide_image-width":1119,"wide_image-height":506}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/heatmaps.jpg"},{"acf_fc_layout":"content","content":"<p>To enable this behavior, simply set the <code>referenceScale<\/code> property to the view scale at which you author the heat map.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> renderer = {\r\n  type: <span style=\"color: #d14;\">\"heatmap\"<\/span>,\r\n  colorStops: [\r\n    { color: [<span style=\"color: #008080;\">133<\/span>, <span style=\"color: #008080;\">193<\/span>, <span style=\"color: #008080;\">200<\/span>, <span style=\"color: #008080;\">0<\/span>], ratio: <span style=\"color: #008080;\">0<\/span> },\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ... more color stops here ...<\/span>\r\n    { color: [<span style=\"color: #008080;\">255<\/span>, <span style=\"color: #008080;\">255<\/span>, <span style=\"color: #008080;\">0<\/span>, <span style=\"color: #008080;\">255<\/span>], ratio: <span style=\"color: #008080;\">1<\/span> }\r\n  ],\r\n  maxDensity: <span style=\"color: #008080;\">0.319<\/span>,\r\n  minDensity: <span style=\"color: #008080;\">0<\/span>,\r\n  radius: <span style=\"color: #008080;\">6<\/span>,\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ settings for heatmap apply only to this scale<\/span>\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ so renderer will look consistent without<\/span>\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ dynamically updating on zoom<\/span>\r\n  referenceScale: <span style=\"color: #008080;\">36111<\/span>\r\n};\r\n<\/code><\/pre>\n<p>The following app demonstrates how the same heat map looks with and without a reference scale. Zoom in and out in to observe how the density remains constant in the initial view. Use the button above the legend to toggle off the reference scale.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"<p><a href=\"https:\/\/github.com\/ekenes\/heatmap-experiments\/blob\/main\/demo-apps\/nyc-trees-static.html\">View the code<\/a><br \/>\n<a href=\"https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/nyc-trees-static.html\">View live app<\/a><\/p>\n","static":false,"storymap_url":"<a href=\"https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/nyc-trees-static.html\">https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/nyc-trees-static.html<\/a>"},{"acf_fc_layout":"content","content":"<p>Setting a reference scale works great when the user is naturally inclined to zoom out from hot spots to see more context. It is not as useful if you attempt to zoom to large scales where the heat map patterns are no longer visible. For that reason, I suggest you always use <code>referenceScale<\/code> in combination with one of the remaining techniques described below.<\/p>\n<p><a name=\"navigation-constraints\"><\/a><\/p>\n<h2>Navigation constraints<\/h2>\n<p>Constraining the <code>maxScale<\/code> of the view prevents the user from zooming in past a specific scale level.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\">layer.renderer = {\r\n  type: <span style=\"color: #d14;\">\"heatmap\"<\/span>\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ additional heatmap properties<\/span>\r\n}\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> view = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  container: <span style=\"color: #d14;\">\"viewDiv\"<\/span>,\r\n  map: <span style=\"color: #333; font-weight: bold;\">new<\/span> <span style=\"color: #0086b3;\">Map<\/span>({\r\n    layers: [layer]\r\n  }),\r\n  constraints: {\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ prevents the user from zooming in<\/span>\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ beyond a scale value<\/span>\r\n    maxScale: <span style=\"color: #008080;\">33003<\/span>,\r\n    minScale: <span style=\"color: #008080;\">250000<\/span>\r\n  }\r\n});\r\n<\/code><\/pre>\n<p>View constraints ensure the user will never zoom too far to the point where a heat map either appears too cold or too hot. Click the &#8220;Toggle view max scale&#8221; button in the app below to get a feel for how constraining view navigation affects the user experience when zooming in and out.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"<p><a href=\"https:\/\/github.com\/ekenes\/heatmap-experiments\/blob\/main\/demo-apps\/crashes-rs-constrained.html\">View the code<\/a><br \/>\n<a href=\"https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/crashes-rs-constrained.html\">View live app<\/a><\/p>\n","static":false,"storymap_url":"<a href=\"https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/crashes-rs-constrained.html\">https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/crashes-rs-constrained.html<\/a>"},{"acf_fc_layout":"content","content":"<p>Keep in mind that setting a view constraint applies globally to the view and only works well when there is no other data to view at larger scales. When the user is required to view other datasets at other scale ranges beyond the constraints, then you should use one of the other two techniques for working with scale.<\/p>\n<p><a name=\"visible-scale-range\"><\/a><\/p>\n<h2>Visible scale range<\/h2>\n<p>Setting a <code>maxScale<\/code> on the layer itself will cause the layer\u2019s visibility to toggle off when the user zooms beyond a specific scale value.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> layer = <span style=\"color: #333; font-weight: bold;\">new<\/span> FeatureLayer({\r\n  title: <span style=\"color: #d14;\">\"Motor vehicle crashes (2020)\"<\/span>,\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ...other layer properties<\/span>\r\n  renderer: {\r\n    type: <span style=\"color: #d14;\">\"heatmap\"<\/span>,\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ ...other heatmap properties<\/span>\r\n  },\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ layer is only visible in this scale range<\/span>\r\n  maxScale: <span style=\"color: #008080;\">60494<\/span>,\r\n  minScale: <span style=\"color: #008080;\">196253<\/span>\r\n});\r\n<\/code><\/pre>\n<p>Zoom in and out in the app below to see how this affects the user experience. Use the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-ScaleRangeSlider.html\">ScaleRangeSlider<\/a> widget in the bottom right corner of the UI to adjust the visible range of the layer.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"<p><a href=\"https:\/\/github.com\/ekenes\/heatmap-experiments\/blob\/main\/demo-apps\/crashes-rs-visible-range.html\">View the code<\/a><br \/>\n<a href=\"https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/crashes-rs-visible-range.html\">View live app<\/a><\/p>\n","static":false,"storymap_url":"<a href=\"https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/crashes-rs-visible-range.html\">https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/crashes-rs-visible-range.html<\/a>"},{"acf_fc_layout":"content","content":"<p>This technique works well if the data is no longer relevant at larger scale levels. If the end user still needs to see data from the heat map at large scales, then you should consider toggling from a HeatmapRenderer to a renderer showing discrete points.<\/p>\n<p><a name=\"scale-dependent-renderers\"><\/a><\/p>\n<h2>Scale-dependent renderers<\/h2>\n<p>When the user zooms in so far that points largely appear dispersed, then it may make sense to switch the layer\u2019s renderer to one that shows discrete locations for each point. This can be done with a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-SimpleRenderer.html\">SimpleRenderer<\/a>, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-UniqueValueRenderer.html\">UniqueValueRenderer<\/a>, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-ClassBreaksRenderer.html\">ClassBreaksRenderer<\/a>, or any renderer that also uses <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-visualVariables-VisualVariable.html\">visual variables<\/a> to visualize the data.<\/p>\n<p>To implement this behavior, set a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-core-Accessor.html#watch\">watch<\/a> on the view\u2019s <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html#scale\">scale<\/a> property and toggle between the renderers when the threshold is crossed in either direction.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> heatmapRenderer = {\r\n  type: <span style=\"color: #d14;\">\"heatmap\"<\/span>,\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ...other heat map properties<\/span>\r\n};\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> healthRenderer = {\r\n  type: <span style=\"color: #d14;\">\"unique-value\"<\/span>,\r\n  field: <span style=\"color: #d14;\">\"health\"<\/span>,\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ ...other unique value properties<\/span>\r\n}\r\n\r\n<span style=\"color: #998; font-style: italic;\">\/\/ Switch layer's renderer to a unique value renderer<\/span>\r\n<span style=\"color: #998; font-style: italic;\">\/\/ to view individual points when the user zooms in<\/span>\r\n<span style=\"color: #998; font-style: italic;\">\/\/ beyond the scale threshold. Use heatmap when zooming out<\/span>\r\nview.watch(<span style=\"color: #d14;\">\"scale\"<\/span>, (scale) =&gt; {\r\n  layer.renderer = scale &lt;= <span style=\"color: #008080;\">9027<\/span> ? healthRenderer : heatmapRenderer;\r\n});\r\n<\/code><\/pre>\n<p>Zoom closer to the streets in the app below to view individual trees locations.<\/p>\n"},{"acf_fc_layout":"storymap","title":"","description":"<p><a href=\"https:\/\/github.com\/ekenes\/heatmap-experiments\/blob\/main\/demo-apps\/nyc-trees-toggle-renderer.html\">View the code<\/a><br \/>\n<a href=\"https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/nyc-trees-toggle-renderer.html\">View live app<\/a><\/p>\n","static":false,"storymap_url":"<a href=\"https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/nyc-trees-toggle-renderer.html\">https:\/\/ekenes.github.io\/heatmap-experiments\/demo-apps\/nyc-trees-toggle-renderer.html<\/a>"},{"acf_fc_layout":"content","content":"<h2>Conclusion<\/h2>\n<p>Because HeatmapRenderer is so sensitive to scale, you should always consider the following:<\/p>\n<ul>\n<li>At which scale range should the heat map render?<\/li>\n<li>How should the heat map behave on zoom? Should it be locked to a reference scale?<\/li>\n<li>What should be the behavior as you zoom to large scales? Should the navigation be constrained? The layer visibility toggle off? Or should you render points?<\/li>\n<\/ul>\n<p>Thanks to the new reference scale, you now have one more tool that allows you to improve how a heat map appears at various scales. I tend to favor applying all of the following techniques: set a reference scale in the renderer, set a <code>minScale<\/code> constraint on the view or layer, and setting a max scale threshold to toggle the renderer to show individual points at large scales.<\/p>\n"}],"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":1621232,"post_author":"6561","post_date":"2022-06-23 13:36:01","post_date_gmt":"2022-06-23 20:36:01","post_content":"","post_title":"Heat maps now render faster and smoother in the browser","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"heat-maps-now-render-faster-and-smoother-in-the-browser","to_ping":"","pinged":"","post_modified":"2024-04-12 03:39:27","post_modified_gmt":"2024-04-12 10:39:27","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1621232","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":1617762,"post_author":"6331","post_date":"2022-06-22 21:35:09","post_date_gmt":"2022-06-23 04:35:09","post_content":"","post_title":"Next-Generation Heat Maps in Map Viewer: Better, faster, smoother, stronger","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"next-generation-heat-maps-mapviewer","to_ping":"","pinged":"","post_modified":"2022-06-22 21:41:51","post_modified_gmt":"2022-06-23 04:41:51","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1617762","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"2","filter":"raw"},{"ID":1615042,"post_author":"4271","post_date":"2022-06-23 13:03:29","post_date_gmt":"2022-06-23 20:03:29","post_content":"","post_title":"What's new in ArcGIS API for JavaScript (version 4.24)","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"whats-new-in-arcgis-api-for-javascript-version-4-24","to_ping":"","pinged":"","post_modified":"2022-11-21 01:46:11","post_modified_gmt":"2022-11-21 09:46:11","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1615042","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/card-rs.jpg","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/banner-rs.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>How to create heat maps that work at all scales<\/title>\n<meta name=\"description\" content=\"Heat maps are notoriously sensitive to scale. Learn four things you should consider when creating heat maps so they work across all scale levels.\" \/>\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\/how-to-create-heat-maps-that-work-at-all-scales\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create heat maps that work at all scales\" \/>\n<meta property=\"og:description\" content=\"Heat maps are notoriously sensitive to scale. Learn four things you should consider when creating heat maps so they work across all scale levels.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales\" \/>\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-04-12T10:39:16+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\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"How to create heat maps that work at all scales\",\"datePublished\":\"2022-06-27T16:10:12+00:00\",\"dateModified\":\"2024-04-12T10:39:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales\"},\"wordCount\":10,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"data viz\",\"heat map\",\"heatmap\",\"scale\",\"what's new june 2022\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales\",\"name\":\"How to create heat maps that work at all scales\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2022-06-27T16:10:12+00:00\",\"dateModified\":\"2024-04-12T10:39:16+00:00\",\"description\":\"Heat maps are notoriously sensitive to scale. Learn four things you should consider when creating heat maps so they work across all scale levels.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create heat maps that work at all scales\"}]},{\"@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":"How to create heat maps that work at all scales","description":"Heat maps are notoriously sensitive to scale. Learn four things you should consider when creating heat maps so they work across all scale levels.","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\/how-to-create-heat-maps-that-work-at-all-scales","og_locale":"en_US","og_type":"article","og_title":"How to create heat maps that work at all scales","og_description":"Heat maps are notoriously sensitive to scale. Learn four things you should consider when creating heat maps so they work across all scale levels.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T10:39:16+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\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"How to create heat maps that work at all scales","datePublished":"2022-06-27T16:10:12+00:00","dateModified":"2024-04-12T10:39:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["data viz","heat map","heatmap","scale","what's new june 2022"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales","name":"How to create heat maps that work at all scales","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2022-06-27T16:10:12+00:00","dateModified":"2024-04-12T10:39:16+00:00","description":"Heat maps are notoriously sensitive to scale. Learn four things you should consider when creating heat maps so they work across all scale levels.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/how-to-create-heat-maps-that-work-at-all-scales#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"How to create heat maps that work at all scales"}]},{"@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":"June 27, 2022","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/06\/banner-rs.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":758301,"name":"data viz","slug":"data-viz","term_group":0,"term_taxonomy_id":758301,"taxonomy":"post_tag","description":"","parent":0,"count":9,"filter":"raw"},{"term_id":761092,"name":"heat map","slug":"heat-map","term_group":0,"term_taxonomy_id":761092,"taxonomy":"post_tag","description":"","parent":0,"count":4,"filter":"raw"},{"term_id":765772,"name":"heatmap","slug":"heatmap","term_group":0,"term_taxonomy_id":765772,"taxonomy":"post_tag","description":"","parent":0,"count":3,"filter":"raw"},{"term_id":34771,"name":"scale","slug":"scale","term_group":0,"term_taxonomy_id":34771,"taxonomy":"post_tag","description":"","parent":0,"count":13,"filter":"raw"},{"term_id":765092,"name":"what's new june 2022","slug":"whats-new-june-2022","term_group":0,"term_taxonomy_id":765092,"taxonomy":"post_tag","description":"","parent":0,"count":27,"filter":"raw"}],"category_data":[{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":433,"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"}],"product_data":[{"term_id":761642,"name":"ArcGIS Location Platform","slug":"platform","term_group":0,"term_taxonomy_id":761642,"taxonomy":"product","description":"","parent":36601,"count":215,"filter":"raw"},{"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":364,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":770,"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\/1622562","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=1622562"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1622562\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1622562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1622562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1622562"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1622562"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1622562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}