Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active January 30, 2019 09:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shimizu/2befed84f04393a47d45 to your computer and use it in GitHub Desktop.
Save shimizu/2befed84f04393a47d45 to your computer and use it in GitHub Desktop.
MapboxGL & D3.js - point
<!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>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment