Create a web map

Learn how to use the Map Viewer to create a web map for your application.

A web map is a map that you can create with the Map Viewer, stored in ArcGIS, and then use in applications. The Map Viewer allows you to interactively style and configure maps by setting the basemap layer, data layers, layer styles, pop-up settings, and layer visibility ranges. All of the settings are stored as JSON in an item. A number of ArcGIS applications and APIs can access web map items, read the JSON, and then re-create the original scene.

In this tutorial, you use the Map Viewer to create and save a web map using hosted feature layers. You will also inspect the JSON that contains the web map settings.

Prerequisites

You need an ArcGIS Developer or ArcGIS Online account to create and save web maps in Map Viewer.

Steps

Set the basemap layer

To create a web map with the Map Viewer, start by setting the basemap layer. Use the Streets vector tile basemap layer.

Open the Map Viewer and sign into your ArcGIS account.
In the left-panel, click Basemap > Current Basemap > Streets.
In the left-panel, click Basemap to close the window.

Add data layers

To display data in a web map, you can add hosted feature layers for trailheads, trails, and parks in the Santa Monica Mountain area.

In the left-panel, click Add data > Web service.
For each URL:
- Copy and paste the URL > Add to map.
  - 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
Click Save. At minimum, you need to provide a title and tags for your web map.

Your web map should look something like this.

View the web map JSON

A web map item contains JSON that defines the map properties. The structure of the JSON is defined by the Web Map Specification. Applications can access a web map item or read the JSON directly to format layers and create a map, so it is useful to know how to get the JSON for a web map.

In your web browser, find the item ID at the end of the URL for the web map just saved.
- For example: c1ed0753d9be4492a6d4c167febf2163
In a new browser tab, copy and paste the following URL and insert your item ID. This will return the JSON for your web map.
- https://www.arcgis.com/sharing/rest/content/items/<ITEM_ID>/data
- For example: https://www.arcgis.com/sharing/rest/content/items/c1ed0753d9be4492a6d4c167febf2163/data

In the JSON, identify the operational (data) layer and basemap layer settings set earlier. Here's an example:

Use dark colors for code blocksCopy
{
  "operationalLayers":[
    {
      "id":"Boundary_6040",
      "layerType":"ArcGISFeatureLayer",
      "url":"https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Boundary/FeatureServer/0",
      "visibility":true,
      "opacity":1,
      "title":"Boundary",
      "itemId":"30cf3b4c11c5408d87f255ba4e9aa611",
      "popupInfo":{
        "title":"Boundary_0",
        "fieldInfos":[
          {
            "fieldName":"OBJECTID",
            "label":"OBJECTID",
            "isEditable":true,
            "tooltip":"",
            "visible":false,
            "format":{
Expand

Now that you have a web map, you can choose to style it further with Map Viewer, or load it into an application by accessing it by its item ID.

What's next?

Learn how to use additional tools, APIs, and location services in these tutorials:

Style layers in a web map

Use Map Viewer to style layers in a web map.

Create a custom basemap style

Use the Vector tile style editor to style a vector tile basemap layer.

Solution

View solution

Estimated time

10 minutes

Mapping APIs and location services

Create a web map

Solution

Estimated time

Was this page helpful?

Was this page helpful?

Mapping APIs and location services

Create a web map

Prerequisites

Steps

Set the basemap layer

Add data layers

View the web map JSON

What's next?

Style layers in a web map

Create a custom basemap style

Display a web map

Display a custom basemap style

Solution

Estimated time

Was this page helpful?

Was this page helpful?