Switch between all available basemap layers packaged with Esri Leaflet. For additional explanation, go to the Change the basemap layer tutorial.
<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.5/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 accessToken = "YOUR_ACCESS_TOKEN";
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", {
token: accessToken
});
allEnums.forEach((enumString) => {
vectorTiles[enumString] = L.esri.Vector.vectorBasemapLayer(enumString, {
token: accessToken
});
});
L.control
.layers(vectorTiles, null, {
collapsed: false
})
.addTo(map);
vectorTiles.Default.addTo(map);
</script>
</body>
</html>