Smooth path

地図上のパスを滑らかに表示

<!DOCTYPE html>
<html>
<head>
<title>Smooth path</title>
<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#map1{
	float: right;
    width: 50%;
    height: 100%;
}
#map2{
	float: left;
    width: 50%;
    height: 100%;
}

.SvgOverlay {
	position: relative;
	width: 500px;
	height: 500px;           
}

.SvgOverlay svg {
	position: absolute;
	top: -4000px;
	left: -4000px;
	width: 8000px;
	height: 8000px;        
}
</style>
</head>
<body>
<div id="map1"></div>	
<div id="map2"></div>

var map1 = new google.maps.Map(document.getElementById('map1'), mapOpotion);
var map2 = new google.maps.Map(document.getElementById('map2'), mapOpotion);

//データセット読み込み
d3.json("line.geojson", function(json){
	mapdraw(json);
});

function mapdraw(line) {
	var drawAction = function () {
		
		//オーバーレイ設定
		var layer = d3.select(this.getPanes().overlayLayer).append("div").attr("class", "SvgOverlay");
		var svg = layer.append("svg");
		var layergroup = svg.append("g").attr("class", "d3maplayear");
		var markerOverlay = this;
		var overlayProjection = markerOverlay.getProjection();

//Google Projection作成
		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 path = d3.geo.path().projection(googleMapProjection);　
		
		var interpolate = d3.svg.line()
			.x(function(d){ return d[0] }).y(function(d){ return d[1] }).interpolate("basis")
		
		
		var smoothPath = function(pstr){
			var sp = path(pstr).replace(/M|Z/, "").split("L").map(function(d){ return d.split(",") });
			return interpolate(sp);
		}

//オーバーレイ描画イベント    
		this.draw = draw

};		
	};

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

//作成したSVGを地図にオーバーレイする

overlay1.setMap(map1);
	overlay2.setMap(map2);
	
		
};
</script>
</body>
</html>

Modified http://maps.googleapis.com/maps/api/js?sensor=false to a secure url

https://maps.googleapis.com/maps/api/js?sensor=false

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js