GoogleMap Voronoi Diagram by shimizu

index.html

<!DOCTYPE html>
<html>
<head>
<title>D3.js GoogleMap Voronoi Diagram</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//shimz.me/example/d3js/geo_example/geo_template/topojson.v0.min.js"></script>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html, body{
    margin: 0px;
    padding: 0px;
}
html, body, #map_canvas {
	width: 100%;
	height: 100%;
}

.SvgOverlay {
	position: relative;
	width: 900px;
	height: 600px;           
}

.SvgOverlay svg {
	position: absolute;
	top: -4000px;
	left: -4000px;
	width: 8000px;
	height: 8000px;        
}

</style>
</head>
<body>
<div id="map_canvas"></div>
<br>

<script type="text/javascript">

d3.json('point.geojson', function(pointjson){
	main(pointjson); 
});

function main(pointjson) {
        
	//Google Map 初期化
	var map = new google.maps.Map(document.getElementById('map_canvas'), {
		zoom: 11,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: new google.maps.LatLng(36.322356, 139.013057),       
	});

		
	var overlay = new google.maps.OverlayView(); //OverLayオブジェクトの作成

	//オーバレイ追加
	overlay.onAdd = function () {

		var layer = d3.select(this.getPanes().overlayLayer).append("div").attr("class", "SvgOverlay");
		var svg = layer.append("svg");
		var svgoverlay = svg.append("g").attr("class", "AdminDivisions");
		
		//再描画時に呼ばれるコールバック    
		overlay.draw = function () {
			var markerOverlay = this;
			var overlayProjection = markerOverlay.getProjection();
	
			//Google Mapの投影法設定
			var googleMapProjection = function (coordinates) {
				var googleCoordinates = new google.maps.LatLng(coordinates[1], coordinates[0]);
				var pixelCoordinates = overlayProjection.fromLatLngToDivPixel(googleCoordinates);
				return [pixelCoordinates.x + 4000, pixelCoordinates.y + 4000];
			}

			//母点位置情報
			var pointdata = pointjson.features;
			
			//ピクセルポジション情報
			var positions = [];

			pointdata.forEach(function(d) {		
				positions.push(googleMapProjection(d.geometry.coordinates)); //位置情報→ピクセル
			});
	
			//ボロノイ変換関数
			var polygons = d3.geom.voronoi(positions);
			
			var pathAttr ={
				"d":function(d, i) { return "M" + polygons[i].join("L") + "Z"},
				stroke:"red",
				fill:"none"			
			};

			//境界表示
			svgoverlay.selectAll("path")
				.data(pointdata)
				.attr(pathAttr)
				.enter()
				.append("svg:path")
				.attr("class", "cell")
				.attr(pathAttr)
				
			var circleAttr = {
				    "cx":function(d, i) { return positions[i][0]; },
				    "cy":function(d, i) { return positions[i][1]; },
				    "r":2,
				    fill:"red"			
			}
	
			//母点表示
			svgoverlay.selectAll("circle")
				.data(pointdata)
				.attr(circleAttr)
				.enter()
				.append("svg:circle")
				.attr(circleAttr)
	  
		};

	};

	//作成したSVGを地図にオーバーレイする
	overlay.setMap(map);
	
		
};

</script>

</body>
</html>