Skip to content

Open Basemap styles

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

Map with Open Basemap styles from the Basemap Styles service

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

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
openosm-stylelanguage
Vector tilesService API > Sources
openosm-style-reliefNone
Vector tiles, map tilesService API > Sources
openosm-style-relief/baseNone
Vector tilesService API > Sources
opennavigationlanguage
Vector tilesService API > Sources
opennavigation-darklanguage
Vector tilesService API > Sources
openstreetslanguage
Vector tilesService API > Sources
openstreets-reliefNone
Vector tilesService API > Sources
openstreets-relief/baseNone
Vector tilesService API > Sources
openstreets-nightlanguage
Vector tilesService 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.

OSM style (deprecated)Open styles
OSM BlueprintOpen Basemaps Blueprint
OSM HybridOpen Basemaps Hybrid
OSM Hybrid DetailOpen Basemaps Hybrid Detail
OSM NavigationOpen Basemaps Navigation
OSM Navigation DarkOpen Basemaps Navigation Dark
OSM StandardOpen Basemaps OpenStreetMap Style
OSM Standard ReliefOpen Basemaps OpenStreetMap Style Relief
OSM Standard Relief BaseOpen Basemaps OpenStreetMap Style Relief Base
OSM StreetsOpen Basemaps Streets
OSM Streets ReliefOpen Basemaps Streets Relief
OSM Streets Relief BaseOpen Basemaps Streets Relief Base
OSM Light GrayOpen Basemaps Light Gray
OSM Light Gray BaseOpen Basemaps Light Gray Base
OSM Light Gray LabelsOpen Basemaps Light Gray Labels
OSM Dark GrayOpen Basemaps Dark Gray
OSM Dark Gray BaseOpen Basemaps Dark Gray Base
OSM Dark Gray LabelsOpen Basemaps Dark Gray Labels

Code examples

Get all style names

This example shows how to use the ArcGIS Basemap Styles service /self request to return all available styles. The styles are filtered by provider === "open" to get the styles in the ArcGIS Open style family.

Use dark colors for code blocksCopy
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);
  });

Display an Open Basemaps style

This example shows how to use the service as a data source for a basemap using the OpenStreetMap style from the Open Basemaps style family. To see all of the styles, go to the style table above.

Map displaying the OpenStreetMap style
ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptEsri LeafletMapLibre GL JSOpenLayers
Expand
Use dark colors for code blocksCopy
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,
        },
      });
Expand

Change the place label language

The Basemap Styles service displays global place labels by default. This example shows how to display the styles with localized and language-based place labels.

Map displaying the OpenStreetMap style with language options
ArcGIS Maps SDK for JavaScriptArcGIS Maps SDK for JavaScriptEsri LeafletMapLibre GL JSOpenLayers
Expand
Use dark colors for code blocksCopy
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
          }),
        })
      }
Expand

Steps

  1. Create a map.
  2. Reference a style from the Basemap Styles service.
  3. In the style URL, set the language parameter with a language code.
  4. Add the basemap to the map.

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