Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active February 19, 2020 02:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hirosaji/7f39888be0b16cfd374b202fdb8692bd to your computer and use it in GitHub Desktop.
Save Hirosaji/7f39888be0b16cfd374b202fdb8692bd to your computer and use it in GitHub Desktop.
leaflet - Markers on map
# 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 &copy; <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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment