Hirosaji · September 13, 2018 05:58
diff --git a/.block b/.block
 # leaflet - Images on Map (using D3.js)

 license: mit
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!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="http://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="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-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>
diff --git a/onsen.geojson b/onsen.geojson
diff --git a/onsen_icon.svg b/onsen_icon.svg
diff --git a/style.css b/style.css
 #mapid { height: 500px; }
 #tooltip {
  position: absolute;
  text-align: center;
  width: auto;
  padding: 10px;
  font: 12px sans-serif;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border: 0px;
  border-radius: 4px;
  pointer-events: none;
  line-height: 1;
  box-sizing: border-box;
  display: inline;
 }
diff --git a/thumbnail.png b/thumbnail.png
	<!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="http://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 © <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-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>
	#mapid { height: 500px; }
	#tooltip {
	position: absolute;
	text-align: center;
	width: auto;
	padding: 10px;
	font: 12px sans-serif;
	font-weight: bold;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border: 0px;
	border-radius: 4px;
	pointer-events: none;
	line-height: 1;
	box-sizing: border-box;
	display: inline;
	}