D3 Examples - geoVoronoi Leaflet

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <title>geoVoronoi Leaflet</title>
​
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
    <script src="//unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//d3js.org/d3-geo-projection.v2.min.js"></script>
    <script src="//unpkg.com/d3-geo-voronoi"></script>
    <script src="//unpkg.com/unique-colors"></script>
​
    <style type="text/css">
        html,
        body {
            margin: 0px;
            padding: 0px;
        }
​
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
​
<body>
    <div id="map"></div>
​
    <script type="text/javascript">
        'use strict';
        d3.json("point.json", function (error, pointjson) {
            if (error) throw error;
​
            const map = L.map('map').setView([40.505, -8.09], 5);
            L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
​
            const proj = d3.geoEquirectangular().translate([0, 0]).scale(180 / Math.PI)
            const reflect = d3.geoIdentity().reflectY(true)
            const antimeridian_cut = a => d3.geoProject(d3.geoProject(a, proj), reflect);
​
            const voronoi = d3.geoVoronoi()(pointjson.features)
            const polygons = antimeridian_cut(voronoi.polygons())
​
            L.geoJSON(pointjson).addTo(map);
            const palette = unique_colors(polygons.features.length)
            let color = 0
            polygons.features.forEach(a => L.geoJSON(a, {
                style: {
                    "interactive": false,
                    "opacity": 0.2,
                    "color": palette[color++],
                    "weight": 0
                }
            }).addTo(map))
​
            let polyline = null;
            let polyline_on = false
            const onmousemove = function (e) {
                const latlng_mouse = e.latlng
                const site = voronoi.find(latlng_mouse.lng, latlng_mouse.lat)
                const latlng_site = [site.geometry.coordinates[1], site.geometry.coordinates[0]]
                const distance = latlng_mouse.distanceTo(latlng_site)
                if (polyline)
                    map.removeLayer(polyline)
                polyline = L.polyline([latlng_mouse, latlng_site], { color: 'blue' })
                polyline.addTo(map).bindTooltip((distance / 1000.0).toFixed(1) + " km - " + site.id, { permanent: true });
            }
            map.on("click", function (e) {
                if (polyline_on) {
                    polyline_on = false
                    map.off("mousemove");
                    if (polyline)
                        map.removeLayer(polyline)
                    polyline = null
                }
                else {
                    polyline_on = true
                    map.on("mousemove", onmousemove);
                }
            });
        });
    </script>
</body>
​
</html>
    