shimizu/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<title>MapboxGL & D3.js - dpolygon</title>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>

html, body, #wrapper {
    width: 100%;
    height: 100%;
	padding: 0px;
	margin: 0px;
}
#map {
  position:relative;
  width: 100%;
  height: 100%;
  margin: auto auto;
}
svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.hidden {
	display: none;
}
</style>
</head>

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

<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<script>
d3.json("ken.geojson").then(mapDraw);


function mapDraw(geojson){
    //mapboxgs トークン
    mapboxgl.accessToken = 'pk.eyJ1Ijoic2hpbWl6dSIsImEiOiJjam95MDBhamYxMjA1M2tyemk2aHMwenp5In0.i2kMIJulhyPLwp3jiLlpsA'

    //Setup mapbox-gl map
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v8',
        center: [141.15448379999998, 39.702053　],
        zoom: 4,
    })

    map.addControl(new mapboxgl.NavigationControl());

    // svg要素をアペンドする
    var container = map.getCanvasContainer()
    var svg = d3.select(container).append("svg")


	//緯度経度->パスジェネレーター関数作成
	var transform = d3.geoTransform({point: projectPoint});
	var path = d3.geoPath().projection(transform);

 	var featureElement = svg.selectAll("path")
		.data(geojson.features)
		.enter()
        .append("path")
        .attr("stroke", "red")
        .attr("fill", "green")
        .attr("fill-opacity", 0.4)

    //path要素のアップデート
    function update() {
        featureElement.attr("d", path);
    }

    //
    map.on("viewreset", update)
    map.on("movestart", function(){
		svg.classed("hidden", true);
	});
    map.on("rotate", function(){
		svg.classed("hidden", true);
	});
    map.on("moveend", function(){
		update()
		svg.classed("hidden", false);
	})

    //初期レンダリング
    update()


	function projectPoint(lon, lat) {
        var point = map.project(new mapboxgl.LngLat(lon, lat));
		this.stream.point(point.x, point.y);
	}


}


  </script>
</body>

## ken.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ken.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>
	<head>
	<meta charset="utf-8">
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<title>MapboxGL & D3.js - dpolygon</title>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
	<style>

	html, body, #wrapper {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	}
	#map {
	position:relative;
	width: 100%;
	height: 100%;
	margin: auto auto;
	}
	svg {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	.hidden {
	display: none;
	}
	</style>
	</head>

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

	<script src='//unpkg.com/d3@5.0.0/dist/d3.min.js'></script>
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
	<script>
	d3.json("ken.geojson").then(mapDraw);


	function mapDraw(geojson){
	//mapboxgs トークン
	mapboxgl.accessToken = 'pk.eyJ1Ijoic2hpbWl6dSIsImEiOiJjam95MDBhamYxMjA1M2tyemk2aHMwenp5In0.i2kMIJulhyPLwp3jiLlpsA'

	//Setup mapbox-gl map
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/streets-v8',
	center: [141.15448379999998, 39.702053　],
	zoom: 4,
	})

	map.addControl(new mapboxgl.NavigationControl());

	// svg要素をアペンドする
	var container = map.getCanvasContainer()
	var svg = d3.select(container).append("svg")


	//緯度経度->パスジェネレーター関数作成
	var transform = d3.geoTransform({point: projectPoint});
	var path = d3.geoPath().projection(transform);

	var featureElement = svg.selectAll("path")
	.data(geojson.features)
	.enter()
	.append("path")
	.attr("stroke", "red")
	.attr("fill", "green")
	.attr("fill-opacity", 0.4)

	//path要素のアップデート
	function update() {
	featureElement.attr("d", path);
	}

	//
	map.on("viewreset", update)
	map.on("movestart", function(){
	svg.classed("hidden", true);
	});
	map.on("rotate", function(){
	svg.classed("hidden", true);
	});
	map.on("moveend", function(){
	update()
	svg.classed("hidden", false);
	})

	//初期レンダリング
	update()


	function projectPoint(lon, lat) {
	var point = map.project(new mapboxgl.LngLat(lon, lat));
	this.stream.point(point.x, point.y);
	}


	}


	</script>
	</body>