shimizu/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## 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/1.0.3/leaflet.css" />
<style>
html, body {
    padding: 0px;
    margin: 0px;
}

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

/* svg 以下のpath要素でイベントを取得できるようにする */
.leaflet-overlay-pane svg path{
    pointer-events: auto;
}

</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/1.0.3/leaflet.js"></script>
<script>
!(function(){
    "use strict"

    var map //leaflet obj

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


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

    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を使う
        L.svg({clickable:true}).addTo(map);

    }

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

    function drawFeatures(data) {
        var svg = d3.select("#map").select("svg")
        .attr("pointer-events", "auto")

        var g = svg.select("g")


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

        var featureElement = g.selectAll("path")
            .data(data.features)
            .enter()
            .append("path")
            .attr("stroke", "gray")
            .attr("fill", "green")
            .attr("fill-opacity", 0.6)
            .on("click", function(d){
                d3.select(this).attr("fill", "red")
            })


        map.on("moveend", update);

        update();

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

    }


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

## japan.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              japan.geojson
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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/1.0.3/leaflet.css" />
	<style>
	html, body {
	padding: 0px;
	margin: 0px;
	}

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

	/* svg 以下のpath要素でイベントを取得できるようにする */
	.leaflet-overlay-pane svg path{
	pointer-events: auto;
	}

	</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/1.0.3/leaflet.js"></script>
	<script>
	!(function(){
	"use strict"

	var map //leaflet obj

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


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

	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を使う
	L.svg({clickable:true}).addTo(map);

	}

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

	function drawFeatures(data) {
	var svg = d3.select("#map").select("svg")
	.attr("pointer-events", "auto")

	var g = svg.select("g")



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

	var featureElement = g.selectAll("path")
	.data(data.features)
	.enter()
	.append("path")
	.attr("stroke", "gray")
	.attr("fill", "green")
	.attr("fill-opacity", 0.6)
	.on("click", function(d){
	d3.select(this).attr("fill", "red")
	})


	map.on("moveend", update);

	update();

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

	}


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