-
Notifications
You must be signed in to change notification settings - Fork 62
/
map-action.js
62 lines (54 loc) · 1.63 KB
/
map-action.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
import { load } from '../asset-loader.js'
import { bindEvents } from '../event-bindings.js'
export default function action (node, options = {}) {
let map
const resources = [
{ type: 'script', attr: 'src', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.js`, id: 'byk-gl-js' },
{ type: 'link', attr: 'href', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.css`, id: 'byk-gl-css' }
]
const customStylesheetUrl = options.customStylesheetUrl
if (customStylesheetUrl) {
resources.push({ type: 'link', attr: 'href', value: customStylesheetUrl, id: 'byk-mcsu-css' })
}
let unbind = () => {}
load(resources, () => {
unbind = init({ ...options, container: node }, node)
})
return {
destroy () {
unbind()
map && map.remove && map.remove()
}
}
}
function init (options, node) {
window.mapboxgl.accessToken = options.accessToken
const el = new window.mapboxgl.Map(options)
return bindEvents(el, handlers, window.mapboxgl, node)
}
const handlers = {
dragend: el => {
return [ 'dragend', { center: el.getCenter() } ]
},
drag: el => {
return [ 'drag', { center: el.getCenter() } ]
},
moveend: el => {
return [ 'recentre', { center: el.getCenter() } ]
},
click: (el, { lngLat }) => {
return [ 'click', { lng: lngLat.lng, lat: lngLat.lat } ]
},
zoomstart: el => {
return [ 'zoomstart', { zoom: el.getZoom() } ]
},
zoom: el => {
return [ 'zoom', { zoom: el.getZoom() } ]
},
zoomend: el => {
return [ 'zoomend', { zoom: el.getZoom() } ]
},
load: (el, ev, mapbox) => {
return [ 'ready', { map: el, mapbox } ]
}
}