-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (75 loc) · 2.68 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
<head>
<title>D3 Mapbox minimal</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.js"></script>
<link href="https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.css" rel="stylesheet" />
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
svg {position: absolute; width: 100%; height: 100%}
.points {cursor: default}
</style>
</head>
<body>
<div id="map"></div>
<script>
function project_data_inplace(data) {
for (var i = 0; i < data.length; i++) {
var projection = map.project(new mapboxgl.LngLat(data[i].lng, data[i].lat));
data[i].x = projection.x;
data[i].y = projection.y;
}
}
function draw_circles(data) {
var data_join = svg.selectAll('.points')
.data(data)
// Update selection
data_join
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; });
// Enter selection
data_join
.enter()
.append('circle')
.attr('class', 'points')
.attr('cx', function(d) { return d.x; })
.attr('cy', function(d) { return d.y; })
.attr('r', 8)
.style('fill', 'turquoise')
.on('click', function(d) { console.log(d); });
// Exit selection
data_join
.exit()
.remove();
}
var geneva = {lng: 6.14, lat: 46.2};
// Load the map
mapboxgl.accessToken = 'pk.eyJ1IjoibWZpbGlwcG9uaSIsImEiOiJjamxxdTlxdXUxamI1M2xzM3dhbXdja2txIn0.GON5NJiJkhts_a9XIsVi1g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [geneva.lng, geneva.lat],
zoom: 4
});
// Create containers
var container = map.getCanvasContainer();
var svg = d3.select(container).append("svg");
// Create the data
var data_points = [
{lng: geneva.lng, lat: geneva.lat, x: null, y: null}
];
// Called once when map is loaded the first time
map.on('load', function() {
project_data_inplace(data_points);
draw_circles(data_points);
});
// Called on every drag/zoom event
map.on('move', function() {
project_data_inplace(data_points);
draw_circles(data_points);
});
</script>
</body>
</html>