▶︎ Data source: https://github.com/nabe8726/Hokkaidohackathon_2015Oct
▷ Another version: hot-spring img ver. - https://bl.ocks.org/Hirosaji/faaa4ae84c4dc8b6c5bfe7ed0333e90b
Built with blockbuilder.org
xxxxxxxxxx
<head>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/MarkerCluster.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/MarkerCluster.Default.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/leaflet.markercluster-src.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="mapid"></div>
<script>
//Leaflet初期設定
var map = L.map("mapid").setView([43.55, 143.0], 7);
//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");
d3.csv('onsen.csv')
.mimeType('text/csv; charset=utf-8')
.on('load', function (data) {
var onsenMakers = new L.MarkerClusterGroup();
// 温泉マーカーの設定
data.forEach(function(val) {
var popupComment = val["温泉名"];
var onsenMaker = L.marker([val["緯度"], val["経度"]])
.bindPopup(popupComment);
onsenMakers.addLayer(onsenMaker);
});
map.addLayer(onsenMakers);
}).get();
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
</script>
</body>
https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js
https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.5.0/leaflet.markercluster-src.js
https://d3js.org/d3.v3.min.js