nunojpg/.block

## .block
license: mit

## index.html
<!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>

## point.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              point.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>