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
{"type": "FeatureCollection","features": [
{ "type": "Feature", "id": "serpins", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -8.211114, 40.157062 ] } },
{ "type": "Feature", "id": "covilha", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -7.491367, 40.278332 ] } },
{ "type": "Feature", "id": "coimbra", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -8.413871, 40.213943] } },
{ "type": "Feature", "id": "lisboa", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -9.129477, 38.722196] } },
{ "type": "Feature", "id": "porto", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -8.611897, 41.159245] } }
]}
	<!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>
	{"type": "FeatureCollection","features": [
	{ "type": "Feature", "id": "serpins", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -8.211114, 40.157062 ] } },
	{ "type": "Feature", "id": "covilha", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -7.491367, 40.278332 ] } },
	{ "type": "Feature", "id": "coimbra", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -8.413871, 40.213943] } },
	{ "type": "Feature", "id": "lisboa", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -9.129477, 38.722196] } },
	{ "type": "Feature", "id": "porto", "properties": {}, "geometry": { "type": "Point", "coordinates": [ -8.611897, 41.159245] } }
	]}