D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
FrieseWoudloper
Full window
Github gist
arrondissementen zonder turf
<!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>
https://d3js.org/d3.v4.min.js