Skip to content

Instantly share code, notes, and snippets.

@shimizu
Last active August 14, 2022 10:52
Show Gist options
  • Save shimizu/5f4cee0fddc7a64b55a9 to your computer and use it in GitHub Desktop.
Save shimizu/5f4cee0fddc7a64b55a9 to your computer and use it in GitHub Desktop.
MapboxGL & D3.js - polygon
<!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>
Display the source blob
Display the rendered blob
Raw
Loading
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