Basemaps

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
        esriConfig.apiKey = "YOUR_ACCESS_TOKEN"

        const map = new Map({
          basemap: "arcgis/streets",
          //basemap: "arcgis/navigation"
          //basemap: "arcgis/topographic"
          //basemap: "arcgis/outdoor"
          //basemap: "arcgis/light-gray"
          //basemap: "arcgis/imagery"
          //basemap: "osm/standard"
          //basemap: "osm/navigation"
          //basemap: "osm/blueprint"
        })

        const view = new MapView({
          map: map,
          center: [-118.805, 34.027],
          zoom: 12,
          container: "viewDiv",
          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
const apiKey = "YOUR_ACCESS_TOKEN";
const map = L.map("map").setView([2.35, 48.856], 6);
L.esri.Vector.vectorBasemapLayer("arcgis/light-gray", {
  apikey: apiKey,
  language: 'local',
  version: 2
}).addTo(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
const apiKey = "YOUR_ACCESS_TOKEN";
const map = L.map("map").setView([2.35, 48.856], 6);
L.esri.Vector.vectorBasemapLayer("arcgis/dark-gray", {
  apikey: apiKey,
  language: 'ja',
  version: 2
}).addTo(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
      const worldView = "morocco"
      const map = new maplibregl.Map({
        container: "map", // ID of the div element
        style: `https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/arcgis/light-gray?token=${apiKey}&worldview=${worldView}`,
        zoom: 3,
        center: [-7.09, 31], // Starting location [longitude, latitude]
      })

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
        const basemapStyle = "arcgis/navigation"
        // const basemapStyle = "arcgis/streets"
        // const basemapStyle = "arcgis/outdoor"
        // const basemapStyle = "arcgis/light-gray"
        // const basemapStyle = "arcgis/dark-gray"
        const basemap = new Basemap({
          baseLayers: [
            new TileLayer({
              url: `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/beta/${basemapStyle}/static`
            })
          ]
        });

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

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-91.2996, 37.1174], // USA (x, y)
          zoom: 4
        });

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
      const updateBasemapLanguage = (language) => {
        let basemapLayer = new TileLayer({
          url: `https://static-map-tiles-api.arcgis.com/arcgis/rest/services/static-basemap-tiles-service/beta/${basemapEnum}/static`
        });

        // Remove existing language interceptor
        if (languageInterceptor) {
          esriConfig.request.interceptors = esriConfig.request.interceptors.filter(interceptor => interceptor !== languageInterceptor);
        }

        languageInterceptor = {
          urls: [basemapLayer.url],
          before({ requestOptions }) {
            requestOptions.query.language = language;
          },
        };
        esriConfig.request.interceptors.push(languageInterceptor);

        map.add(basemapLayer);
        basemapLayer.refresh();
      };

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
  const featureLayer = new FeatureLayer({
    portalItem: {
      id: "4d9fb5c0a6344407aec56f47a11482b5" // State Geologic Map Compilation – Geology
    }
  });
  const basemap = new Basemap({
    baseLayers: [featureLayer]
  });