Skip To Content ArcGIS for Developers Sign In Dashboard


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 tutorial, 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:
    • Trails:
    • Trailheads:
    • Boundary:

    NOTE: If the layers have not been previously configured and saved with styles, the application will load each layer and apply a default symbol. To learn how to style the layers and improve the visualization, try the Style feature layers tutorial.

  4. In the top bar, type Mahou Riviera, Malibu, California into Search and locate the peninsula. Zoom out until you can see some trailheads, trails, and parks.

  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):{ your-item-id }/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.