[Gist] https://gist.github.com/Hirosaji/a68c85369c9756ca4884ab48d765ea39
Built with blockbuilder.org
xxxxxxxxxx
<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="https://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>';
//Leafletに用意されたsvgを使う
map._initPathRoot(); //ver0.8以降は、L.svg().addTo(map)を使う
//Tile Map Serviceの指定
L.tileLayer(
'https://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>
https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js
https://d3js.org/d3.v3.min.js