Esri Leaflet
This content has moved to developers.arcgis.com. Please update your bookmarks!

Leaflet Control.Layers

This sample demonstrates how to pass ArcGIS Services to Leaflet's native Control.Layers which allows users to switch between different base layers and switch overlays on/off.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Leaflet Control.Layers</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>

<div id="map"></div>

<script>
  var gray = L.esri.Vector.vectorBasemapLayer('ArcGIS:LightGray', {
    apikey: apiKey // Replace with your API key - https://developers.arcgis.com
  });

  var states = L.esri.featureLayer({
    url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3',
    style: function (feature) {
      return { color: '#bada55', weight: 2 };
    }
  });

  var map = L.map('map', {
    center: [39, -97.5],
    zoom: 4,
    layers: [gray, states]
  });

  var baseLayers = {
    Grayscale: gray,
    Newspaper: L.esri.Vector.vectorBasemapLayer('ArcGIS:Newspaper', {
      apikey: apiKey // Replace with your API key - https://developers.arcgis.com
    })
  };

  var overlays = {
    'U.S. States': states
  };

  // https://leafletjs.com/reference.html#control-layers
  L.control.layers(baseLayers, overlays).addTo(map);
</script>

</body>
</html>