[Gist] https://gist.github.com/Hirosaji/5640cb9123673372da2b8ed826cb5c37
Built with blockbuilder.org
# leaflet - Map with D3.js outline | |
license: mit |
<!DOCTYPE html> | |
<head> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script> | |
<script src="https://d3js.org/d3.v3.min.js"></script> | |
<style> | |
#mapid { height: 500px; } | |
</style> | |
</head> | |
<body> | |
<div id="mapid"></div> | |
<script> | |
d3.json("ken.geojson", function(json) { | |
mapdraw(json); | |
}); | |
function mapdraw(json){ | |
//地形データ取得 | |
if (json.type === "Topology"){ | |
//読み込みファイルがtopojsonの場合(json.objects.△△) 「△△」は変換時のgeojsonファイル名に合わせる | |
var geojson = topojson.feature(json, json.objects.ken) | |
} else { | |
var geojson = json; | |
} | |
//Leaflet初期設定 | |
var map = L.map('mapid').setView([38.2, 137.2], 5); | |
var mapLink = '<span class="removed_link" title="http://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</span>'; | |
//Tile Map Serviceの指定 | |
L.tileLayer( | |
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { | |
attribution: '© ' + mapLink + ' Contributors', | |
maxZoom: 18, | |
}).addTo(map); | |
//Leafletに用意されたsvgを使う | |
map._initPathRoot(); | |
// svg要素を選択 | |
var svg = d3.select("#mapid").select("svg"); | |
var g = svg.append("g"); | |
//緯度経度->パスジェネレーター関数作成 | |
var transform = d3.geo.transform({point: projectPoint}); | |
var path = d3.geo.path().projection(transform); | |
featureElement = g.selectAll("path") | |
.data(geojson.features) | |
.enter() | |
.append("path") | |
.attr({ | |
"stroke": "red", | |
"fill": "green", | |
"fill-opacity": 0.4 | |
}); | |
map.on("viewreset", update); | |
update(); | |
//pathのd属性を更新 | |
function update() { | |
featureElement.attr("d", path); | |
} | |
//位置→座標変換 | |
function projectPoint(x, y) { | |
var point = map.latLngToLayerPoint(new L.LatLng(y, x)); | |
this.stream.point(point.x, point.y); | |
} | |
} | |
</script> | |
</body> |