D3 Examples - leaflet - Markers on map

xxxxxxxxxx
 
<!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="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',
          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>
    