Open Basemap styles

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

Open Basemap Styles

The Static Basemap Tiles service supports styles in the Open Basemap style family. The styles reference data from Esri, the Overture Maps Foundation, and other authoritative data provides 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 and open/osm-style
• Satellite: Satellite imagery and labels e.g. open/hybrid/detail
• Reference: Minimal geographic features such as boundaries and place labels e.g. open/light-gray and open/dark-gray

See all the styles below.

How to display an Open Basemap style

The general steps to display a basemap style are:

1. Set the service URL, path and query parameters:
   • Service URL
     • https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/{style_family}/{style_name}/static/tile/{z}/{y}/{x}?{parameters}&token=<ACCESS_TOKEN>.
   • Path parameters
     • Style family: open
     • Style name: For example open/osm-style or open/light-gray . See all names below.
   • Query parameters
     • Style preferences: Not available
     • Access token: token
2. Set the access token either as an 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 Static Basemap Tiles service.

Styles

StreetsSatelliteReference

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
open	osm-style		Map tiles	Service API > Sources
open	navigation		Map tiles	Service API > Sources
open	navigation-dark		Map tiles	Service API > Sources
open	streets		Map tiles	Service API > Sources

Code examples

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

const selfCallURL = "https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/self";


fetch(selfCallURL, {
  method: "GET",
  headers: {"Authorization": `Bearer ${YOUR_ACCESS_TOKEN}`},
})
  .then((response) => response.json())
  .then((result) => {
    const openStyles = result.styles.filter(style=>style.styleFamily === 'open');
    console.log(openStyles)}
  )
  .catch((error) => console.error(error));

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
[
  {
    "name": "Open Basemap Dark Gray",
    "path": "/open/dark-gray",
    "provider": "open",
    "styleFamily": "open",
    "url": "https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/open/dark-gray/static",
    "templateUrl": "https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/open/dark-gray/static/tile/{z}/{y}/{x}",
    "thumbnailUrl": "https://www.arcgis.com/sharing/rest/content/items/2d2acb267d854c45a1a61d76412c678b/info/thumbnail/thumbnail1734492474046.png",
    "supportedLanguageCodes": [],
    "supportedWorldviewCodes": [],
    "description": "This Open Basemap Dark Gray Canvas Base map style is symbolized with a dark gray, neutral background style with minimal colors, content, and labels that is designed to draw attention to your thematic content.",
    "complete": true
  },
  {
    "name": "Open Basemap Hybrid Detail",
    "path": "/open/hybrid/detail",
    "provider": "open",
    "styleFamily": "open",
    "url": "https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/open/hybrid/detail/static",

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

      //const basemapStyle = "open/osm-style"
      const basemapStyle = "open/navigation";
      // const basemapStyle = "open/navigation-dark"
      // const basemapStyle = "open/streets"
      // const basemapStyle = "open/light-gray"
      // const basemapStyle = "open/dark-gray"
      // const basemapStyle = "open/hybrid/detail"

      const basemap = new Basemap({
        baseLayers: [
          new TileLayer({
            url: `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/v1/${basemapStyle}/static`,
          }),
        ],
      });

      const map = new Map({
        basemap: basemap,
      });

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-43.4227, -22.8283], // Brazil (x, y)
        zoom: 9,
      });