[Gist] https://gist.github.com/Hirosaji/a68c85369c9756ca4884ab48d765ea39
Built with blockbuilder.org
# leaflet - Map on D3.js points | |
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> | |
//Leaflet初期設定 | |
var map = L.map('mapid').setView([36.32, 139.0], 12); | |
var mapLink = '<a href="http://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>'; | |
//Leafletに用意されたsvgを使う | |
map._initPathRoot(); //ver0.8以降は、L.svg().addTo(map)を使う | |
//Tile Map Serviceの指定 | |
L.tileLayer( | |
'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { | |
attribution: '© ' + mapLink + ' Contributors', | |
maxZoom: 18, | |
}).addTo(map); | |
// svg要素を選択 | |
var svg = d3.select("#mapid").select("svg"); | |
var g = svg.append("g"); | |
d3.json("landprice.geojson", function(point){ | |
//元データにLeafletのLatLngobjを追加 | |
point.features.forEach(function(d){ | |
d.LatLngObj = new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]); | |
}); | |
//サークル要素を追加 | |
var circle = g.selectAll("circle") | |
.data(point.features) | |
.enter() | |
.append("circle") | |
.attr({ | |
"stroke": "black", | |
"stroke-width": 2, | |
"opacity": .7, | |
"fill": "red", | |
"r": 10 | |
}); | |
map.on("viewreset", update); | |
update(); | |
function update() { | |
//サークル要素の位置をアップデート | |
circle.attr("transform", function(d) { | |
return "translate("+ | |
map.latLngToLayerPoint(d.LatLngObj).x +","+ | |
map.latLngToLayerPoint(d.LatLngObj).y +")"; | |
}); | |
} | |
}); | |
</script> | |
</body> |