Leaflet starter with GeoJSON overlay

Notice here how we have to add another library (D3 in this case, but could be jQuery) to load the external GeoJSON file.

Built with blockbuilder.org

forked from enjalot's block: WWSD #1-b: Leaflet starter

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = L.map('map').setView([30, 0], 2);

L.tileLayer('https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
        attribution: 'Map tiles by <a href="https://stamen.com">Stamen Design</a>, under <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data  &copy; <a href="https://openstreetmap.org">OpenStreetMap</a>, under <a href="https://www.openstreetmap.org/copyright">ODbL</a>'
    }).addTo(map);
    
    //var url = "https://stamen.github.io/spatial-dataviz-for-data-scientists/data/world/ne_50m_populated_places_simple.geojson"
    var url = "ne_50m_populated_places_simple.geojson"
    d3.json(url, function(err, geojson) {
      
      console.log("geojson data:", geojson);
      L.geoJson(geojson).addTo(map);
      
    })
    
  </script>
</body>

Modified http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js