Switching basemaps

Switching between all available basemaps packaged with Esri Leaflet. For additional explanation, see the tutorial.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Switching basemaps</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet Vector from CDN -->
  <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"
    integrity="sha512-EMt/tpooNkBOxxQy2SOE1HgzWbg9u1gI6mT23Wl0eBWTwN9nuaPtLAaX9irNocMrHf0XhRzT8B0vXQ/bzD0I0w=="
    crossorigin=""></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </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>
  var map = L.map('map').setView([-33.87, 151.2], 10);

  var vectorTiles = {};
  var allEnums = [
    'ArcGIS:Imagery',
    'ArcGIS:Imagery:Standard',
    'ArcGIS:Imagery:Labels',
    'ArcGIS:LightGray',
    'ArcGIS:LightGray:Base',
    'ArcGIS:LightGray:Labels',
    'ArcGIS:DarkGray',
    'ArcGIS:DarkGray:Base',
    'ArcGIS:DarkGray:Labels',
    'ArcGIS:Navigation',
    'ArcGIS:NavigationNight',
    'ArcGIS:Streets',
    'ArcGIS:StreetsNight',
    'ArcGIS:StreetsRelief',
    'ArcGIS:StreetsRelief:Base',
    'ArcGIS:Topographic',
    'ArcGIS:Topographic:Base',
    'ArcGIS:Oceans',
    'ArcGIS:Oceans:Base',
    'ArcGIS:Oceans:Labels',
    'OSM:Standard',
    'OSM:StandardRelief',
    'OSM:StandardRelief:Base',
    'OSM:Streets',
    'OSM:StreetsRelief',
    'OSM:StreetsRelief:Base',
    'OSM:LightGray',
    'OSM:LightGray:Base',
    'OSM:LightGray:Labels',
    'OSM:DarkGray',
    'OSM-DarkGray:Base',
    'OSM-DarkGray:Labels',
    'ArcGIS:Terrain',
    'ArcGIS:Terrain:Base',
    'ArcGIS:Terrain:Detail',
    'ArcGIS:Community',
    'ArcGIS:ChartedTerritory',
    'ArcGIS:ChartedTerritory:Base',
    'ArcGIS:ColoredPencil',
    'ArcGIS:Nova',
    'ArcGIS:ModernAntique',
    'ArcGIS:ModernAntique:Base',
    'ArcGIS:Midcentury',
    'ArcGIS:Newspaper',
    'ArcGIS:Hillshade:Light',
    'ArcGIS:Hillshade:Dark'
  ];

  // the L.esri.Vector.vectorBasemapLayer basemap enum defaults to 'ArcGIS:Streets' if omitted
  vectorTiles.Default = L.esri.Vector.vectorBasemapLayer(null, {
    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>
Edit this sample on GitHub
Terms