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. arcgis/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: Not supported.
      • 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
Example
Data type
Data providers
openosm-style
Vector tilesService API > Sources
openosm-style-relief
Vector tiles, map tilesService API > Sources
openosm-style-relief/base
Vector tilesService API > Sources
opennavigation
Vector tilesService API > Sources
opennavigation-dark
Vector tilesService API > Sources
openstreets
Vector tilesService API > Sources
openstreets-relief
Vector tilesService API > Sources
openstreets-relief/base
Vector tilesService API > Sources
openstreets-night
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
9
import { request } from '@esri/arcgis-rest-request';

const selfCallURL = "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/self";

request(selfCallURL, {httpMethod: "GET"})
  .then(results => {
    const openStyles = results.styles.filter(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
63
64
      const openStyle = new Basemap({
          style: new BasemapStyle({
            id: "open/osm-style"
          })
        });

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

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