import mapboxgl from "mapbox-gl"; function wrapElmApplication(elmApp, settings = {}) { const options = Object.assign( { outgoingPort: "elmMapboxOutgoing", incomingPort: "elmMapboxIncoming", easingFunctions: { linear: t => t } }, settings ); if (options.token) { mapboxgl.accessToken = options.token; } window.customElements.define( "elm-mapbox-map", class MapboxMap extends window.HTMLElement { constructor() { super(); this._refreshExpiredTiles = true; this._renderWorldCopies = true; this.interactive = true; this._eventRegistrationQueue = {}; this._eventListenerMap = new Map(); } get mapboxStyle() { return this._style; } set mapboxStyle(value) { if (this._map) this._map.setStyle(value); this._style = value; } get minZoom() { return this._minZoom; } set minZoom(value) { if (this._map) this._map.setMinZoom(value); this._minZoom = value; } get maxZoom() { return this._maxZoom; } set maxZoom(value) { if (this._map) this._map.setMaxZoom(value); this._maxZoom = value; } get map() { return this._map; } get maxBounds() { return this._maxBounds; } set maxBounds(value) { if (this._map) this._map.setBounds(value); this._maxBounds = value; } get renderWorldCopies() { return this._renderWorldCopies; } set renderWorldCopies(value) { if (this._map) this._map.setRenderWorldCopies(value); this._renderWorldCopies = value; } get center() { return this._center; } set center(value) { if (this._map) this._map.setCenter(value); this._center = value; } get zoom() { return this._zoom; } set zoom(value) { if (this._map) this._map.setZoom(value); this._zoom = value; } get bearing() { return this._bearing; } set bearing(value) { if (this._map) this._map.setBearing(value); this._bearing = value; } get pitch() { return this._pitch; } set pitch(value) { if (this._map) this._map.setPitch(value); this._pitch = value; } get featureState() { return this._featureState; } set featureState(value) { // TODO: Clean this up function makeId({id, source, sourceLayer}) { return `${id}::${source}::${sourceLayer}`; } if (this._map) { const map = new Map(this._featureState.map(([feature, state]) => [makeId(feature), {feature, state}])); value.forEach(([feature, state]) => { const id = makeId(feature); if (map.has(id)) { const prevValue = map.get(id).state; const keys = Object.keys(prevValue); let newValue = {}; keys.forEach(k => { if (state[k] === undefined) { newValue[k] = undefined; } }); this._map.setFeatureState( feature, Object.assign(newValue, state) ); } else { this._map.setFeatureState(feature, state); } map.delete(id); }); map.forEach(({feature, state}) => { const keys = Object.keys(state); let newValue = {}; keys.forEach(k => { newValue[k] = undefined; }); this._map.setFeatureState(feature, newValue); }); } this._featureState = value; } addEventListener(type, fn, ...args) { if (this._map) { var wrapped; if ( [ "mousedown", "mouseup", "mouseover", "mousemove", "click", "dblclick", "mouseout", "contextmenu", "zoom", "zoomstart", "zoomend", "rotate", "rotatestart", "rotateend" ].includes(type) ) { wrapped = e => { e.features = this._map.queryRenderedFeatures( [e.lngLat.lng, e.lngLat.lat], { layers: this.eventFeaturesLayers, filter: this.eventFeaturesFilter } ); return fn(e); }; } else if (["touchend", "touchmove", "touchcancel"].includes(type)) { wrapped = e => { e.features = this._map.queryRenderedFeatures( [e.lngLat.lng, e.lngLat.lat], { layers: this.eventFeaturesLayers, filter: this.eventFeaturesFilter } ); e.perPointFeatures = e.lngLats.map(({ lng, lat }) => this._map.queryRenderedFeatures([lng, lat], { layers: this.eventFeaturesLayers, filter: this.eventFeaturesFilter }) ); return fn(e); }; } else { wrapped = fn; } this._eventListenerMap.set(fn, wrapped); return this._map.on(type, wrapped); } else { this._eventRegistrationQueue[type] = this._eventRegistrationQueue[type] || []; return this._eventRegistrationQueue[type].push(fn); } } removeEventListener(type, fn, ...args) { if (this._map) { const wrapped = this._eventListenerMap.get(fn); this._eventListenerMap.delete(fn); return this._map.off(type, wrapped); } else { const queue = this._eventRegistrationQueue[type] || []; const index = queue.findIndex(fn); if (index >= 0) { queue.splice(index, 1); } return; } } _createMapInstance() { let options = { container: this, style: this._style, minZoom: this._minZoom || 0, maxZoom: this._maxZoom || 22, interactive: this.interactive, attributionControl: false, logoPosition: this.logoPosition || "bottom-left", refreshExpiredTiles: this._refreshExpiredTiles, maxBounds: this._maxBounds, renderWorldCopies: this._renderWorldCopies }; if (this._center) { options.center = this._center; } if (this._zoom) { options.zoom = this._zoom; } if (this._bearing) { options.bearing = this._bearing; } if (this._pitch) { options.pitch = this._pitch; } this._map = new mapboxgl.Map(options); Object.entries(this._eventRegistrationQueue).forEach( ([type, listeners]) => { listeners.forEach(listener => { this.addEventListener(type, listener); }); } ); this._eventRegistrationQueue = {}; return this._map; } connectedCallback() { if (this.token) { mapboxgl.accessToken = this.token; } this.style.display = "block"; this.style.width = "100%"; this.style.height = "100%"; this._map = this._createMapInstance(); } disconnectedCallback() { this._map.remove(); delete this._map; } } ); if (elmApp.ports && elmApp.ports.elmMapboxOutgoing) { function processOptions(opts) { if (opts.easing) { return Object.assign({}, opts, { easing: options.easingFunctions[opts.easing] }); } return opts; } elmApp.ports[options.outgoingPort].subscribe(event => { var map = document.getElementById(event.target).map; switch (event.command) { case "resize": return map.resize(); case "fitBounds": return map.fitBounds(event.bounds, processOptions(event.options)); case "panBy": return map.panBy(event.offset, processOptions(event.options)); case "panTo": return map.panTo(event.location, processOptions(event.options)); case "zoomTo": return map.zoomTo(event.zoom, processOptions(event.options)); case "zoomIn": return map.zoomIn(processOptions(event.options)); case "zoomOut": return map.zoomOut(processOptions(event.options)); case "rotateTo": return map.rotateTo(event.bearing, processOptions(event.options)); case "jumpTo": return map.jumpTo(processOptions(event.options)); case "easeTo": return map.easeTo(processOptions(event.options)); case "flyTo": return map.flyTo(processOptions(event.options)); case "stop": return map.stop(); case "setRTLTextPlugin": return map.setRTLTextPlugin(event.url); case "getBounds": return elmApp.ports[options.incomingPort].send({ type: "getBounds", id: event.requestId, bounds: map.getBounds().toArray() }); case "queryRenderedFeatures": return elmApp.ports[options.incomingPort].send({ type: "queryRenderedFeatures", id: event.requestId, features: event.query === "viewport" ? map.queryRenderedFeatures(processOptions(event.options)) : map.queryRenderedFeatures( event.query, processOptions(event.options) ) }); } }); } return elmApp; } wrapElmApplication.supported = mapboxgl.supported; export default wrapElmApplication;