Map Started

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
   <script src="https://d3js.org/d3.v4.min.js"></script>
   <script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
  	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,300' rel='stylesheet' type='text/css'>

<body>
   <div id="mapid"></div>
  
  <script>
    
    var mymap = L.map('mapid').setView([51.505, -0.09], 13);
    
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=	 {accessToken}', { attribution: 'Map data &copy; <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'your.mapbox.project.id',
    accessToken: 'your.mapbox.public.access.token'
}).addTo(mymap);
    
    var marker = L.marker([51.5, -0.09]).addTo(mymap);
    
    var circle = L.circle([51.508, -0.1], 800, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
   }).addTo(mymap);
    
   var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
   ]).addTo(mymap);
    
    circle.bindPopup("I am a circle.").openPopup();
    
    // Feel free to change or delete any of the code you see in this editor!
    /*var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 120)
      .style("font-size", 36)
      .style("font-family", "monospace")*/

</script>
</body>

https://d3js.org/d3.v4.min.js

https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js