{"id":2634792,"date":"2024-12-20T13:12:52","date_gmt":"2024-12-20T21:12:52","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2634792"},"modified":"2024-12-20T13:19:21","modified_gmt":"2024-12-20T21:19:21","slug":"web-maps-the-foundation-of-arcgis-web-applications","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/web-maps-the-foundation-of-arcgis-web-applications","title":{"rendered":"Web maps\u2014the foundation of ArcGIS web applications"},"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":[33371,25971],"industry":[],"product":[36831,36551,36601],"class_list":["post-2634792","blog","type-blog","status-publish","format-standard","hentry","category-developers","category-mapping","tag-map-viewer","tag-portal","product-js-api-arcgis","product-arcgis-online","product-developers"],"acf":{"short_description":"In ArcGIS, the web map should be the foundation of any custom web application. This post shows how to leverage web maps in a custom app.","flexible_content":[{"acf_fc_layout":"content","content":"

In Good, better, best\u2014Simplify your web app development with Map Viewer<\/a> I demonstrate the benefits of using Map Viewer<\/a> as a starting point for creating web apps in ArcGIS. I recommend you first read that article as it sets a foundation for this one. In this article, I’ll demonstrate how to create a custom web app, based on a web map configured in Map Viewer, that adds functionality not available in Map Viewer or other configurable ArcGIS apps.<\/p>\n

In the previous article, I configured this web map<\/a>, which shows the number of people who visited U.S. national parks in 2023.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2614092,"id":2614092,"title":"map viewer table","filename":"map-viewer-table.png","filesize":593062,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/good-better-best-simplify-your-web-app-development-with-map-viewer\/map-viewer-table","alt":"The national park data contains more than 100 columns containing data for the number of visitors to each park from 1905-2023.","author":"6561","description":"","caption":"The national park data in the following examples contains more than 100 columns storing data for the number of visitors to each park from 1905-2023.","name":"map-viewer-table","status":"inherit","uploaded_to":2613782,"date":"2024-12-05 00:31:43","modified":"2024-12-16 23:33: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":1979,"height":952,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table.png","medium-width":464,"medium-height":223,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table.png","medium_large-width":768,"medium_large-height":369,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table.png","large-width":1920,"large-height":924,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table-1536x739.png","1536x1536-width":1536,"1536x1536-height":739,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table.png","2048x2048-width":1979,"2048x2048-height":952,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table-826x397.png","card_image-width":826,"card_image-height":397,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/map-viewer-table-1920x924.png","wide_image-width":1920,"wide_image-height":924}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html?webmap=8aa8e543e8e0446e8e2937e2b743b9f0"},{"acf_fc_layout":"content","content":"

I loaded all the data and configurations stored in this web map to a custom application<\/a> built with the ArcGIS Maps SDK for JavaScript (JS Maps SDK). We’ll use the web map and this basic application as the foundation for building a more dynamic application in this article.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2614032,"id":2614032,"title":"simple viewer app","filename":"simple-viewer-app.png","filesize":1142853,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/good-better-best-simplify-your-web-app-development-with-map-viewer\/simple-viewer-app","alt":"","author":"6561","description":"","caption":"","name":"simple-viewer-app","status":"inherit","uploaded_to":2613782,"date":"2024-12-05 00:26:06","modified":"2024-12-05 00:26: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":1716,"height":896,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app.png","medium-width":464,"medium-height":242,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app.png","medium_large-width":768,"medium_large-height":401,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app.png","large-width":1716,"large-height":896,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app-1536x802.png","1536x1536-width":1536,"1536x1536-height":802,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app.png","2048x2048-width":1716,"2048x2048-height":896,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app-826x431.png","card_image-width":826,"card_image-height":431,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/simple-viewer-app.png","wide_image-width":1716,"wide_image-height":896}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ekenes.github.io\/portal-vs-scratch\/viewer-only.html"},{"acf_fc_layout":"content","content":"

Remember, loading the web map in a custom app built with the JS Maps SDK saves me about 700 lines of code from the start. <\/p>\n

Go beyond the web map with the JS Maps SDK<\/h2>\n

Let’s take this app a step further and add data exploration capabilities not currently available in Map Viewer. I would like the user to explore the data from 1905 to 2023 using a slider, not just 2023 data. Since Map Viewer, and none of Esri’s configurable apps, allow me to do this, I’ll use the JS Maps SDK to build a custom application to accomplish this goal. The JS Maps SDK gives developers full control over building innovative and interactive user experiences.<\/p>\n"},{"acf_fc_layout":"content","content":"

I\u2019ll add calcite components to help with the layout, including a slider at the bottom of the app. This will allow the user to explore data from multiple years. Note the arcgis-map<\/code> component that references the item ID of the initial web map.<\/p>\n

<calcite-shell<\/span>><\/span>\r\n  <arcgis-map<\/span> item-id<\/span>="8aa8e543e8e0446e8e2937e2b743b9f0"<\/span>><\/span>\r\n    <arcgis-zoom<\/span> position<\/span>="top-left"<\/span>><\/span><\/arcgis-zoom<\/span>><\/span>\r\n    <arcgis-expand<\/span> expanded<\/span> position<\/span>="top-left"<\/span>><\/span>\r\n      <arcgis-legend<\/span>><\/span><\/arcgis-legend<\/span>><\/span>\r\n    <\/arcgis-expand<\/span>><\/span>\r\n  <\/arcgis-map<\/span>><\/span>\r\n  <calcite-shell-panel<\/span> id<\/span>="slider-panel"<\/span> slot<\/span>="panel-bottom"<\/span> layout<\/span>="horizontal"<\/span>><\/span>\r\n    <div<\/span> id<\/span>="slider-container"<\/span>><\/span>\r\n      <label<\/span>><\/span>\r\n        <span<\/span> id<\/span>="slider-label"<\/span>><\/span>Year: 2023<\/span<\/span>><\/span>\r\n        <calcite-slider<\/span>\r\n          has-histogram<\/span> id<\/span>="yearSlider"<\/span> label-handles<\/span> label-ticks<\/span>\r\n          ticks<\/span>="5"<\/span> min<\/span>="1905"<\/span> max<\/span>="2023"<\/span> value<\/span>="2023"<\/span> step<\/span>="1"<\/span>\r\n          min-label<\/span>="1905"<\/span> max-label<\/span>="2023"<\/span> scale<\/span>="m"<\/span>\r\n        ><\/span><\/calcite-slider<\/span>><\/span>\r\n      <\/label<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n  <\/calcite-shell-panel<\/span>><\/span>\r\n<\/calcite-shell<\/span>><\/span>\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":2614042,"id":2614042,"title":"slider app - no histogram","filename":"slider-app-no-histogram.png","filesize":797370,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/good-better-best-simplify-your-web-app-development-with-map-viewer\/slider-app-no-histogram","alt":"A custom application loading the previously configured web map, and adding a slider for exploring how the data changed over time.","author":"6561","description":"","caption":"A custom application loading the previously configured web map, and adding a slider for exploring how the data changed over time.","name":"slider-app-no-histogram","status":"inherit","uploaded_to":2613782,"date":"2024-12-05 00:29:09","modified":"2024-12-20 20:19:47","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1196,"height":775,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram.png","medium-width":403,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram.png","medium_large-width":768,"medium_large-height":498,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram.png","large-width":1196,"large-height":775,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram.png","1536x1536-width":1196,"1536x1536-height":775,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram.png","2048x2048-width":1196,"2048x2048-height":775,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram-718x465.png","card_image-width":718,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram.png","wide_image-width":1196,"wide_image-height":775}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/slider-app-no-histogram.png"},{"acf_fc_layout":"content","content":"
At this point, I haven’t been required to write any JavaScript. However, since I want to add custom behavior to the slider, I now need to define this using JavaScript.<\/p>\n
<body<\/span>><\/span>\r\n  <calcite-shell<\/span>><\/span>\r\n    <!-- HTML is "collapsed" here to conserve space in this snippet --><\/span>\r\n  <\/calcite-shell<\/span>><\/span>\r\n\r\n  <script<\/span>><\/span>\r\n    ...\/\/ JS code goes here to control behavior of slider...<\/span>\r\n  <\/span><\/script<\/span>><\/span>\r\n<\/body<\/span>><\/span>\r\n\r\n<\/html<\/span>><\/span>\r\n<\/code><\/pre>\n
There are two events I need to define behavior for: when the map loads<\/strong> and when the user slides the slider handles<\/strong>.<\/p>\n
Event 1: When the map loads<\/h3>\n
The Calcite slider includes an option for adding a histogram. I want to set the histogram to represent the total number of visits to all parks for each year corresponding to the slider stops.<\/p>\n
When the map loads, the app queries statistics for all national park visits for each year. I then push these numbers to the Calcite Slider<\/a>\u2019s histogram property, which renders nicely on top of the slider.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2630212,"id":2630212,"title":"Screenshot 2024-12-17 at 10.26.27\u202fAM","filename":"Screenshot-2024-12-17-at-10.26.27\u202fAM.png","filesize":2016569,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/good-better-best-simplify-your-web-app-development-with-map-viewer\/screenshot-2024-12-17-at-10-26-27-am","alt":"Calcite slider allows you to add a histogram. In this example, the significant drop in visits to national parks in 2020 is clearly visible.","author":"6561","description":"","caption":"The Calcite slider allows you to add a histogram. In this example, the significant drop in visits to national parks in 2020 is clearly visible.","name":"screenshot-2024-12-17-at-10-26-27-am","status":"inherit","uploaded_to":2613782,"date":"2024-12-17 19:27:09","modified":"2024-12-20 21:04:10","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":2706,"height":1450,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM.png","medium-width":464,"medium-height":249,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM.png","medium_large-width":768,"medium_large-height":412,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM.png","large-width":1920,"large-height":1029,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM-1536x823.png","1536x1536-width":1536,"1536x1536-height":823,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM-2048x1097.png","2048x2048-width":2048,"2048x2048-height":1097,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM-826x443.png","card_image-width":826,"card_image-height":443,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM-1920x1029.png","wide_image-width":1920,"wide_image-height":1029}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/Screenshot-2024-12-17-at-10.26.27\u202fAM.png"},{"acf_fc_layout":"content","content":"
The code for querying this data is below.<\/p>\n
require<\/span>([\r\n  "esri\/intl"<\/span>\r\n], (esriIntl<\/span>) =><\/span> {\r\n  const<\/span> yearSlider = document<\/span>.querySelector<\/span>("calcite-slider"<\/span>);\r\n  const<\/span> arcgisMap = document<\/span>.querySelector<\/span>("arcgis-map"<\/span>);\r\n  const<\/span> sliderLabel = document<\/span>.getElementById<\/span>("slider-label"<\/span>);\r\n\r\n  arcgisMap.addEventListener<\/span>("arcgisViewReadyChange"<\/span>, async<\/span> () => {\r\n\r\n    const<\/span> layer = arcgisMap.map<\/span>.layers<\/span>.at<\/span>(0<\/span>);\r\n\r\n    const<\/span> stats = await<\/span> queryTotalVisits<\/span>({ layer });\r\n    const<\/span> histogram = createHistogram<\/span>(stats);\r\n    yearSlider.histogram<\/span> = histogram;\r\n\r\n    const<\/span> visits2023 = esriIntl.formatNumber<\/span>(stats[`F${2023<\/span>}<\/span>`<\/span>]);\r\n    sliderLabel.innerText<\/span> = `${visits2023}<\/span> visits in ${2023<\/span>}<\/span>`<\/span>;\r\n\r\n  \/\/ Returns an object containing total visits<\/span>\r\n  \/\/ for each year 1905-2023<\/span>\r\n  \/\/ {<\/span>\r\n  \/\/   F2020: 67926884<\/span>\r\n  \/\/   F2021: 92243362<\/span>\r\n  \/\/   F2022: 88660294<\/span>\r\n  \/\/ }<\/span>\r\n  async<\/span> function<\/span> queryTotalVisits<\/span>({ layer }<\/span>) {\r\n    const<\/span> query = layer.createQuery<\/span>();\r\n    query.outStatistics<\/span> = [];\r\n\r\n    const<\/span> startYear = 1905<\/span>;\r\n    const<\/span> endYear = 2023<\/span>;\r\n\r\n    for<\/span> (let<\/span> year = startYear; year <= endYear; year++) {\r\n      query.outStatistics<\/span>.push<\/span>({\r\n        onStatisticField<\/span>: `F${year}<\/span>`<\/span>,\r\n        outStatisticFieldName<\/span>: `F${year}<\/span>`<\/span>,\r\n        statisticType<\/span>: "sum"<\/span>\r\n      });\r\n    }\r\n\r\n    const<\/span> { features } = await<\/span> layer.queryFeatures<\/span>(query);\r\n    const<\/span> stats = features[0<\/span>].attributes<\/span>;\r\n    return<\/span> stats;\r\n  }\r\n\r\n  \/\/ transform histogram result into the format required<\/span>\r\n  \/\/ by the CalciteSlider component, for example...<\/span>\r\n  \/\/ [<\/span>\r\n  \/\/   ...<\/span>\r\n  \/\/   [2020, 67926884],<\/span>\r\n  \/\/   [2021, 92243362],<\/span>\r\n  \/\/   ...<\/span>\r\n  \/\/ ]<\/span>\r\n  function<\/span> createHistogram<\/span>(stats<\/span>) {\r\n    const<\/span> histogram = [];\r\n    for<\/span> (const<\/span> stat in<\/span> stats) {\r\n      const<\/span> year = parseInt<\/span>(stat.replace<\/span>("F"<\/span>, ""<\/span>));\r\n      histogram.push<\/span>([year, stats[stat]]);\r\n    }\r\n    return<\/span> histogram;\r\n  }\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"
Event 2: When the user interacts with the slider<\/h3>\n
Each time the user interacts with the slider, the app needs to update the layer’s renderer, labels, and popup template to represent data for the indicated year. Note this is not a filter<\/a> capability. This is an update to various layer configurations originally saved in Map Viewer based on a single slider interaction.<\/strong><\/p>\n
\/\/ Each time the slider handle is moved, update the data<\/span>\r\n\/\/ displayed in the layer's renderer, labels, popup, and slider<\/span>\r\nyearSlider.addEventListener<\/span>("calciteSliderInput"<\/span>, () =><\/span> {\r\n  const<\/span> year = yearSlider.value<\/span>;\r\n\r\n  const<\/span> renderer = updateRenderer<\/span>({ layer, year });\r\n  layer.renderer<\/span> = renderer;\r\n\r\n  const<\/span> labelingInfo = updateLabels<\/span>({ layer, year });\r\n  layer.labelingInfo<\/span> = labelingInfo;\r\n\r\n  const<\/span> popupTemplate = updatePopupTemplate<\/span>({ layer, year });\r\n  layer.popupTemplate<\/span> = popupTemplate;\r\n\r\n  const<\/span> visits = esriIntl.formatNumber<\/span>(stats[`F${year}<\/span>`<\/span>]);\r\n  sliderLabel.innerText<\/span> = `${visits}<\/span> visits in ${year}<\/span>`<\/span>;\r\n});\r\n<\/code><\/pre>\n
Let’s explore the functions that update each of the following configurations when the slider’s value changes.<\/p>\n