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 - point</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%;
}
</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("landprice.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: [139.0032936, 36.3219088　],
        zoom: 14,
    });

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


    var container = map.getCanvasContainer()
    var svg = d3.select(container).append("svg")

    var circle = svg.selectAll("circle")
        .data(geojson.features)
        .enter()
        .append("circle")
        .attr("r", 10)
        .attr("stroke", "black")
        .attr("stroke-width", 2)
        .attr("fill", "red")
        .attr("opacity", 0.7)

    function update() {
        circle
        .attr("cx", function(d) { return project(d.geometry.coordinates).x; })
        .attr("cy", function(d) { return project(d.geometry.coordinates).y; })
    }

    //マップイベントにアップデート関数を束縛
    map.on("viewreset", update)
    map.on("move", update)

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

    function project(d) {
        return map.project(new mapboxgl.LngLat(+d[0], +d[1]));
    }
}


</script>
</body>

## landprice.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              landprice.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 - point</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%;
	}
	</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("landprice.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: [139.0032936, 36.3219088　],
	zoom: 14,
	});

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


	var container = map.getCanvasContainer()
	var svg = d3.select(container).append("svg")

	var circle = svg.selectAll("circle")
	.data(geojson.features)
	.enter()
	.append("circle")
	.attr("r", 10)
	.attr("stroke", "black")
	.attr("stroke-width", 2)
	.attr("fill", "red")
	.attr("opacity", 0.7)

	function update() {
	circle
	.attr("cx", function(d) { return project(d.geometry.coordinates).x; })
	.attr("cy", function(d) { return project(d.geometry.coordinates).y; })
	}

	//マップイベントにアップデート関数を束縛
	map.on("viewreset", update)
	map.on("move", update)

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

	function project(d) {
	return map.project(new mapboxgl.LngLat(+d[0], +d[1]));
	}
	}


	</script>
	</body>