D3 Examples - arrondissementen zonder turf

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
    <style>
        path {
            fill: #ccc;
            stroke: #fff;
            stroke-width: .5px;
        }
        path:hover {
            fill: orange;
        }
        div.tooltip { 
            position: absolute;     
            text-align: center;     
            width: 100%;          
            height: 14px;         
            padding: 2px;       
            font: 12px sans-serif;    
            background: #fff; 
            border: 0px;        
            pointer-events: none;   
        white-space: nowrap;    
        }
    </style>
</head
<body>    
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <div class="graph"></div>
    <script>
        var width = 700, height = 400;
        var svg = d3.select(".graph").append("svg")
                                     .attr("viewBox", "0 0 " + (width) + " " + (height))
                                     .style("max-width", "700px");
        var url = "https://geodata.nationaalgeoregister.nl/cbsgebiedsindelingen/wfs?service=wfs&request=GetFeature&typeName=cbs_arrondissementsgebied_2019_gegeneraliseerd&outputFormat=json&srsName=EPSG:4326"; 
        var tooltip = d3.select("body")
                        .append("div") 
                        .attr("class", "tooltip")       
                        .style("opacity", 0);
        d3.json(url, function(error, mapdata) {
            var projection = d3.geoMercator();
            var path = d3.geoPath().projection(projection);
            projection.fitSize([width, height], {"type": "FeatureCollection", "features": mapdata.features});
            svg.append("g")
               .attr("class", "gemeente")
               .selectAll("path")
               .data(fixed)
               .enter()
               .append("path")
               .attr("d", path)
               .on("mouseover", function(d) {    
                   tooltip.transition()    
                          .duration(200)    
                          .style("opacity", .9);    
                   tooltip.html(d.properties.statnaam)  
                          .style("left", (d3.event.pageX) + "px")   
                          .style("top", (d3.event.pageY - 28) + "px");  
                })          
                .on("mouseout", function(d) {   
                   tooltip.transition()    
                          .duration(500)    
                          .style("opacity", 0); 
                }); 
        });
    </script>
</body>
    