{"id":1214862,"date":"2021-05-03T09:00:37","date_gmt":"2021-05-03T16:00:37","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1214862"},"modified":"2024-04-12T04:01:59","modified_gmt":"2024-04-12T11:01:59","slug":"inset-maps-for-the-web","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web","title":{"rendered":"Inset maps for the web"},"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":[26451,30111,24921,27491,24581],"industry":[],"product":[761642,36831,36601],"class_list":["post-1214862","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-cartography","tag-data-visualization","tag-javascript","tag-jsapi4","tag-smart-mapping","product-platform","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Inset maps have many uses in print maps, but do they have a place in web maps?","flexible_content":[{"acf_fc_layout":"sidebar","content":"<p><a href=\"https:\/\/www.esri.com\/en-us\/arcgis\/products\/arcgis-instant-apps\/overview\">ArcGIS Instant Apps<\/a> added an <a href=\"https:\/\/www.arcgis.com\/home\/item.html?id=bd89b6c6cc75452f830e72a2fc9aa3a0\">Insets<\/a> app template since this article was originally published. Check out <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/announcements\/arcgis-instant-apps-introducing-insets\/\">this blog article<\/a>, which describes an easier process for adding insets to web apps.<\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"<p>An <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/product\/mapping\/cartographic-design-inset-maps\/\">inset map<\/a> is a smaller map <em>inset<\/em> within a larger map. Inset maps serve multiple purposes, including to:<\/p>\n<p>Provide an <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/overview-map\/\">overview<\/a> of the main map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1216722,"id":1216722,"title":"inset-overview","filename":"inset-overview.png","filesize":164069,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/inset-overview","alt":"Inset maps can show the location of the main map in the context of a larger area.","author":"6561","description":"","caption":"Inset maps can show the location of the main map in the context of a larger area.","name":"inset-overview","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 20:17:09","modified":"2021-04-28 20:18:13","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":1200,"height":604,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview.png","medium-width":464,"medium-height":234,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview.png","medium_large-width":768,"medium_large-height":387,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview.png","large-width":1200,"large-height":604,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview.png","1536x1536-width":1200,"1536x1536-height":604,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview.png","2048x2048-width":1200,"2048x2048-height":604,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview-826x416.png","card_image-width":826,"card_image-height":416,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-overview.png","wide_image-width":1200,"wide_image-height":604}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/overview-map\/"},{"acf_fc_layout":"content","content":"<p>Show <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/product\/mapping\/cartographic-design-inset-maps\/\">more detail<\/a> of a portion of the main map.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1216692,"id":1216692,"title":"inset-detail","filename":"inset-detail.png","filesize":593450,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/inset-detail","alt":"Inset maps can show more detail of a smaller area with a higher density of data.","author":"6561","description":"Inset maps can show more detail of a smaller area with a higher density of data.","caption":"Inset maps can show more detail of a smaller area with a higher density of data. ","name":"inset-detail","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 20:16:18","modified":"2021-04-28 20:44:02","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":2756,"height":1654,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail.png","medium-width":435,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail.png","medium_large-width":768,"medium_large-height":461,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail.png","large-width":1800,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail-1536x922.png","1536x1536-width":1536,"1536x1536-height":922,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail-2048x1229.png","2048x2048-width":2048,"2048x2048-height":1229,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail-775x465.png","card_image-width":775,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-detail-1800x1080.png","wide_image-width":1800,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/elections\/?year=2020"},{"acf_fc_layout":"content","content":"<p>Communicate <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-pro\/mapping\/100-years-of-wildfire-gis-ification\/\">additional data variables<\/a>, or filtered views, of the main map area.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1216702,"id":1216702,"title":"inset-multiples","filename":"inset-multiples.jpg","filesize":278819,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/inset-multiples","alt":"Inset maps can show the same area as the main map, but in the context of filtered data or related data variables.","author":"6561","description":"","caption":"Inset maps can show the same area as the main map, but in the context of filtered data or related data variables.","name":"inset-multiples","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 20:16:41","modified":"2021-04-28 20:19:16","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1081,"height":1920,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples.jpg","medium-width":147,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples.jpg","medium_large-width":768,"medium_large-height":1364,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples.jpg","large-width":608,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples-865x1536.jpg","1536x1536-width":865,"1536x1536-height":1536,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples.jpg","2048x2048-width":1081,"2048x2048-height":1920,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples-262x465.jpg","card_image-width":262,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-multiples-608x1080.jpg","wide_image-width":608,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-pro\/mapping\/100-years-of-wildfire-gis-ification\/"},{"acf_fc_layout":"content","content":"<p>Display <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/views-composite-views\/\">noncontiguous geometries<\/a> at a single glance.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1216712,"id":1216712,"title":"inset-noncontiguous","filename":"inset-noncontiguous-scaled.png","filesize":2757868,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/inset-noncontiguous","alt":"Inset maps can display related, but noncontinuous data in one compact view. This is a common approach for visualizing Alaska and Hawaii in maps of the United States.","author":"6561","description":"","caption":"Inset maps can display related, but noncontinuous data in one compact view. This is a common approach for visualizing Alaska and Hawaii in maps of the United States.","name":"inset-noncontiguous","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 20:16:51","modified":"2021-04-28 20:20:39","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1423,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-scaled.png","medium-width":464,"medium-height":258,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-scaled.png","medium_large-width":768,"medium_large-height":427,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-scaled.png","large-width":1920,"large-height":1067,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-1536x854.png","1536x1536-width":1536,"1536x1536-height":854,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-2048x1138.png","2048x2048-width":2048,"2048x2048-height":1138,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-826x459.png","card_image-width":826,"card_image-height":459,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/inset-noncontiguous-1920x1067.png","wide_image-width":1920,"wide_image-height":1067}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/views-composite-views\/"},{"acf_fc_layout":"content","content":"<p>Inset maps are frequently used in print cartography, but are much less common in the web mapping world. That makes sense considering web maps often provide interactive capabilities, such as panning and zooming, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/intro-popuptemplate\/\">viewing additional information in popups<\/a>, and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/widgets-timeslider-offset\/\">using widgets to filter and explore data<\/a> at various time intervals and extents.<\/p>\n<p>Despite all the web has to offer in terms of interactivity, there is still a demand for simplified web apps that take advantage of inset maps. This is particularly true in the fourth scenario listed above: to display noncontinuous geometries at a single glance.<\/p>\n<h2>Noncontiguous geometries at a glance<\/h2>\n<p>Traditional print maps of the United States often tuck Alaska and Hawaii in inset maps below the lower 48 states. This allows people to view information from all 50 states at a glance without having to turn pages or open new maps.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1215392,"id":1215392,"title":"time-zones-sleep","filename":"time-zones-sleep.jpg","filesize":185149,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/time-zones-sleep","alt":"bedtimes in the United states","author":"6561","description":"","caption":"","name":"time-zones-sleep","status":"inherit","uploaded_to":1214862,"date":"2021-04-27 18:17:32","modified":"2021-04-27 18:17:53","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":1200,"height":973,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep.jpg","medium-width":322,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep.jpg","medium_large-width":768,"medium_large-height":623,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep.jpg","large-width":1200,"large-height":973,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep.jpg","1536x1536-width":1200,"1536x1536-height":973,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep.jpg","2048x2048-width":1200,"2048x2048-height":973,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep-573x465.jpg","card_image-width":573,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/time-zones-sleep.jpg","wide_image-width":1200,"wide_image-height":973}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.courant.com\/consumer\/hc-ls-timezones-sleep-20190421-20190419-p7vpg4yo2bdmbijckbdjgdu7nq-story.html"},{"acf_fc_layout":"content","content":"<p>This view of the United States can be helpful even for web maps. The <a href=\"https:\/\/ekenes.github.io\/national-park-visits\/?viewType=all&amp;variable=total-change&amp;year=2020\">following map<\/a> shows the change in visits to national parks from 2019 to 2020.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1214922,"id":1214922,"title":"national-park-change-2020","filename":"national-park-change-2020.png","filesize":112265,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/national-park-change-2020","alt":"","author":"6561","description":"","caption":"Total change in visits to U.S. national parks 2019-2020. This map has three inset views: Alaska, Hawaii, and the Virgin Islands.","name":"national-park-change-2020","status":"inherit","uploaded_to":1214862,"date":"2021-04-27 00:21:17","modified":"2021-04-27 00:22:25","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":1308,"height":848,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020.png","medium-width":403,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020.png","medium_large-width":768,"medium_large-height":498,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020.png","large-width":1308,"large-height":848,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020.png","1536x1536-width":1308,"1536x1536-height":848,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020.png","2048x2048-width":1308,"2048x2048-height":848,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020-717x465.png","card_image-width":717,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/national-park-change-2020.png","wide_image-width":1308,"wide_image-height":848}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/national-park-visits\/?viewType=all&amp;variable=total-change&amp;year=2020"},{"acf_fc_layout":"content","content":"<p>Check out the video below to see a demo of <a href=\"https:\/\/ekenes.github.io\/national-park-visits\/?viewType=all&amp;variable=total-change&amp;year=2020\">this app<\/a>, the visualization style, and some of the stories uncovered while exploring visits to national parks over the years.<\/p>\n"},{"acf_fc_layout":"youtube","start_time":"0","end_time":"","youtube_video_url":"<iframe title=\"Smart Mapping\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Tq2oNwjDEqY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>"},{"acf_fc_layout":"content","content":"<p>There&#8217;s a lot to consider when creating inset views for web maps.<\/p>\n<p>I&#8217;ll spend the remainder of this post describing how <a href=\"https:\/\/ekenes.github.io\/national-park-visits\/?viewType=all&amp;variable=total-change&amp;year=2020\">this app<\/a> was made and offer suggestions on how to address the various issues I encountered when creating inset maps in web applications.<\/p>\n<h2>One map, multiple views<\/h2>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS API for JavaScript<\/a> (ArcGIS JS API) has <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html\">MapView<\/a> (2D) and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-SceneView.html\">SceneView<\/a> (3D) classes that render geographic data in web maps and scenes. Web apps can contain more than one view at a time. These views can render <a href=\"https:\/\/ekenes.github.io\/esri-js-samples\/4\/visualization\/dot-density\/population-race-views.html\">different maps that complement one another<\/a>, offer a <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/views-synchronize\/\">2D\/3D comparison<\/a> of an area, or be used to render <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/views-composite-views\/\">one map instance in different view extents<\/a>.<\/p>\n"},{"acf_fc_layout":"sidebar","content":"<p>Each view requires one <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/WebGLRenderingContext\">WebGL rendering context<\/a>. Since browsers only support up to 16 WebGL contexts at a time, you should limit the number of views in your app to fewer than 16.<\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Right","spotlight_image":false},{"acf_fc_layout":"content","content":"<p>From a user perspective, the <a href=\"https:\/\/ekenes.github.io\/national-park-visits\/?viewType=all&amp;variable=bivariate&amp;year=2020\">national parks app<\/a> shown above renders four maps that point to a single data source. In ArcGIS JS API lingo, we say these are four views of the same map.<\/p>\n<p>This means I can construct, style, and manage my layers in a single map instance. Then, I can reference the same map in each of the four views.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> map = <span style=\"color: #333; font-weight: bold;\">new<\/span> WebMap({\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ manage operational layers here<\/span>\r\n  layers: [ ]\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> usView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  container: <span style=\"color: #d14;\">\"usView\"<\/span>,\r\n  map,\r\n  ...usViewProperties\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> akView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  container: <span style=\"color: #d14;\">\"akView\"<\/span>,\r\n  map,\r\n  ...akViewProperties\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> viView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  container: <span style=\"color: #d14;\">\"viView\"<\/span>,\r\n  map,\r\n  ...viViewProperties\r\n});\r\n\r\n<span style=\"color: #333; font-weight: bold;\">const<\/span> hiView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  container: <span style=\"color: #d14;\">\"hiView\"<\/span>,\r\n  map,\r\n  ...hiViewProperties\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<p>Each view needs a reference to the DOM node containing the view, the map, and other properties, such as spatial reference (map projection), center point and scale (or alternately an extent).<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> usView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  map: <span style=\"color: #333; font-weight: bold;\">new<\/span> <span style=\"color: #0086b3;\">WebMap<\/span>(),\r\n  container: <span style=\"color: #d14;\">\"usViewDiv\"<\/span>,\r\n  center: {\r\n    spatialReference: { wkid: <span style=\"color: #008080;\">5070<\/span> },\r\n    x: <span style=\"color: #008080;\">672019<\/span>,\r\n    y: <span style=\"color: #008080;\">1501270<\/span>\r\n  },\r\n  scale: <span style=\"color: #008080;\">36353220<\/span>,\r\n  spatialReference: {\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ NAD_1983_Contiguous_USA_Albers<\/span>\r\n    wkid: <span style=\"color: #008080;\">5070<\/span>\r\n  }\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<h2>Spatial reference<\/h2>\n<p>The view allows you to project data on the fly using the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html#spatialReference\">spatialReference<\/a> property.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> akView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  ...viewParams,\r\n  spatialReference: {\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ WGS_1984_EPSG_Alaska_Polar_Stereographic<\/span>\r\n    wkid: <span style=\"color: #008080;\">5936<\/span>\r\n  }\r\n});\r\n<\/code><\/pre>\n<p>This is important for inset views that display areas, such as Alaska, that would otherwise be highly distorted in the common Web Mercator projection.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1215462,"id":1215462,"title":"ak-compare-no-border","filename":"ak-compare-no-border.png","filesize":43065,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/ak-compare-no-border","alt":"comparing Alaska projected in web mercator versus Alaska Stereographic.","author":"6561","description":"","caption":"Alaska projected in Web Mercator (right) is heavily distorted in area and shape because of its distance from the projection's line of tangency, the Equator. Conversely, the Alaska Polar Stereographic projection preserves properties, such as area and shape.","name":"ak-compare-no-border","status":"inherit","uploaded_to":1214862,"date":"2021-04-27 18:40:37","modified":"2021-04-27 18:44:05","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":1028,"height":539,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border.png","medium-width":464,"medium-height":243,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border.png","medium_large-width":768,"medium_large-height":403,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border.png","large-width":1028,"large-height":539,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border.png","1536x1536-width":1028,"1536x1536-height":539,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border.png","2048x2048-width":1028,"2048x2048-height":539,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border-826x433.png","card_image-width":826,"card_image-height":433,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ak-compare-no-border.png","wide_image-width":1028,"wide_image-height":539}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"sidebar","content":"<p>The spatial reference of a view usually depends on the spatial reference of the layers in a basemap. These layers are often tiled. Unfortunately, tiled layers cannot be reprojected on the fly, so setting a view&#8217;s spatial reference only works for basemaps constructed using <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-FeatureLayer.html\">Feature Layers<\/a>, which can be reprojected on the fly.<\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Right","spotlight_image":false},{"acf_fc_layout":"content","content":"<h2>View constraints<\/h2>\n<p>Web maps that take advantage of insets likely require some kind of view constraints. The <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html#constraints\">constraints<\/a> property of the MapView allows you to restrict how the user interacts with the view. You can constrain their navigation based on extent or geometry, max and min scale, and rotation.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> akView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  ...viewParams,\r\n  constraints: {\r\n    rotationEnabled: <span style=\"color: #333; font-weight: 500;\">false<\/span>,\r\n    minScale: <span style=\"color: #008080;\">13076340<\/span>,\r\n    maxScale: <span style=\"color: #008080;\">4338033<\/span>,\r\n    geometry: <span style=\"color: #333; font-weight: bold;\">new<\/span> Extent({\r\n      spatialReference: {\r\n        wkid: <span style=\"color: #008080;\">5936<\/span>\r\n      },\r\n      xmin: <span style=\"color: #008080;\">737823.0703569443<\/span>,\r\n      ymin: -<span style=\"color: #008080;\">2103604.250401656<\/span>,\r\n      xmax: <span style=\"color: #008080;\">3689660.4504700145<\/span>,\r\n      ymax: <span style=\"color: #008080;\">110273.7846831464<\/span>\r\n    })\r\n  }\r\n});\r\n<\/code><\/pre>\n<p>Constraining by an extent still allows you to navigate within a state boundary. It does not restrict view navigation altogether.<\/p>\n<p>For inset maps, you may want to freeze the view so the user cannot loosely pan around. For example, panning the Hawaii view doesn&#8217;t add value to the user.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1215922,"id":1215922,"title":"constraints-no-nav","filename":"constraints-no-nav.gif","filesize":511430,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/constraints-no-nav","alt":"Pan around Hawaii","author":"6561","description":"","caption":"Allowing the user to pan and zoom in the Hawaii inset view doesn't add real value to the end user.","name":"constraints-no-nav","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 00:30:05","modified":"2021-04-28 00:30:46","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":700,"height":393,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav.gif","medium_large-width":700,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav.gif","large-width":700,"large-height":393,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav.gif","1536x1536-width":700,"1536x1536-height":393,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav.gif","2048x2048-width":700,"2048x2048-height":393,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav.gif","card_image-width":700,"card_image-height":393,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/constraints-no-nav.gif","wide_image-width":700,"wide_image-height":393}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>So I <a href=\"https:\/\/github.com\/ekenes\/national-park-visits\/blob\/9ab59856b9a078db1d2d6254a1ca0d2aa78c14ee\/app\/viewUtils.ts#L64-L104\">disabled all navigation<\/a> on that view (and the view for the Virgin Islands).<\/p>\n<p>Because of size and variations in data density and dispersion, I opted to allow limited user navigation in the views of the lower 48 states and Alaska.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1215932,"id":1215932,"title":"zoom-out-inset","filename":"zoom-out-inset.gif","filesize":967115,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/zoom-out-inset","alt":"Show user zooming to Alaska inset map.","author":"6561","description":"","caption":"Allowing navigation may be appropriate for insets that span large areas.","name":"zoom-out-inset","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 00:33:31","modified":"2021-04-28 00:34:59","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":700,"height":393,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset.gif","medium_large-width":700,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset.gif","large-width":700,"large-height":393,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset.gif","1536x1536-width":700,"1536x1536-height":393,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset.gif","2048x2048-width":700,"2048x2048-height":393,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset.gif","card_image-width":700,"card_image-height":393,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/zoom-out-inset.gif","wide_image-width":700,"wide_image-height":393}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"sidebar","content":"<p>Note I <a href=\"https:\/\/github.com\/ekenes\/national-park-visits\/blob\/9ab59856b9a078db1d2d6254a1ca0d2aa78c14ee\/app\/views.ts#L231-L242\">reset the extent of the Alaska view on blur<\/a> (when the focus is set to another app element). This resets the view so the user is able to see all Alaskan parks when they finish focusing on that view.<\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Right","spotlight_image":false},{"acf_fc_layout":"content","content":"<h2>Popup<\/h2>\n<p>Each instance of a MapView has its own <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html#popup\">popup<\/a>. By default when you click a feature, the popup will attempt to open within the view container of the clicked feature.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1215942,"id":1215942,"title":"bad-popup","filename":"bad-popup.gif","filesize":192414,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/bad-popup","alt":"By default the popup opens in the view of the clicked feature.","author":"6561","description":"","caption":"By default the popup opens in the view of the clicked feature. This makes the popup nearly impossible to read in inset views.","name":"bad-popup","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 00:44:28","modified":"2021-04-28 00:45:20","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":700,"height":393,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup.gif","medium_large-width":700,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup.gif","large-width":700,"large-height":393,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup.gif","1536x1536-width":700,"1536x1536-height":393,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup.gif","2048x2048-width":700,"2048x2048-height":393,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup.gif","card_image-width":700,"card_image-height":393,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/bad-popup.gif","wide_image-width":700,"wide_image-height":393}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Because the popup content, especially the chart, is difficult to read, you will need to display the popup another way.<\/p>\n<p>In apps that contain inset maps, I suggest disabling the popup in all views and using the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Feature.html\">Feature widget<\/a> instead. The feature widget allows you to render popup content outside of a view. This widget gives you full control over the popup&#8217;s placement, content, and style so you are not restricted to small view containers when the user interacts with inset maps.<\/p>\n<p>In this app, I disabled the popupTemplate on all layers and use <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-MapView.html#hitTest\">MapView.hitTest()<\/a> to find features selected by the user and push them to the Feature widget.<\/p>\n<details>\n<summary><strong>Click here to view code snippet<\/strong><\/summary>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> layerView = <span style=\"color: #333; font-weight: bold;\">await<\/span> view.whenLayerView(layer);\r\nview.on(<span style=\"color: #d14;\">\"click\"<\/span>, <span style=\"color: #333; font-weight: bold;\">async<\/span> (event) =&gt; {\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> response = <span style=\"color: #333; font-weight: bold;\">await<\/span> view.hitTest(event, {\r\n    include: layer\r\n  });\r\n  lastHighlight = highlight;\r\n\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ if a feature is returned, highlight it<\/span>\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ and display its attributes in the popup<\/span>\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ if no features are returned, then close the popup<\/span>\r\n  <span style=\"color: #333; font-weight: bold;\">let<\/span> id = <span style=\"color: #333; font-weight: 500;\">null<\/span>;\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">if<\/span> (response &amp;&amp; response.results.length) {\r\n    <span style=\"color: #333; font-weight: bold;\">const<\/span> feature = response.results[<span style=\"color: #008080;\">0<\/span>].graphic;\r\n\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ feature.popupTemplate = layer.popupTemplate;<\/span>\r\n    id = feature.getObjectId();\r\n    highlight = layerView.highlight([id]);\r\n    <span style=\"color: #333; font-weight: bold;\">const<\/span> selectionId = Widgets.featureWidget.graphic\r\n      ? Widgets.featureWidget.graphic.getObjectId()\r\n      : <span style=\"color: #333; font-weight: 500;\">null<\/span>;\r\n\r\n    <span style=\"color: #333; font-weight: bold;\">if<\/span> (highlight &amp;&amp; id !== selectionId) {\r\n      Widgets.featureWidget.graphic = feature;\r\n      (Widgets.featureWidget.container <span style=\"color: #333; font-weight: bold;\">as<\/span> HTMLElement).style.display = <span style=\"color: #d14;\">\"block\"<\/span>;\r\n    }\r\n  } <span style=\"color: #333; font-weight: bold;\">else<\/span> {\r\n    <span style=\"color: #333; font-weight: bold;\">if<\/span> (Widgets.featureWidget &amp;&amp; Widgets.featureWidget.graphic) {\r\n      Widgets.featureWidget.graphic = <span style=\"color: #333; font-weight: 500;\">null<\/span>;\r\n      (Widgets.featureWidget.container <span style=\"color: #333; font-weight: bold;\">as<\/span> HTMLElement).style.display = <span style=\"color: #d14;\">\"none\"<\/span>;\r\n    }\r\n  }\r\n\r\n  <span style=\"color: #998; font-style: italic;\">\/\/ remove the previous highlight<\/span>\r\n  <span style=\"color: #333; font-weight: bold;\">if<\/span> (lastHighlight) {\r\n    lastHighlight.remove();\r\n    lastHighlight = <span style=\"color: #333; font-weight: 500;\">null<\/span>;\r\n  }\r\n});\r\n<\/code><\/pre>\n<\/details>\n"},{"acf_fc_layout":"image","image":{"ID":1215952,"id":1215952,"title":"Screen Shot 2021-04-27 at 5.53.25 PM","filename":"Screen-Shot-2021-04-27-at-5.53.25-PM-scaled.png","filesize":2784190,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/screen-shot-2021-04-27-at-5-53-25-pm","alt":"The Feature widget allows you to detach a popup from a view so you can display popup content queried from features in any view and display it anywhere in the app.","author":"6561","description":"","caption":"The Feature widget allows you to detach a popup from a view so you can display content queried from features in any view and display it anywhere in the app.","name":"screen-shot-2021-04-27-at-5-53-25-pm","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 00:53:52","modified":"2021-04-28 00:55: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":2560,"height":1550,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-scaled.png","medium-width":431,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-scaled.png","medium_large-width":768,"medium_large-height":465,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-scaled.png","large-width":1784,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-1536x930.png","1536x1536-width":1536,"1536x1536-height":930,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-2048x1240.png","2048x2048-width":2048,"2048x2048-height":1240,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-768x465.png","card_image-width":768,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-27-at-5.53.25-PM-1784x1080.png","wide_image-width":1784,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Attribution<\/h2>\n<p>By default, each view contains instances of default widgets, such as <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Zoom.html\">Zoom<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Attribution.html\">Attribution<\/a>. Since each view represents the same map, and therefore the same data sources, attribution text is unnecessarily displayed four times.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1216442,"id":1216442,"title":"ui-components","filename":"ui-components-scaled.png","filesize":3039157,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/ui-components","alt":"Default UI components, such as the zoom and attribution clutters inset views and unnecessarily displays duplicate information.","author":"6561","description":"","caption":"Default UI components, such as the zoom and attribution clutter inset views and unnecessarily displays duplicate information.","name":"ui-components","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 18:07:48","modified":"2021-04-28 22:38:06","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":1648,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-scaled.png","medium-width":405,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-scaled.png","medium_large-width":768,"medium_large-height":494,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-scaled.png","large-width":1678,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-1536x989.png","1536x1536-width":1536,"1536x1536-height":989,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-2048x1319.png","2048x2048-width":2048,"2048x2048-height":1319,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-722x465.png","card_image-width":722,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-1677x1080.png","wide_image-width":1677,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/ui-components-scaled.png"},{"acf_fc_layout":"content","content":"<p>Since multiple attribution widgets display duplicate information, I hide attribution in all inset maps and only retain it for the main view.<\/p>\n<p>The following code only displays attribution in non-inset views.<\/p>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">const<\/span> akView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n  ...viewProperties,\r\n  ui: {\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ displays attribution only in non-inset views<\/span>\r\n    components: !isInset ? [<span style=\"color: #d14;\">\"attribution\"<\/span>] : []\r\n  }\r\n});\r\n<\/code><\/pre>\n<p>It also excludes the zoom widget from these views since it is not needed in insets with navigation disabled.<\/p>\n<h2>Mobile considerations<\/h2>\n<p>Inset maps work well when you have a lot of screen space at your disposal, such as the resolutions desktop and laptop monitors provide. However, they are difficult to implement in mobile views.<\/p>\n<p>Without regarding mobile displays, a map with multiple insets could look like the following on a Pixel 2 mobile device.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1216472,"id":1216472,"title":"pixel2view","filename":"pixel2view.png","filesize":149936,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/pixel2view","alt":"The National Parks app as displayed on a Pixel 2 when not designed for mobile viewing.","author":"6561","description":"","caption":"The National Parks app as displayed on a Pixel 2 when not designed for mobile viewing. Inset maps on mobile devices are difficult to manage, especially when more than one are involved.","name":"pixel2view","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 18:19:34","modified":"2021-04-28 18:21:44","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1510,"height":1010,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view.png","medium-width":390,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view.png","medium_large-width":768,"medium_large-height":514,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view.png","large-width":1510,"large-height":1010,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view.png","1536x1536-width":1510,"1536x1536-height":1010,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view.png","2048x2048-width":1510,"2048x2048-height":1010,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view-695x465.png","card_image-width":695,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view.png","wide_image-width":1510,"wide_image-height":1010}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2view.png"},{"acf_fc_layout":"content","content":"<p>Because Alaska and Hawaii are home to a lot of national parks, I felt it was important to ensure users could view their data well on mobile devices.<\/p>\n<p>If a mobile browser is detected, then the app only creates the view of the lower 48 states. You can then provide UI options for viewing data in Alaska and Hawaii.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1216592,"id":1216592,"title":"pixel2us","filename":"pixel2us.png","filesize":134299,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/pixel2us","alt":"By default, the app hides all inset views and displays only a constrained view of the lower 48 states.","author":"6561","description":"","caption":"By default, the app hides all inset views and displays only a constrained view of the lower 48 states.","name":"pixel2us","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 18:35:55","modified":"2021-04-28 20:57:24","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1516,"height":1004,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us.png","medium-width":394,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us.png","medium_large-width":768,"medium_large-height":509,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us.png","large-width":1516,"large-height":1004,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us.png","1536x1536-width":1516,"1536x1536-height":1004,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us.png","2048x2048-width":1516,"2048x2048-height":1004,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us-702x465.png","card_image-width":702,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us.png","wide_image-width":1516,"wide_image-height":1004}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2us.png"},{"acf_fc_layout":"image","image":{"ID":1216572,"id":1216572,"title":"pixel2hi","filename":"pixel2hi.png","filesize":74297,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/pixel2hi","alt":"The UI provides an option for selecting views of other states that would be rendered as inset views in a desktop app.","author":"6561","description":"","caption":"The UI provides an option for selecting views of other states that would have otherwise been rendered as inset views in a desktop app.","name":"pixel2hi","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 18:35:41","modified":"2021-04-28 20:58:03","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":1518,"height":1008,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi.png","medium-width":393,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi.png","medium_large-width":768,"medium_large-height":510,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi.png","large-width":1518,"large-height":1008,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi.png","1536x1536-width":1518,"1536x1536-height":1008,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi.png","2048x2048-width":1518,"2048x2048-height":1008,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi-700x465.png","card_image-width":700,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi.png","wide_image-width":1518,"wide_image-height":1008}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2hi.png"},{"acf_fc_layout":"image","image":{"ID":1216582,"id":1216582,"title":"pixel2legend","filename":"pixel2legend.png","filesize":84730,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\/pixel2legend","alt":"The Expand widget is used to give the user an easy way to hide\/show widgets, such as the legend in small mobile views.","author":"6561","description":"","caption":"The Expand widget gives the user an easy way to show\/hide widgets, such as the legend in small mobile views.","name":"pixel2legend","status":"inherit","uploaded_to":1214862,"date":"2021-04-28 18:35:49","modified":"2021-04-28 23:38: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":1492,"height":1000,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend.png","medium-width":389,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend.png","medium_large-width":768,"medium_large-height":515,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend.png","large-width":1492,"large-height":1000,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend.png","1536x1536-width":1492,"1536x1536-height":1000,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend.png","2048x2048-width":1492,"2048x2048-height":1000,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend-694x465.png","card_image-width":694,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend.png","wide_image-width":1492,"wide_image-height":1000}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/pixel2legend.png"},{"acf_fc_layout":"content","content":"<p>You could reasonably ask, <em>why not use <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-widgets-Bookmarks.html\">bookmarks<\/a> instead of switching views in mobile devices? <\/em><\/p>\n<p>Bookmarks work well for datasets that rely on a consistent map projection for each area of interest. In the case of rendering data for Alaska and Hawaii, I wanted to continue using projections specific to those states for a better visualization. If I used bookmarks, I would be restricted to using a common projection for the lower 48, Alaska, and Hawaii.<\/p>\n<h2>Mobile constraints<\/h2>\n<p>The constraints you determine for each inset map and view will likely need to be adjusted for mobile devices as well.<\/p>\n<p>I defined initial view properties, such as scale, center, and constraints for each type of view in the app: desktop, mobile, and inset (only available for some views on desktop).<\/p>\n<details>\n<summary><strong>Click here to view code<\/strong><\/summary>\n<pre><code style=\"padding: 0.5em; color: #333; background: #f8f8f8;\"><span style=\"color: #333; font-weight: bold;\">export<\/span> <span style=\"color: #333; font-weight: bold;\">async<\/span> <span style=\"color: #333; font-weight: bold;\">function<\/span> <span style=\"color: #900; font-weight: bold;\">createAkView<\/span>(params){\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> { container, map, isMobile, isInset } = params;\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> mobileScale = <span style=\"color: #008080;\">24510951<\/span>;\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> desktopScale = <span style=\"color: #008080;\">13076340<\/span>;\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> insetScale = <span style=\"color: #008080;\">40436349<\/span>;\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> scale = isInset ? insetScale : isMobile ? mobileScale : desktopScale;\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> insetCenter = fromJSON({\r\n    <span style=\"color: #d14;\">\"spatialReference\"<\/span>:{<span style=\"color: #d14;\">\"wkid\"<\/span>:<span style=\"color: #008080;\">5936<\/span>},\r\n    <span style=\"color: #d14;\">\"x\"<\/span>:<span style=\"color: #008080;\">2103194.674427798<\/span>,\r\n    <span style=\"color: #d14;\">\"y\"<\/span>:-<span style=\"color: #008080;\">957221.1614695506<\/span>\r\n  });\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> fullCenter = fromJSON({\r\n    <span style=\"color: #d14;\">\"spatialReference\"<\/span>:{<span style=\"color: #d14;\">\"wkid\"<\/span>:<span style=\"color: #008080;\">5936<\/span>},\r\n    <span style=\"color: #d14;\">\"x\"<\/span>:<span style=\"color: #008080;\">1811978.2456641502<\/span>,\r\n    <span style=\"color: #d14;\">\"y\"<\/span>:-<span style=\"color: #008080;\">1043832.0433061125<\/span>\r\n  });\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> center = isInset ? insetCenter : fullCenter;\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> mobileConstraints = {\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ constraints defined here<\/span>\r\n  };\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> desktopConstraints = {\r\n    <span style=\"color: #998; font-style: italic;\">\/\/ constraints defined here<\/span>\r\n  };\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> constraints = isInset || isMobile ? mobileConstraints : desktopConstraints;\r\n\r\n  <span style=\"color: #333; font-weight: bold;\">const<\/span> akView = <span style=\"color: #333; font-weight: bold;\">new<\/span> MapView({\r\n    map,\r\n    container,\r\n    center,\r\n    scale,\r\n    constraints,\r\n    spatialReference: {\r\n      <span style=\"color: #998; font-style: italic;\">\/\/ WGS_1984_EPSG_Alaska_Polar_Stereographic<\/span>\r\n      wkid: <span style=\"color: #008080;\">5936<\/span>\r\n    },\r\n    ui: {\r\n      components: !isInset ? [<span style=\"color: #d14;\">\"attribution\"<\/span>] : []\r\n    }\r\n  });\r\n  <span style=\"color: #333; font-weight: bold;\">return<\/span> akView.when();\r\n}\r\n<\/code><\/pre>\n<\/details>\n<h2>Things to consider<\/h2>\n<p>Keep in mind that creating inset maps can be problematic in some scenarios, particularly with renderers that depend on view scale.<\/p>\n<p>Because inset maps usually display data at different scales, creating a scale-dependent visualization is discouraged. This includes any visualization that involves <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-HeatmapRenderer.html\">heatmap<\/a>, <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-renderers-DotDensityRenderer.html\">dot density<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/visualization\/best-practices\/scale\/\">scale-dependent icons<\/a> and graduated symbols.<\/p>\n<p>For example, in the case of scale-dependent size ranges (graduated symbols), icons in Alaska (a view with a smaller scale) will appear smaller than they should when compared to parks in the lower 48 states. This is similar in concept to measuring distances in screen space in Alaska and comparing the same distance in the lower 48. Doing so communicates incorrect patterns to the end user.<\/p>\n<h2>Conclusion<\/h2>\n<p>Hopefully you found this post useful, and it inspires you to try inset maps in your own web applications.<\/p>\n<p>Explore the app! And feel free to <a href=\"https:\/\/github.com\/ekenes\/national-park-visits\">fork the code on GitHub<\/a> and modify it for your own data.<\/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":1859822,"post_author":"6781","post_date":"2023-03-08 12:04:23","post_date_gmt":"2023-03-08 20:04:23","post_content":"","post_title":"Instant Apps: Introducing Insets","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"arcgis-instant-apps-introducing-insets","to_ping":"","pinged":"","post_modified":"2024-12-12 14:27:12","post_modified_gmt":"2024-12-12 22:27:12","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1859822","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"1","filter":"raw"},{"ID":1128282,"post_author":"6561","post_date":"2021-02-03 09:00:41","post_date_gmt":"2021-02-03 17:00:41","post_content":"","post_title":"Visualize diverging datasets with size in web maps","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"visualize-diverging-datasets-with-size-in-web-maps","to_ping":"","pinged":"","post_modified":"2021-02-02 23:30:23","post_modified_gmt":"2021-02-03 07:30:23","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1128282","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":712232,"post_author":"6561","post_date":"2020-01-29 08:30:02","post_date_gmt":"2020-01-29 16:30:02","post_content":"","post_title":"How and why to adjust symbol size by scale in web maps","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"how-and-why-to-adjust-size-by-scale-in-web-maps","to_ping":"","pinged":"","post_modified":"2020-01-28 17:15:57","post_modified_gmt":"2020-01-29 01:15:57","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=712232","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":475292,"post_author":"6561","post_date":"2019-04-01 08:00:33","post_date_gmt":"2019-04-01 15:00:33","post_content":"","post_title":"Dot density for the web","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"dot-density-for-the-web","to_ping":"","pinged":"","post_modified":"2019-04-09 11:59:44","post_modified_gmt":"2019-04-09 18:59:44","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=475292","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/Screen-Shot-2021-04-28-at-3.06.48-PM.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/banner-7.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>Inset maps for the web<\/title>\n<meta name=\"description\" content=\"Inset maps have many uses in print maps, but do they have a place in web maps? This post explores how to use inset maps in web applications.\" \/>\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\/inset-maps-for-the-web\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Inset maps for the web\" \/>\n<meta property=\"og:description\" content=\"Inset maps have many uses in print maps, but do they have a place in web maps? This post explores how to use inset maps in web applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\" \/>\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-12T11:01:59+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\/inset-maps-for-the-web#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\"},\"author\":{\"name\":\"Kristian Ekenes\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b\"},\"headline\":\"Inset maps for the web\",\"datePublished\":\"2021-05-03T16:00:37+00:00\",\"dateModified\":\"2024-04-12T11:01:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\"},\"wordCount\":5,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"cartography\",\"data visualization\",\"JavaScript\",\"jsapi4\",\"smart mapping\"],\"articleSection\":[\"Developers\",\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\",\"name\":\"Inset maps for the web\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2021-05-03T16:00:37+00:00\",\"dateModified\":\"2024-04-12T11:01:59+00:00\",\"description\":\"Inset maps have many uses in print maps, but do they have a place in web maps? This post explores how to use inset maps in web applications.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Inset maps for the web\"}]},{\"@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":"Inset maps for the web","description":"Inset maps have many uses in print maps, but do they have a place in web maps? This post explores how to use inset maps in web applications.","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\/inset-maps-for-the-web","og_locale":"en_US","og_type":"article","og_title":"Inset maps for the web","og_description":"Inset maps have many uses in print maps, but do they have a place in web maps? This post explores how to use inset maps in web applications.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-04-12T11:01:59+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\/inset-maps-for-the-web#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web"},"author":{"name":"Kristian Ekenes","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5469f723fbfb78138efbb1da56e6aa9b"},"headline":"Inset maps for the web","datePublished":"2021-05-03T16:00:37+00:00","dateModified":"2024-04-12T11:01:59+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web"},"wordCount":5,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["cartography","data visualization","JavaScript","jsapi4","smart mapping"],"articleSection":["Developers","Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web","name":"Inset maps for the web","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2021-05-03T16:00:37+00:00","dateModified":"2024-04-12T11:01:59+00:00","description":"Inset maps have many uses in print maps, but do they have a place in web maps? This post explores how to use inset maps in web applications.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/inset-maps-for-the-web#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Inset maps for the web"}]},{"@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":"May 3, 2021","author_name":"Kristian Ekenes","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/kekenes","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/04\/banner-7.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":26451,"name":"cartography","slug":"cartography","term_group":0,"term_taxonomy_id":26451,"taxonomy":"post_tag","description":"","parent":0,"count":558,"filter":"raw"},{"term_id":30111,"name":"data visualization","slug":"data-visualization","term_group":0,"term_taxonomy_id":30111,"taxonomy":"post_tag","description":"","parent":0,"count":97,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"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"}],"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":2689,"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":214,"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":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\/1214862","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=1214862"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/1214862\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=1214862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=1214862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=1214862"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=1214862"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=1214862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}