-
Notifications
You must be signed in to change notification settings - Fork 2
/
mapbox-gl.js
109 lines (100 loc) · 2.98 KB
/
mapbox-gl.js
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/**
* A plugin which enables rendering of maps
*
* @author Tomas Lipovsky
*/
var RevealMapbox = window.RevealMapbox || (function(){
var options = Reveal.getConfig().mapbox || {};
options.accessToken = options.accessToken || 'undefined'
loadMapbox();
function createMapbox(segment) {
var mapContainer = document.createElement("div");
segment.appendChild(mapContainer);
mapContainer.setAttribute("class", "slide-background stretch");
mapContainer.style.display = "block";
mapContainer.style.textAlign = "left";
mapContainer.style.opacity = "1";
mapContainer.style.visibility = "visible";
mapboxgl.accessToken = options.accessToken;
return new mapboxgl.Map({
container: mapContainer,
style: 'mapbox://styles/mapbox/outdoors-v9'
});
}
function loadMapbox() {
var sections;
sections = document.querySelectorAll('[data-mapbox]');
for (var i = 0; i < sections.length; i += 1){
sections[i].mapbox = createMapbox(sections[i]);
}
}
function flyToPosition(mapbox, position){
try{
position.center = position.center || [0,0]
position.bearing = position.bearing || 0
position.zoom = position.zoom || 10
position.speed = position.speed || 1.2
position.curve = position.curve || 1.42
position.pitch = position.pitch || 0
mapbox.flyTo(position);
}catch(err){
console.log(err);
}
}
function addTrack(mapbox, trekUrl){
trekId = trekUrl
if(mapbox.getLayer(trekId))
return;
try{
mapbox.addLayer({
"id": trekId,
"type": "line",
"source": {
"type": "geojson",
"data": trekUrl
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#888",
"line-width": 8
}
});
}catch(err){
console.log(err);
}
}
function goCurrentMapPosition(){
var newFragment = Reveal.getCurrentSlide().querySelectorAll( '.fragment.current-fragment' );
if ( newFragment.length ){
newFragment = newFragment[0]
position = JSON.parse(newFragment.getAttribute("data-mapbox-transform-to"));
}else{
if(Reveal.availableFragments().prev == true && Reveal.availableFragments().next == false)
return;
currentSlide = Reveal.getCurrentSlide();
position = JSON.parse(currentSlide.getAttribute("data-mapbox"));
}
flyToPosition(Reveal.getCurrentSlide().mapbox, position);
}
Reveal.addEventListener( 'slidechanged', function( event ) {
if(!event.currentSlide.hasAttribute("data-mapbox"))
return;
Reveal.getCurrentSlide().mapbox.resize()
if(event.currentSlide.hasAttribute("data-mapbox-trek"))
addTrack(Reveal.getCurrentSlide().mapbox, Reveal.getCurrentSlide().getAttribute("data-mapbox-trek"));
goCurrentMapPosition()
} );
Reveal.addEventListener( 'fragmentshown', function( event ) {
if(!event.fragment.hasAttribute("data-mapbox-transform-to"))
return;
goCurrentMapPosition()
} );
Reveal.addEventListener( 'fragmenthidden', function( event ) {
if(!event.fragment.hasAttribute("data-mapbox-transform-to"))
return;
goCurrentMapPosition();
} );
})();