▶︎ Data source: https://github.com/nabe8726/Hokkaidohackathon_2015Oct
▷ Another version: Leaflet plugin cluster ver. - https://bl.ocks.org/Hirosaji/7c710df82bca6eda2cdc6f73f406c1c6
Built with blockbuilder.org
# leaflet - Images on Map (using D3.js) | |
license: mit |
▶︎ Data source: https://github.com/nabe8726/Hokkaidohackathon_2015Oct
▷ Another version: Leaflet plugin cluster ver. - https://bl.ocks.org/Hirosaji/7c710df82bca6eda2cdc6f73f406c1c6
Built with blockbuilder.org
<!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> | |
<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="http://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="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://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> |
#mapid { height: 500px; } | |
#tooltip { | |
position: absolute; | |
text-align: center; | |
width: auto; | |
padding: 10px; | |
font: 12px sans-serif; | |
font-weight: bold; | |
background: rgba(0, 0, 0, 0.8); | |
color: #fff; | |
border: 0px; | |
border-radius: 4px; | |
pointer-events: none; | |
line-height: 1; | |
box-sizing: border-box; | |
display: inline; | |
} |