D3 Examples - Leaflet with a topojson layer

xxxxxxxxxx
 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>A basic map with Leaflet</title>
    
    <!--add Leaflet CSS-->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
      integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
      crossorigin=""/>
    
    <!--our own style rules-->
    <style type="text/css">
      body, html {
        height: 90%;
      }
      #map-container {
        height: 100%;
      }
    </style>
  </head>
  <body>
    
    <!--The div in which the map will be created-->
    <div id="map-container"></div>
    
    <!--load leaflet.js-->
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
    integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>
​
    <!--we need the topojson library as well-->
    <script src="https://unpkg.com/topojson@3.0.2/dist/topojson.min.js"></script>
    
    <!--our own code to create the map-->
    <script>
      let map = L.map('map-container');
      map.setView([52.268, 4.998], 7);
      let bglayer_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
        subdomains: 'abcd',
        maxZoom: 19
      });
      
      bglayer_Positron.addTo(map);
      
      //extend Leaflet to create a GeoJSON layer from a TopoJSON file
      L.TopoJSON = L.GeoJSON.extend({
        addData: function (data) {
          var geojson, key;
          if (data.type === "Topology") {
            for (key in data.objects) {
              if (data.objects.hasOwnProperty(key)) {
                geojson = topojson.feature(data, data.objects[key]);
                L.GeoJSON.prototype.addData.call(this, geojson);
              }
            }
            return this;
          }
          L.GeoJSON.prototype.addData.call(this, data);
          return this;
        }
      });
      L.topoJson = function (data, options) {
        return new L.TopoJSON(data, options);
      };
      //create an empty geojson layer
      //with a style and a popup on click
      var geojson = L.topoJson(null, {
        style: function(feature){
          return {
            color: "#000",
            opacity: 1,
            weight: 1,
            fillColor: '#35495d',
            fillOpacity: 0.8
          }
        },
        onEachFeature: function(feature, layer) {
          layer.bindPopup('<p>'+feature.properties.name+'</p>')
        }
      }).addTo(map);
      //fill: #317581;
      //define a function to get and parse geojson from URL
      async function getGeoData(url) {
        let response = await fetch(url);
        let data = await response.json();
        console.log(data)
        return data;
      }
      
      //fetch the geojson and add it to our geojson layer
      getGeoData('gemeenten2017.topojson').then(data => geojson.addData(data));
    </script>
  </body>
</html>
​
    