{"id":734752,"date":"2025-02-10T13:06:23","date_gmt":"2025-02-10T21:06:23","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&p=734752"},"modified":"2025-02-10T13:06:23","modified_gmt":"2025-02-10T21:06:23","slug":"simplify-your-web-app-development-with-map-viewer","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer","title":{"rendered":"Simplify Your Web App Development with Map Viewer"},"author":5752,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[25002],"tags":[485662,163382,295152,491592,290052],"arcuser_issues":[491442],"class_list":["post-734752","arcuser","type-arcuser","status-publish","format-standard","hentry","category-developers-corner","tag-arcgis-maps-sdk-for-javascript","tag-arcgis-online","tag-map-viewer","tag-web-app-building","tag-web-apps","arcuser_issues-winter-2025"],"acf":{"short_description":"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"There are often many different ways to develop a web application. Some are good. Others are better. In ArcGIS, starting with a web map built in Map Viewer is always best.\r\n\r\nArcGIS Maps SDK for JavaScript provides a wide range of APIs, components, and resources that enable you to build web mapping applications for a variety of workflows. Creating a map from scratch using the WebMap class is good, for instance, because it keeps you from having to do graphics development yourself.\r\n\r\nBut there is a better way. JavaScript Maps SDK boasts developer-friendly APIs and hundreds of samples that demonstrate how to build apps from the ground up using only JavaScript, CSS, and HTML. However, there is an often-overlooked tool that can significantly improve your web app development\u2014Map Viewer, available via ArcGIS Online or your ArcGIS Enterprise portal.\r\n\r\nIn this article, I\u2019ll demonstrate how using Map Viewer in your development workflow is actually the best approach to take when creating a web mapping application.\r\nAs an example, I'll use an application that explores the number of people visiting United States national parks from year to year. I\u2019ll also compare using Map Viewer with other common approaches that can be effective but don't confer the\r\nsame benefits."},{"acf_fc_layout":"content","content":"

The Benefits of Map Viewer for Developers<\/h2>\r\nMap Viewer\u2019s name doesn\u2019t adequately convey the full power of its capabilities. In addition to allowing you to view web maps, Map Viewer gives you tools to configure a vast array of properties for web maps and layers with a simplified, intuitive UI. These configurable properties include renderers, pop-ups, labels, basemaps, tables, and charts, just to name a few."},{"acf_fc_layout":"gallery","gallery_images":[734762,734772,734782]},{"acf_fc_layout":"content","content":"I\u2019ve created a web map that explores the number of visitors to US national parks in 2023. The size of each park's symbol corresponds to the number of visitors to that park. The color indicates how the number of visitors changed from the previous year.\r\n\r\nEach configuration panel in Map Viewer can be used to create the style (or renderer), labels, and pop-ups in this map.\r\n\r\nOnce configured, layers and maps can be saved as portal items. A portal item is a JSON-based file hosted on ArcGIS Online or your ArcGIS Enterprise portal instance. Portal items have a unique item ID that facilitates loading the corresponding web maps into any ArcGIS web application, and can be reused and shared with others."},{"acf_fc_layout":"image","image":734802,"image_position":"right","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"Map Viewer may seem like just an app that lets you create a map. But leveraging Map Viewer to save web maps and layers as portal items has several benefits for development workflows."},{"acf_fc_layout":"content","content":"

No-Code App Development<\/h2>\r\nIn many cases, you don\u2019t need to write a single line of code to deploy a web app based on a map that you have configured in Map Viewer. Esri provides many configurable apps, covering a variety of common use cases, that allow you to load the map in a predefined layout that you can easily modify according to your needs.\r\n\r\nWithin Map Viewer, simply click Create app, then select one of the configurable app options: ArcGIS Instant Apps, ArcGIS Experience Builder, ArcGIS StoryMaps, or ArcGIS Dashboards.\r\n\r\nThis workflow doesn\u2019t require any app development experience and makes maintaining apps easy."},{"acf_fc_layout":"content","content":"

Low-Code App Development<\/h2>\r\nYou can also load maps created in Map Viewer in custom low-code applications built with JavaScript Maps SDK. Out-of-the-box apps are not always the right approach for all app designs and use cases. This is where you'll need to put on your developer hat and use JavaScript Maps SDK. Fortunately, configuring a web map in Map Viewer greatly simplifies the code required to render the map in a simple web app.\r\n\r\nUsing this method, Listing 1 shows the entirety of the code required for this app."},{"acf_fc_layout":"image","image":734792,"image_position":"left","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"The app is a mere 38 lines long!\r\n\r\nAlso, note that by creating the app using map components and loading a web map configured in Map Viewer, I didn\u2019t have to write a single line of JavaScript. It is pure HTML and CSS, even for adding other map components, such as a legend.\r\n\r\nIn this case, the configuration of the map in Map Viewer takes the bulk of the time to create the app, whereas the time needed for actual app development\r\nwas insignificant.\r\n\r\nBuilding the same app without Map Viewer or map components involves using JavaScript to configure a layer with a pop-up containing a line chart, data-driven labels, renderer, and effects, and adding it to a map with a basemap containing a hillshade layer blended with three vector tile layers.\r\n\r\nTo create this, I needed to write 775 lines of JavaScript.\r\n\r\nThe APIs that were used to create this app are effective and have been carefully designed to be intuitive. However, setting this many configurations using\r\nonly JavaScript can be a tedious and time-consuming game of trial and error.\r\n\r\nHow do I know which stops and break points to set in my renderer? What about picking suitable colors that go well with my basemap? How do I design good labels with an appropriate font size?\r\n\r\nMap Viewer makes finding the answers to these questions easy. In fact, I find the process of exploring different visualizations and configurations enjoyable. Spending time guessing values in JavaScript, as well as refreshing and rebuilding my app just to see the changes, would be tedious, prone to silly errors, and frustrating in comparison. Map Viewer\u2019s components are highly interactive and performant, giving you instantaneous feedback throughout the configuration process.\r\n\r\nOnce you\u2019re done with your map, simply save it and paste the item ID of the web map into the item-id property of the arcgis-map component in your custom application."},{"acf_fc_layout":"image","image":734812,"image_position":"right","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"

Efficient Teamwork<\/h2>\r\nBecause configuring a map in Map Viewer uses an intuitive user interface, you don\u2019t actually need development experience at all to be part of the web app creation process. Therefore, an app developer doesn't need to spend the bulk of the time in the app development cycle.\r\n\r\nIf you have an in-house GIS specialist, they can do the map configuration on their own and provide you\u2014the developer\u2014with the item ID, so you don\u2019t need to worry about any of the map configuration.\r\n\r\nThis also saves time when team dynamics involve a lot of change requests between developers and cartographic designers. The GIS specialist can maintain control of the cartography of the map while removing the extra burden on the developer."},{"acf_fc_layout":"image","image":734822,"image_position":"left","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Flexibility for Changes<\/h2>\r\nMap Viewer also makes it easy to deploy changes to maps that are consumed by many web and mobile applications. Data changes, either due to edits or live feeds, may necessitate changes in a web map\u2019s configuration. For example, in the Visits to national parks<\/em> map, the data will eventually be updated with more current numbers. When that happens, the web map pop-up, renderer, and labels will need to be updated to point to the field containing numbers for recent visits.\r\n\r\nIf all the configurations were done in JavaScript, the app code would need to be updated, rebuilt, and redeployed with even the most minor changes. Imagine building 10 apps, consuming the same data, that also had to have consistent layer configurations, and being forced to copy and paste layer configurations 10 times\u2014all in JavaScript. Any change you make would have to be made in each of \u00a0the apps.\r\n\r\nIf the configuration is done entirely in the portal, then the app code doesn\u2019t need to change because the associated item ID remains constant. A change to the portal item automatically gets picked up the next time the app is loaded. This makes the process for updating map and layer configurations more flexible and thus more efficient."},{"acf_fc_layout":"content","content":"

The Capacity to Do More<\/h2>\r\nBecause layer configurations can be saved to the portal, you can reuse items in multiple apps, saving you development time and maintenance. This increased efficiency and flexibility in creating web apps naturally leads to an increased capacity to do more. You will have the time and ability to create and maintain more web apps than you could without the portal.\r\n\r\nBuilding a mapping application using the powerful APIs available in ArcGIS Maps SDK for JavaScript is good. Using the map components to reduce your JavaScript is a better approach. But starting with Map Viewer and saving your configurations to portal items will save you time and maintenance and leave more time for focusing on core app functionality and interactivity.\r\n\r\nGenerally speaking, when building an app with the JavaScript Maps SDK, I always suggest striving to write as few lines of code as possible. If you can get away with no code using an app builder, do it!"}],"references":null},"yoast_head":"\nSimplify Your Web App Development with Map Viewer | Winter 2025 | ArcUser<\/title>\n<meta name=\"description\" content=\"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.\" \/>\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\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simplify Your Web App Development with Map Viewer | Winter 2025 | ArcUser\" \/>\n<meta property=\"og:description\" content=\"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/02\/arcuser-banner-simplify-wide.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Simplify Your Web App Development with Map Viewer | Winter 2025 | ArcUser\" \/>\n<meta name=\"twitter:description\" content=\"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/02\/arcuser-banner-simplify-wide.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer\",\n\t \"name\": \"Simplify Your Web App Development with Map Viewer | Winter 2025 | ArcUser\",\n\t \"isPartOf\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t },\n\t \"datePublished\": \"2025-02-10T21:06:23+00:00\",\n\t \"description\": \"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.\",\n\t \"breadcrumb\": {\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"Simplify Your Web App Development with Map Viewer\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t \"name\": \"Esri\",\n\t \"description\": \"Esri Newsroom\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t },\n\t \"query-input\": {\n\t \"@type\": \"PropertyValueSpecification\",\n\t \"valueRequired\": true,\n\t \"valueName\": \"search_term_string\"\n\t }\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/41c803b2ea8734c36f9c4e9586d1449d\",\n\t \"name\": \"Amy Ambard\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t \"url\": \"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g\",\n\t \"contentUrl\": \"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g\",\n\t \"caption\": \"Amy Ambard\"\n\t },\n\t \"url\": \"\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Simplify Your Web App Development with Map Viewer | Winter 2025 | ArcUser","description":"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.","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\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer","og_locale":"en_US","og_type":"article","og_title":"Simplify Your Web App Development with Map Viewer | Winter 2025 | ArcUser","og_description":"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/02\/arcuser-banner-simplify-wide.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_title":"Simplify Your Web App Development with Map Viewer | Winter 2025 | ArcUser","twitter_description":"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.","twitter_image":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2025\/02\/arcuser-banner-simplify-wide.jpg","twitter_site":"@Esri","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer","url":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer","name":"Simplify Your Web App Development with Map Viewer | Winter 2025 | ArcUser","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2025-02-10T21:06:23+00:00","description":"There are plenty of ways to develop a web app. In ArcGIS, starting with a web map built in Map Viewer simplifies the process.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/simplify-your-web-app-development-with-map-viewer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"Simplify Your Web App Development with Map Viewer"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/41c803b2ea8734c36f9c4e9586d1449d","name":"Amy Ambard","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f356480172f8ad0bc8d72b855e84171c52f1944c7c7779f3e425d73bf3efa3c7?s=96&d=blank&r=g","caption":"Amy Ambard"},"url":""}]}},"sort_order":"14","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/734752","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcuser"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/5752"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser\/734752\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=734752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=734752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=734752"},{"taxonomy":"arcuser_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcuser_issues?post=734752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}