Adding ArcGIS services to LeafletJS

<!DOCTYPE html>
<html> 
  <head>
    <title>Esri Leaflet Demo</title>
   <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
   
   
    
    <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>

Modified http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js to a secure url

https://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js