[Gist] https://gist.github.com/Hirosaji/7f39888be0b16cfd374b202fdb8692bd
Built with blockbuilder.org
# leaflet - Markers on map | |
license: mit |
<!DOCTYPE html> | |
<head> | |
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> | |
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
#mapid { height: 500px; } | |
</style> | |
</head> | |
<body> | |
<div id="mapid"></div> | |
<script> | |
// csvの読み込み | |
d3.csv('./tokyoStations.csv') | |
.on('load', function (data) { | |
// 背景地図の設定 | |
var mymap = L.map('mapid').setView([35.6811673, 139.7670516], 12); | |
var mapboxToken = 'pk.eyJ1IjoiaGlyb3NhamkiLCJhIjoiY2phYW1qM2lyMHRzcTMybzd1dzhlaG83NCJ9.2QcsoUxneas4TQFI3F-DyQ'; | |
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', | |
accessToken: mapboxToken | |
}).addTo(mymap); | |
// 駅マーカーの設定 | |
data.forEach(function(val) { | |
var stationsMaker = L.marker( | |
[val.lat, val.lng] | |
).addTo(mymap); | |
var popupComment = val.name; | |
stationsMaker.bindPopup(popupComment); | |
}); | |
}) | |
.get(); | |
</script> | |
</body> |
basename | name | lat | lng | |
---|---|---|---|---|
東京 | 東京駅 | 35.6811673 | 139.7670516 | |
新宿 | 新宿駅 | 35.6894072 | 139.7003058 | |
渋谷 | 渋谷駅 | 35.6580339 | 139.7016358 | |
品川 | 品川駅 | 35.6284713 | 139.7387597 | |
新橋 | 新橋駅 | 35.6661933 | 139.7583319 | |
大手町 | 大手町駅 | 35.6859658 | 139.7634162 | |
霞ケ関 | 霞ケ関駅 | 35.6725455 | 139.751712 | |
銀座 | 銀座駅 | 35.6717519 | 139.7643082 | |
日本橋 | 日本橋駅 | 35.6820999 | 139.7746862 |