Switch between basemap layers

Switch between all available basemap layers packaged with Esri Leaflet. For additional explanation, go to the Change the basemap style tutorial.
Use dark colors for code blocksCopy
<!DOCTYPE html>
<html lang="en">

  <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.19/dist/esri-leaflet.js"></script>

    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.3.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>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 14px;
      color: #323232;
    }
    </style>
    <div id="map"></div>
    <script>
    const accessToken = "YOUR_ACCESS_TOKEN";

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

    function getV2Basemap(style) {
      return L.esri.Vector.vectorBasemapLayer(style, {
        token: accessToken
      });
    }

    L.esri.get(
      "https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/self",
      { token: accessToken },
      (error, response) => {
        if (error) {
          console.error("Error fetching basemap styles:", error);
          return;
        }

        const styles = {};

        const basemapStyles = response.styles.filter((style) => !style.deprecated);
        basemapStyles.forEach((style, index) => {
          const layer = getV2Basemap(style.path);
          styles[style.name] = layer;

          if (index === 0) layer.addTo(map);
        });

        L.control.layers(styles, null, { collapsed: false }).addTo(map);
      }
    );
    </script>
  </body>

</html>