forked from boletindigital/blog
/
travels.html
72 lines (56 loc) · 1.82 KB
/
travels.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
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
<div id='map' style='height:600px'></div>
<script>
mapboxgl.accessToken = '{{ site.mapbox.accessToken }}';
var map = new mapboxgl.Map({
container: 'map',
style: '{{site.mapbox.style}}',
center: [-70.39916221303974, 32.69356230197333],
maxBounds: [ [-180, -85], [180, 85] ],
dragRotate: false
});
var nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.on('load', function () {
map.addLayer({
"id": "travels",
"type": "circle",
"source": {
"type": "geojson",
"data": "{{ site.url }}/resources/travels.geojson"
},
'paint': {
'circle-color': '#3366ff',
'circle-opacity': 0.4
}
});
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mouseenter', 'travels', function(e) {
/* Change the cursor style as a UI indicator. */
map.getCanvas().style.cursor = 'pointer';
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.place_name;
/* Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to. */
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
/* Populate the popup and set its coordinates
// based on the feature found. */
popup.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
map.on('mouseleave', 'travels', function() {
map.getCanvas().style.cursor = '';
popup.remove();
});
});
</script>