Switch between basemap layers

Switch between all available basemap layers packaged with Esri Leaflet. For additional explanation, go to the Change the basemap layer tutorial.

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
<html>
  <head>
    <meta charset="utf-8" />
    <title>Switch between basemap layers</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

    <!-- Load Esri Leaflet from CDN -->
    <script src="https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js"></script>

    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.2.2/dist/esri-leaflet-vector.js" crossorigin=""></script>
    <style>
      html,
      body,
      #map {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
    </style>
  </head>
  <body>
    <style>
      #basemaps-wrapper {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 400;
        background: white;
        padding: 10px;
      }
      #basemaps {
        margin-bottom: 5px;
      }
    </style>
    <div id="map"></div>
    <script>
      const apiKey = "YOUR_API_KEY";

      const map = L.map("map").setView([-33.87, 151.2], 10);

      const vectorTiles = {};
      const allEnums = [
        "arcgis/imagery",
        "arcgis/imagery/standard",
        "arcgis/imagery/labels",
        "arcgis/light-gray",
        "arcgis/light-gray/base",
        "arcgis/light-gray/labels",
        "arcgis/dark-gray",
        "arcgis/dark-gray/base",
        "arcgis/dark-gray/labels",
        "arcgis/navigation",
        "arcgis/navigation-night",
        "arcgis/streets",
        "arcgis/streets-night",
        "arcgis/streets-relief",
        "arcgis/streets-relief/base",
        "arcgis/outdoor",
        "arcgis/topographic",
        "arcgis/topographic/base",
        "arcgis/oceans",
        "arcgis/oceans/base",
        "arcgis/oceans/labels",
        "osm/standard",
        "osm/standard-relief",
        "osm/standard-relief/base",
        "osm/streets",
        "osm/streets-relief",
        "osm/streets-relief/base",
        "osm/light-gray",
        "osm/light-gray/base",
        "osm/light-gray/labels",
        "osm/dark-gray",
        "osm/dark-gray/base",
        "osm/dark-gray/labels",
        "arcgis/terrain",
        "arcgis/terrain/base",
        "arcgis/terrain/detail",
        "arcgis/community",
        "arcgis/charted-territory",
        "arcgis/charted-territory/base",
        "arcgis/colored-pencil",
        "arcgis/nova",
        "arcgis/modern-antique",
        "arcgis/modern-antique/base",
        "arcgis/midcentury",
        "arcgis/newspaper",
        "arcgis/hillshade/light",
        "arcgis/hillshade/dark"
      ];

      vectorTiles.Default = L.esri.Vector.vectorBasemapLayer("arcgis/streets", {
        apiKey
      });
      allEnums.forEach((enumString) => {
        vectorTiles[enumString] = L.esri.Vector.vectorBasemapLayer(enumString, {
          apiKey
        });
      });

      L.control
        .layers(vectorTiles, null, {
          collapsed: false
        })
        .addTo(map);

      vectorTiles.Default.addTo(map);
    </script>
  </body>
</html>

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