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

  <!-- Load Esri Leaflet Vector from CDN -->
  <script src="https://unpkg.com/esri-leaflet-vector@4.3.0/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 = {};
        let firstStyleLayer; // Store the first style layer

        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>