D3 Examples - geoVoronoi Google Maps

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <title>geoVoronoi Google Maps</title>
​
    <script src="//maps.googleapis.com/maps/api/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 = new google.maps.Map(document.getElementById('map'), {
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.TERRAIN,
                center: new google.maps.LatLng(40, -8),
            });
​
            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())
​
            map.data.addGeoJson(pointjson)
            const palette = unique_colors(polygons.features.length)
            let color = 0
            polygons.features.forEach(a => { a.properties.fillColor = palette[color++]; return map.data.addGeoJson(a) })
​
            map.data.setStyle(function (feature) {
                let fillColor = feature.getProperty('fillColor')
                if (fillColor)
                    return {
                        clickable: false,
                        fillOpacity: 0.2,
                        fillColor: fillColor,
                        strokeWeight: 0,
                    }
                return {}
            });
            let polyline = null;
            let marker = 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 = new google.maps.LatLng(site.geometry.coordinates[1], site.geometry.coordinates[0])
                const distance = google.maps.geometry.spherical.computeDistanceBetween(latlng_mouse, latlng_site);
                if (polyline)
                    polyline.setMap(null)
                if (marker)
                    marker.setMap(null)
                polyline = new google.maps.Polyline({
                    path: [latlng_site, latlng_mouse],
                    geodesic: true,
                    clickable: false,
                    strokeColor: 'blue',
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                });
                polyline.setMap(map);
                marker = new google.maps.Marker({
                    position: latlng_mouse,
                    clickable: false,
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        strokeColor: "blue",
                        scale: 3
                    },
                    label: (distance / 1000.0).toFixed(1) + " km " + site.id,
                    map: map
                });
            }
            google.maps.event.addListener(map, 'click', function (e) {
                if (polyline_on) {
                    polyline_on = false
                    google.maps.event.clearListeners(map, 'mousemove');
                    if (polyline)
                        polyline.setMap(null)
                    polyline = null
                    if (marker)
                        marker.setMap(null)
                    marker = null
                }
                else {
                    polyline_on = true
                    google.maps.event.addListener(map, 'mousemove', onmousemove)
                }
            });
        });
    </script>
</body>
​
</html>
    