Old school D3 from simpler times

All examples By author By category About

nunojpg

Full window Github gist

geoVoronoi Leaflet

<!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>

https://unpkg.com/leaflet@1.1.0/dist/leaflet.js

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-geo-projection.v2.min.js

https://unpkg.com/d3-geo-voronoi

https://unpkg.com/unique-colors