Leaflet starter with GeoJSON overlay by almccon

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

index.html

<!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="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
   <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.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('//{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
        attribution: 'Map tiles by <a href="//stamen.com">Stamen Design</a>, under <a href="//creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data  &copy; <a href="//openstreetmap.org">OpenStreetMap</a>, under <a href="//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>