Costos in the New York area

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href='https://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css'>
    
    <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5.1/leaflet.min.js' type='text/javascript'></script>
    <script src='https://rawgithub.com/leaflet-extras/leaflet-providers/gh-pages/leaflet-providers.js' type='text/javascript'></script>
    
    <style>
    .rChart {
      display: block;
      margin-left: auto; 
      margin-right: auto;
      width: 800px;
      height: 400px;
    }  
    </style>
    
  </head>
  <body>
    <div id='Costos in the New York area' class='rChart leaflet'></div>  
    
    <script>
  var spec = {
 "dom": "Costos in the New York area",
"width":    800,
"height":    400,
"urlTemplate": "https://{s}.tile.osm.org/{z}/{x}/{y}.png",
"layerOpts": {
 "attribution": "Map data<a href=\"https://openstreetmap.org\">OpenStreetMap</a>\n         contributors, Imagery<a href=\"https://mapbox.com\">MapBox</a>" 
},
"center": [ 40.767, -73.938 ],
"zoom":     10,
"id": "Costos in the New York area" 
}
  var map = L.map(spec.dom)
    .setView(spec.center, spec.zoom);

if (spec.provider){
      L.tileLayer.provider(spec.provider).addTo(map)    
    } else {
		  L.tileLayer(spec.urlTemplate, spec.layerOpts).addTo(map)
    }
     
    L
  .marker([
 40.767,
-73.938 
])
  .addTo( map )
  .bindPopup("<p> Long Island Location </p>")
L
  .marker([
 40.655,
-74.009 
])
  .addTo( map )
  .bindPopup("<p> Brooklyn Location </p>")
    
    
    
    
    if (spec.circle2){
      for (var c in spec.circle2){
        var circle = L.circle(c.center, c.radius, c.opts)
         .addTo(map);
      }
    }
    
    
    
    
    
   
</script>
    
  </body>
</html>

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

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

https://rawgithub.com/leaflet-extras/leaflet-providers/gh-pages/leaflet-providers.js