Open Basemap styles

Use the ArcGIS Basemap Styles service to display Open Basemap styles with ArcGIS SDKs and open source libraries.

Open Basemap styles

The Basemap Styles service supports styles in the Open Basemap style family. The styles reference data from Overture Maps and open source data providers such as

OpenStreetMap (OSM), Microsoft, Esri Community Maps, and other open data sources.

The styles are categorized into the following groups:

• Streets: Road networks, urban, and community features e.g. open/streets, open/osm-style, open/navigation
• Satellite: Satellite imagery and labels e.g. open/hybrid
• Reference: Minimal geographic features such as boundaries and place labels e.g. open/light-gray, open/dark-gray
• Creative: Alternative cartographic designs e.g. open/blueprint

See all of the styles below.

How to display an Open Basemaps style

The general steps to display an basemap style are:

1. Set the service URL, path and query parameters:
   • Service URL
     • https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/{style_response}/{style_family}/{style_name}?{parameters}&token=<ACCESS_TOKEN>.
   • Path parameters
     • Style response: styles or webmaps
     • Style family: open
     • Style name: For example osm-style, hybrid, and navigation. See all names below.
   • Query parameters
     • Style preferences: language
     • Access token: token
2. Set the access token either as authorization header or query parameter.
3. Display the style with a client API. See the Code examples.
4. Display Esri and data attribution.

To learn more about the service parameters, access tokens, and attribution requirements, go to the Introduction to the ArcGIS Basemap Styles service.

Styles

StreetsSatelliteReferenceCreative

Streets styles show road networks, urban, and community features. These styles are typically used for geocoding and routing applications.

Style family	Style name	Style preferences	Example	Data type	Data providers
open	osm-style	language		Vector tiles	Service API > Sources
open	osm-style-relief	None		Vector tiles, map tiles	Service API > Sources
open	osm-style-relief/base	None		Vector tiles	Service API > Sources
open	navigation	language		Vector tiles	Service API > Sources
open	navigation-dark	language		Vector tiles	Service API > Sources
open	streets	language		Vector tiles	Service API > Sources
open	streets-relief	None		Vector tiles	Service API > Sources
open	streets-relief/base	None		Vector tiles	Service API > Sources
open	streets-night	language		Vector tiles	Service API > Sources

OSM styles to Open styles

If your existing application uses a deprecated OSM style, use the table below to update the equivalent Open style.

Code examples

1
2
3
4
5
6
7
8
const selfCallURL = "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/self";

fetch(selfCallURL, {method: "GET"})
  .then(response => response.json())
  .then(results => {
    const openStyles = results.styles.filter(style=>style.provider === 'open');
    console.log(openStyles);
  });

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
      const openStyle = new Basemap({
          style: new BasemapStyle({
            id: "open/osm-style"
          })
        });

      const map = new Map({
        basemap: openStyle,
        constraints: {
          snapToZoom: false,
        },
      });

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
      const updateLanguage = (languageCode) => {
        arcgisMap.basemap = new Basemap({
          style: new BasemapStyle({
            id: styleName,
            serviceUrl: baseStyleURL,
            language: languageCode, // e.g. "ar" for Arabic, "ja" for Japanese
          }),
        })
      }