-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathmapboxgl.mjs
82 lines (58 loc) · 1.76 KB
/
mapboxgl.mjs
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
let promise, mapboxgl = null
async function MapboxGL() {
if (mapboxgl) return new mapboxgl.Map(...arguments);
if (!promise) promise = new Promise(async resolve => {
if (window.mapboxgl) {
mapboxgl = window.mapboxgl
resolve()
return
}
Promise
.all([
import('https://cdn.skypack.dev/pin/mapbox-gl@v2.8.2-2X0QssQ9YYqMIe57RkqH/mode=imports,min/optimized/mapbox-gl.js')
])
.then(imports => {
mapboxgl = imports[0]
resolve()
})
.catch(error => {
console.error(error.message)
alert('Failed to load MapboxGL library. Please reload the browser.')
})
})
await promise
return new mapboxgl.Map(...arguments);
}
export default async layer => {
const container = mapp.utils.html.node`
<div style="position: absolute; width: 100%; height: 100%;">`
layer.mbMap = await MapboxGL({
accessToken: layer.accessToken,
container: container,
style: layer.mbStyle,
});
layer.L = new ol.layer.Layer({
zIndex: layer.zIndex || 0,
render: frameState => {
if (!layer.display) return
// adjust view parameters in mapbox
layer.mbMap.jumpTo({
center: ol.proj.toLonLat(frameState.viewState.center),
zoom: frameState.viewState.zoom - 1,
bearing: (-frameState.viewState.rotation * 180) / Math.PI,
animate: false
})
// cancel the scheduled update & trigger synchronous redraw
if (layer.mbMap._frame) {
layer.mbMap._frame.cancel()
layer.mbMap._frame = null
}
layer.mbMap._render()
if (!layer.resized) {
layer.resized = true
window.setTimeout(()=>layer.mbMap.resize(), 500)
}
return layer.mbMap.getContainer();
}
})
}