118 lines
3.2 KiB
HTML
118 lines
3.2 KiB
HTML
<!DOCTYPE html >
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>mapboxgl.js + d3.js tutorial - 04</title>
|
|
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
|
|
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css" rel="stylesheet" />
|
|
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
|
|
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js" charset="utf-8"></script>
|
|
|
|
<style media="screen">
|
|
body { margin:0; padding:0; }
|
|
#map { position:absolute; top:0; bottom:0; width:100%; }
|
|
|
|
svg {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
path {
|
|
fill: #e55e5e;
|
|
stroke: #e55e5e;
|
|
stroke-width: 2;
|
|
fill-opacity: 0.6;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="map">
|
|
</div>
|
|
<script>
|
|
|
|
//////////////////
|
|
// Mapbox stuff
|
|
//////////////////
|
|
|
|
// Set-up map
|
|
mapboxgl.accessToken = 'pk.eyJ1Ijoiam9yZGl0b3N0IiwiYSI6ImQtcVkyclEifQ.vwKrOGZoZSj3N-9MB6FF_A';
|
|
var map = new mapboxgl.Map({
|
|
container: 'map',
|
|
style: 'mapbox://styles/mapbox/outdoors-v9',
|
|
zoom: 11.5,
|
|
center: [13.4426, 52.5100],
|
|
});
|
|
|
|
|
|
//////////////////////////
|
|
// Mapbox+D3 Connection
|
|
//////////////////////////
|
|
|
|
// Get Mapbox map canvas container
|
|
var canvas = map.getCanvasContainer();
|
|
|
|
// Overlay d3 on the map
|
|
var svg = d3.select(canvas).append("svg");
|
|
|
|
// Projection functions
|
|
var transform = d3.geo.transform({point:projectPoint});
|
|
var path = d3.geo.path().projection(transform);
|
|
|
|
|
|
// Load map and dataset
|
|
map.on('load', function () {
|
|
d3.json("data/berlin-parks-polygons.json", function(err, data) {
|
|
drawData(data);
|
|
});
|
|
});
|
|
|
|
// Project GeoJSON coordinate to the map's current state
|
|
function project(d) {
|
|
return map.project(new mapboxgl.LngLat(+d[0], +d[1]));
|
|
}
|
|
|
|
// Project any point (lon, lat) to map's current state
|
|
function projectPoint(lon, lat) {
|
|
var point = map.project(new mapboxgl.LngLat(lon, lat));
|
|
this.stream.point(point.x, point.y);
|
|
}
|
|
|
|
|
|
//////////////
|
|
// D3 stuff
|
|
//////////////
|
|
|
|
// Draw GeoJSON data with d3
|
|
var polygons;
|
|
function drawData(data) {
|
|
console.log("draw data");
|
|
|
|
// Add polygons
|
|
polygons = svg.selectAll("path")
|
|
.data([data])
|
|
.enter()
|
|
.append("path");
|
|
|
|
// Call the update function
|
|
update();
|
|
|
|
// Update on map interaction
|
|
map.on("viewreset", update);
|
|
map.on("move", update);
|
|
map.on("moveend", update);
|
|
}
|
|
|
|
// Update d3 shapes' positions to the map's current state
|
|
function update() {
|
|
console.log("update");
|
|
|
|
polygons.attr("d", path);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|