leaflet - Images on Map (using D3.js)

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

▷ Another version: Leaflet plugin cluster ver. - https://bl.ocks.org/Hirosaji/7c710df82bca6eda2cdc6f73f406c1c6

<!DOCTYPE html>
<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div id="mapid"></div>
	<script>
    //Leaflet初期設定
    var map = L.map("mapid").setView([43.50, 142.0], 7);
    var mapLink = '<a href="https://portal.cyberjapan.jp/help/termsofuse.html">国土地理院 地理院地図 標準地図</a>';

//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");

// tooltipの設定
    var tooltip = d3.select("body").append("div")
        .attr("id", "tooltip")
        .style("opacity", 0);

d3.json("onsen.geojson", function(point){

//元データにLeafletのLatLngobjを追加
      point.features.forEach(function(d){
        d.LatLngObj = new L.LatLng(d.geometry.coordinates[1], d.geometry.coordinates[0]);
      });

//サークル要素を追加
      var image = g.selectAll("image")
        .data(point.features)
        .enter()
        .append("image")
        .attr({
          "href": "onsen_icon.svg",
          "width": "1%",
        })
        .on("mouseover", function(d){ return tooltip.style("opacity", 1).text(d.properties["温泉名"]); })
        .on("mousemove", function(d){ return tooltip.style("top", (event.pageY-20)+"px").style("left",(event.pageX+10)+"px"); })
        .on("mouseout", function(d){ return tooltip.style("opacity", 0); });

map.on("viewreset", update);

update();

function update() {
        //サークル要素の位置をアップデート
        image.attr("transform", function(d) {
          return "translate("+
          map.latLngToLayerPoint(d.LatLngObj).x +","+
          map.latLngToLayerPoint(d.LatLngObj).y +")";
        });
      }

});
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js

https://d3js.org/d3.v3.min.js