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.
ArcGIS 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.
But 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—Map Viewer, available via ArcGIS Online or your ArcGIS Enterprise portal.
In this article, I’ll demonstrate how using Map Viewer in your development workflow is actually the best approach to take when creating a web mapping application.
As an example, I’ll use an application that explores the number of people visiting United States national parks from year to year. I’ll also compare using Map Viewer with other common approaches that can be effective but don’t confer the
same benefits.
The Benefits of Map Viewer for Developers
Map Viewer’s name doesn’t 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.
-
Map Viewer’s configuration panel streamlines data exploration and styling. Using the panel provides a shortcut for what would otherwise be hours of programmatic trial and error.
I’ve 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.
Each configuration panel in Map Viewer can be used to create the style (or renderer), labels, and pop-ups in this map.
Once 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.
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.
No-Code App Development
In many cases, you don’t 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.
Within 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.
This workflow doesn’t require any app development experience and makes maintaining apps easy.
Low-Code App Development
You 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.
Using this method, Listing 1 shows the entirety of the code required for this app.
The app is a mere 38 lines long!
Also, note that by creating the app using map components and loading a web map configured in Map Viewer, I didn’t have to write a single line of JavaScript. It is pure HTML and CSS, even for adding other map components, such as a legend.
In 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
was insignificant.
Building 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.
To create this, I needed to write 775 lines of JavaScript.
The APIs that were used to create this app are effective and have been carefully designed to be intuitive. However, setting this many configurations using
only JavaScript can be a tedious and time-consuming game of trial and error.
How 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?
Map 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’s components are highly interactive and performant, giving you instantaneous feedback throughout the configuration process.
Once you’re 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.
Efficient Teamwork
Because configuring a map in Map Viewer uses an intuitive user interface, you don’t 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.
If you have an in-house GIS specialist, they can do the map configuration on their own and provide you—the developer—with the item ID, so you don’t need to worry about any of the map configuration.
This 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.
Flexibility for Changes
Map 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’s configuration. For example, in the Visits to national parks 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.
If 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—all in JavaScript. Any change you make would have to be made in each of the apps.
If the configuration is done entirely in the portal, then the app code doesn’t 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.
The Capacity to Do More
Because 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.
Building 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.
Generally 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!
About the author
