ArcGIS Basemap styles

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 === "arcgis" to get the styles in the ArcGIS Basemap style family.

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 arcGISStyles = results.styles.filter(style => style.provider === "arcgis");
    console.log(arcGISStyles);
  });

Display an ArcGIS Basemap style

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

Steps

1. Create a map.
2. Reference a style from the Basemap Styles service.
3. Add the basemap to the map.

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
      const navigation = new Basemap({
          style: new BasemapStyle({
            id: "arcgis/navigation" //arcgis/navigation, //arcgis/topographic
          })
        });

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

Change the place label language

The Basemap Styles service displays the English language labels by default. However, you can update the place label language by using the language code provided by the service. To render localized place labels, set the language parameter to local. The localized labels will render after zoom level 10.

For a list of available languages, go to Basemap Styles service > Languages

Steps

1. Create a map or scene.
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.

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
    const updateLanguage = (languageCode) => {
      arcgisMap.basemap = new Basemap({
        style: new BasemapStyle({
          id: "arcgis/light-gray",
          language: languageCode // e.g. "ar" for Arabic, "ja" for Japanese
        })
      });
    }

Display a basemap style with worldview

The Basemap Styles service displays country boundaries and labels using the default global worldview. This example shows how to display basemap borders and labels based on a specific view of a country. Worldviews are only available for some ArcGIS basemap styles such as navigation, streets, and community. OSM styles are not supported.

Steps

1. Create a map or scene.
2. Reference a basemap layer from the Basemap Styles service.
3. In the style URL, set the worldview parameter with a supported worldview name.
4. Add the basemap to the map.

This example uses the arcgis/light-gray map style and sets the worldview for boundaries and labels to morocco. To find all worldview options, go to Basemap Styles service.

1
2
3
4
5
6
7
8
9
10
11
12
13
const worldview = new Basemap({
  style: new BasemapStyle({
    id: "arcgis/light-gray", //arcgis/navigation, //arcgis/topographic
    worldview: "morocco"
  });
});

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

Display a basemap style with places

Some ArcGIS Basemap styles such as navigation allow you to display places at high zoom levels by setting the places parameter to all or attributed. To learn more about which styles support places and how to display them, go to Basemap places.

Steps

1. Create a map or scene.
2. Reference a style that supports places. For example navigation or streets.
3. In the style URL, set the places parameter to all or attributed.
4. Add the basemap to the map.

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
    const allPlaces = new Basemap({
      style: new BasemapStyle({
        id: "arcgis/navigation",
        places: "all"
      })
    });

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