You will learn: how to use the Map Viewer to create a web map that can be used in your apps.

The Map Viewer allows you to create, edit and save web maps in ArcGIS Online. This is handy for developers because it allows you to compose maps interactively and then load them into your applications, reducing the amount of code you have to write. The viewer allows you to search for and add basemaps and layers to your map, style layers, configure pop-ups, edit data, perform analyses, and much more. A saved web map can easily be accessed by your custom applications to display all of its contents and settings. Furthermore, when you update a web map, the changes will automatically be reflected in apps that access them, allowing you to change the map without making code changes. Learn more about web maps and the specification here.

In this lab, you will use the Map Viewer to add layers to create a web map of trails and parks near LA.


  1. Go to ArcGIS Online and sign in.

  2. In the top nav, click Map to launch the Map Viewer.

  3. In the top bar, click + Add > Add Layer from Web. Use the urls below and the dialog to add the following layers:

    • Parks and Open Space: https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Parks_and_Open_Space/FeatureServer/0
    • Trails: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0
    • Trailheads: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0
    • Boundary: https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Boundary/FeatureServer/0
  4. Zoom and pan to the Santa Monica Mountains until the features fill the view.

  5. Save the map.

Congratulations, you're done!

Your web map should look something like this.


Explore the web map JSON

A web map is a JSON structure stored as an item in ArcGIS Online. To explore the structure, try pasting this url into your web browser (insert your item id where indicated):

https://www.arcgis.com/sharing/rest/content/items/{ your-item-id }/data

e.g. https://www.arcgis.com/sharing/rest/content/items/c1ed0753d9be4492a6d4c167febf2163/data

NOTE: You might want to try formatting the JSON with this JSON editor tool.

It's good to know how to access the JSON because you can copy the JSON structures for things like renderers and pop-ups, and use them directly in your code to format the layers and control the behavior in your app. See the fromJSON() JavaScript documentation for more details.

If you are interested in digging deeper, you can learn more about the web map specification here.