leaflet - Leaflet.js Plugin Cluster on Map

▶︎ Data source: https://github.com/nabe8726/Hokkaidohackathon_2015Oct

▷ Another version: hot-spring img ver. - https://bl.ocks.org/Hirosaji/faaa4ae84c4dc8b6c5bfe7ed0333e90b

<!DOCTYPE html>
<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 &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-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