shimizu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    D3.js ver.4 を使ってleaflet上に地形をオーバーレイしたサンプル

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
<style>
html, body {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
}

html, body, #map {
    width: 100%;
    height: 100%;
}
.tick line {
    stroke-dasharray: 2 2 ;
    stroke: #ccc;
}

</style>

</head>

<body>
<div id="map"></div>


<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
<script>
!(function(){
    "use strict"

    var map //leaflet obj

    d3.json("japan.geojson",main)


    function main(json) {
        addLmaps()
        drawFeatures(json)
    }

    function addLmaps() {
        //Leaflet初期設定
        map = L.map('map').setView([39.702053　, 141.15448379999998], 5);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        //Leafletに用意されたsvgを使う
        map._initPathRoot();

    }

    //位置→座標変換
    function projectPoint(x, y) {
        var point = map.latLngToLayerPoint(new L.LatLng(y, x));
        this.stream.point(point.x, point.y);
    }

    function drawFeatures(json) {
        var svg = d3.select("#map").select("svg");

        var transform = d3.geoTransform({point: projectPoint});
        var path = d3.geoPath().projection(transform)

        var featureElement = svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("stroke", "gray")
            .attr("fill", "green")
            .attr("fill-opacity", 0.6)

        map.on("viewreset", update);

        update();

        //pathのd属性を更新
        function update() {
            featureElement.attr("d", path);
        }

    }


}());
</script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## japan.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              japan.geojson
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title></title>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css"/>
	<style>
	html, body {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	}

	html, body, #map {
	width: 100%;
	height: 100%;
	}
	.tick line {
	stroke-dasharray: 2 2 ;
	stroke: #ccc;
	}

	</style>

	</head>

	<body>
	<div id="map"></div>



	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet-src.js"></script>
	<script>
	!(function(){
	"use strict"

	var map //leaflet obj

	d3.json("japan.geojson",main)


	function main(json) {
	addLmaps()
	drawFeatures(json)
	}

	function addLmaps() {
	//Leaflet初期設定
	map = L.map('map').setView([39.702053　, 141.15448379999998], 5);

	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	//Leafletに用意されたsvgを使う
	map._initPathRoot();

	}

	//位置→座標変換
	function projectPoint(x, y) {
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));
	this.stream.point(point.x, point.y);
	}

	function drawFeatures(json) {
	var svg = d3.select("#map").select("svg");

	var transform = d3.geoTransform({point: projectPoint});
	var path = d3.geoPath().projection(transform)

	var featureElement = svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("stroke", "gray")
	.attr("fill", "green")
	.attr("fill-opacity", 0.6)

	map.on("viewreset", update);

	update();

	//pathのd属性を更新
	function update() {
	featureElement.attr("d", path);
	}

	}


	}());
	</script>
	</body>
	</html>