▶︎ Data source: https://github.com/nabe8726/Hokkaidohackathon_2015Oct
▷ Another version: Leaflet plugin cluster ver. - https://bl.ocks.org/Hirosaji/7c710df82bca6eda2cdc6f73f406c1c6
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>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="mapid"></div>
<script>
//Leaflet初期設定
var map = L.map("mapid").setView([43.50, 142.0], 7);
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://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets-basic',
accessToken: 'pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2phYW1qM2lyMHRzcTMybzd1dzhlaG83NCJ9.2QcsoUxneas4TQFI3F-DyQ'
}).addTo(map);
// svg要素を選択
var svg = d3.select("#mapid").select("svg");
var g = svg.append("g");
// tooltipの設定
var tooltip = d3.select("body").append("div")
.attr("id", "tooltip")
.style("opacity", 0);
d3.json("onsen.geojson", function(point){
//元データにLeafletのLatLngobjを追加
point.features.forEach(function(d){
d.LatLngObj = new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]);
});
//サークル要素を追加
var image = g.selectAll("image")
.data(point.features)
.enter()
.append("image")
.attr({
"href": "onsen_icon.svg",
"width": "1%",
})
.on("mouseover", function(d){ return tooltip.style("opacity", 1).text(d.properties["温泉名"]); })
.on("mousemove", function(d){ return tooltip.style("top", (event.pageY-20)+"px").style("left",(event.pageX+10)+"px"); })
.on("mouseout", function(d){ return tooltip.style("opacity", 0); });
map.on("viewreset", update);
update();
function update() {
//サークル要素の位置をアップデート
image.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