Designing Maps Before Building Apps

[AllanLaframboise]

As a map app developer, one of the easiest ways to improve productivity before writing a line of code is to use the ArcGIS platform tools such as the Map Viewer or the Scene Viewer. The viewers are online map editors that you can use to design maps and scenes interactively. Once created, the maps can be consumed by your custom apps.

Designing maps with the viewers can save you a significant amount of time during the application development process, especially when you are in the experimental and prototype phase. For example, it's a lot easier to change, apply, and visualize map settings interactively when you are selecting basemaps, deciding the best symbols and colors to use for layers, and when you are trying to select the best fields and content to display in popups. The viewers also have built-in features like smart mapping that help you make better styling decisions based on the type of data in your map. If you are new to ArcGIS and the viewers, you might want to check out these Data and Design DevLabs to learn how to create your own maps.

The best part of taking this "design a map first" approach is that once you are finished designing your map, you can save it in ArcGIS Online or Enterprise, and then use the ArcGIS APIs to load the entire map (along with all of its settings) in your app with just a few lines of code, saving you a ton of development time.

Let's take a look at how to take advantage of this workflow.

Step 1: Get a web map ID

Web maps and web scenes are stored as items in ArcGIS Online and Enterprise. Each item has it's own unique ID e.g. 71a8b15a0383449a9a65a4f84ba76f07. To display a map in your app via code, you need the ID. If you don't have an ID, you have two choices: 1) Search in the gallery for an existing map on ArcGIS Online (there are literally thousands to choose from); or 2) Create a new one from scratch with the Map Viewer or Scene Viewer and store it in ArcGIS Online. Or if you want, you can use the map and ID below.

http://www.arcgis.com/home/webmap/viewer.html?webmap=71a8b15a0383449a9a65a4f84ba76f07 

This web map has been designed with the World Vector Tile Topographic basemap, an overlay of World Hillshade 50% with transparency, and with a trails layer on top that have been classified by difficulty. The popups have also been customized to display textual information as well as some field data.

You can view the map or make your own copy of this one here.

Step 2: Load the web map

Now that you have a map ID, you can use the ArcGIS API of your choice to load and display the map. With the ID, the ArcGIS APIs know how to access the item (PortalItem) on ArcGIS Online. The item is stored as a JSON structure based on the web map and web scene  specification.  

In this case, we'll just use one of the samples from the ArcGIS API for JavaScript and the ID above to load the map. You should notice the that map has all of the same settings and behavior as the map in the viewer.

Feel free to copy the jsBin and give it a try.

Step 3: Update the web map (and app)

Now here's the best part! Since the app is referencing the item ID on ArcGIS Online, if you go back to the viewer and update the map, and then refresh your app, the changes will be automatically applied to your application as well - no code updates required! This is a very powerful way to "remotely" edit the map in your app without actually changing any code.

In this case we just changed the basemap in the Map Viewer to Satellite, saved it, and then re-ran the jsBin.

Feel free to try to update and save your map and then refresh your web map.

Summary

If you are not already using the viewers to design your maps and scenes for your apps, then be sure to give this technique a try. It's a lot easier to experiment with color and symbol changes in a viewer than it is through code. This is one of the most effective ways to optimize your development work-flow with the ArcGIS platform.