Web maps

Web map of Santa Monica trails created in Map Viewer and displayed in a custom app

What is a web map?

A is an in a portal that contains the properties and settings for a . The item includes properties such as the , , , and all of the styling settings. To create and save a web map you use or . These tools allow you to interactively design and configure a map. After creating a web map, you can use it to display the map in custom application. This type of application is known as a map app using web maps.

You use a web map when you want to:

  • Create a that you can share with other users and applications.
  • Interactively design and style layers in a .
  • Configure popups for data layers in a .
  • Display a map in an application built with .
  • Display a map using low-code/no-code app builders.
  • Securely store and access a in a .
  • Remotely configure a at any time to change your application.

How to use a web map

The general workflow to use a web map in a custom application is:

1. Create

To create a new , you can use or . These tools allow you to design and configure a map interactively and then save it in a .

Some of the key types of configurations you can make include following:

  • Initial extent: Set the starting location and zoom level for the map.
  • Basemap: Set the basemap style such as streets, navigation, light gray, or satellite imagery.
  • Data layers: Add to display features on the basemap.
  • Style data layers: Set the symbol color and renderers used to style .
  • Style popups: Set the presentation of the data and information when users click on data layers in the map.

To access and you need an with the appropriate user type, role, and permissions. Learn more about creating with these tools in ArcGIS Online > Create and ArcGIS Pro > Share.

2. Manage

After configuring a web map, you use or to save and share the web map in a . To save a web map as an item, you need to provide meta data such as the title, folder, categories, tags, and summary. When it is saved, the item is assigned a unique . The final step is to set the sharing level for the web map . The sharing level determines which ArcGIS users and applications can access the web map. The sharing level can be set to owner (private), group, organization, or everyone (public). To learn more about managing items and sharing levels, go to Content and data services > Manage content > Sharing.

3. Access

After you create and save a web map, you can access the with a custom application built with . To do so, you need the portal URL and id for the web map. With these, you can access the web map's preconfigured settings and display the map. The web map defines the initial state of the map when an application starts. If you need to remotely update the map in your application, you can use or to edit and save the web map while it is referenced. The changes will be reflected in your application the next time it is loaded.

Example code to access a web map:

ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for KotlinArcGIS Maps SDK for SwiftArcGIS Maps SDK for JavaArcGIS Maps SDK for QtArcGIS API for Python
Expand
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
      const webmap = new WebMap({
        portalItem: {
          id: "1531b5d82e674a50adcf2eaf95156bc7"  // Replace with your web map ID
        }
      });

Code examples

Display a web map with a pin

This example shows how to create a web map with and display it in a custom app. The web map is configured with a light gray basemap centered and zoomed to New York City. It also contains a pin (sketch symbol).

Create a web map

  1. Sign in to your portal and click Map.
  2. In Map Viewer, use Basemap to change the basemap to Light Gray Canvas.
  3. Move the map and zoom to New York City.
  4. Use Add > Create sketch layer to add a pin to the map. The web map should look like New York (web map with a pin).

Manage a web map

  1. In Map Viewer, Save the web map.
  2. Share the web map with the appropriate .

Access a web map

  1. Find the web map item ID or use 1531b5d82e674a50adcf2eaf95156bc7.
  2. Write code to create a .
  3. Load and display the web map.

When the web map is loaded by the application, it should look the same as the web map created with Map Viewer.

Custom app displaying a web map of New York with a pin.
ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for KotlinArcGIS Maps SDK for SwiftArcGIS Maps SDK for JavaArcGIS Maps SDK for QtArcGIS API for Python
Expand
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
      const webmap = new WebMap({
        portalItem: {
          id: "1531b5d82e674a50adcf2eaf95156bc7"  // Replace with your web map ID
        }
      });

Display a web map with a data layer

This example shows how to create a web map with and display it in a custom app. The web map is configured with a light gray basemap centered and zoomed to New York City. It also includes a USA Structures () that is saved with the web map. The layer has a formatted popup that displays building structure information when you click on the map.

Create a web map

  1. Sign in to your portal and click Map.
  2. In Map Viewer, use Basemap to change the basemap to Light Gray Canvas.
  3. Move the map and zoom to New York City.
  4. Use Add > Browse layers > Living Atlas > "USA Structures" and add the layer to the map. The web map should look like New York (web map with a layer).

Manage a web map

  1. In Map Viewer, Save the web map.
  2. Share the web map with the appropriate .

Access a web map

  1. Find the web map item ID or use 9d5bfb5340734021bf88041f8854a9f5.
  2. Write code to create a .
  3. Load and display the web map.

When the web map is loaded by the application, it should look the same as the web map created with Map Viewer.

Custom map app displaying a web map of New York with a building structure layer.
ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for .NETArcGIS Maps SDK for KotlinArcGIS Maps SDK for SwiftArcGIS Maps SDK for JavaArcGIS Maps SDK for QtArcGIS API for Python
Expand
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
      const webmap = new WebMap({
        portalItem: {
          id: "9d5bfb5340734021bf88041f8854a9f5" // Replace with your web map ID
        }
      });

Tutorials

Style layers in a web map

Use Map Viewer to style layers in a web map.


Map Viewer

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close