D3 Examples - Adding ArcGIS services to LeafletJS

xxxxxxxxxx
 
<!DOCTYPE html>
<html> 
  <head>
    <title>Esri Leaflet Demo</title>
   <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
   <!-- -Services at: https://viewer.nationalmap.gov/example/services/serviceList.html -->
   <!-- Details on esri-leaflet at https://github.com/Esri/esri-leaflet -->
    <!--[if lte IE 8]><link rel="stylesheet" href="/the/path/to/leaflet.ie.css"><![endif]-->
    <style>
    html, body {
    height: 100%;
    margin: 0;
  }
  
  #map{
   
    height:100%;
  }
    </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.min.js"></script>
    <script src="esri-leaflet.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var template = "<h3>{NAME}</h3>{ACRES} Acres<br><small>Property ID: {PROPERTYID}<small>"
​
      var map = L.map('map', {
      scrollWheelZoom: false,
      inertia: true,
      inertiaDeceleration: 2000
      }).setView([37.930029, -96.521934], 4);
​
      //L.esri.basemapLayer("Gray").addTo(map);
​
 L.esri.tiledMapLayer("https://basemap.nationalmap.gov/ArcGIS/rest/services/USGSTopo/MapServer", {
  opacity: 0.50,
  zIndex:2
}).addTo(map);
​
L.esri.dynamicMapLayer("https://as1.sesync.org/arcgis/rest/services/OA_Vulnerability/Global_Annual_Chlorophyll_A_2002/MapServer/", {
  opacity : 1
}).addTo(map);
​
L.esri.dynamicMapLayer("https://services.nationalmap.gov/ArcGIS/rest/services/NEXRAD_Weather/MapServer/", {
  opacity : 1
}).addTo(map);
​
    </script>
  </body>
</html>
    