vue-maplibre-gl
Version:
Vue 3 plugin for maplibre-gl
13 lines (12 loc) • 35.9 kB
JavaScript
/*!
* vue-maplibre-gl v5.5.9
* (c) 2025 Volker Nauruhn
* @license MIT
*/
"use strict";var ue=Object.defineProperty;var ce=(e,n,a)=>n in e?ue(e,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[n]=a;var v=(e,n,a)=>ce(e,typeof n!="symbol"?n+"":n,a);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),r=require("./draw.control-D4sJ2phO.cjs"),E=require("maplibre-gl"),de=require("mitt"),u=t.reactive({style:"https://demotiles.maplibre.org/style.json",center:[0,0],zoom:1,trackResize:!1});class M{static createEventHandler(n,a,i,o){return(c={})=>i.emit(o,{type:c.type,map:a,component:n,event:c})}}v(M,"MAP_OPTION_KEYS",["attributionControl","bearing","bearingSnap","bounds","boxZoom","cancelPendingTileRequestsWhileZooming","canvasContextAttributes","center","centerClampedToGround","clickTolerance","collectResourceTiming","cooperativeGestures","crossSourceCollisions","doubleClickZoom","dragPan","dragRotate","elevation","fadeDuration","fitBoundsOptions","hash","interactive","keyboard","locale","localIdeographFontFamily","logoPosition","maplibreLogo","maxBounds","maxCanvasSize","maxPitch","maxTileCacheSize","maxTileCacheZoomLevels","maxZoom","minPitch","minZoom","pitch","pitchWithRotate","pixelRatio","refreshExpiredTiles","renderWorldCopies","roll","rollEnabled","scrollZoom","touchPitch","touchZoomRotate","trackResize","transformCameraUpdate","transformRequest","validateStyle","zoom","mapStyle"]),v(M,"MARKER_OPTION_KEYS",["element","offset","anchor","color","draggable","clickTolerance","rotation","rotationAlignment","pitchAlignment","scale"]),v(M,"MAP_EVENT_TYPES",["boxzoomcancel","boxzoomend","boxzoomstart","click","contextmenu","cooperativegestureprevented","data","dataabort","dataloading","dblclick","drag","dragend","dragstart","error","idle","load","mousedown","mousemove","mouseout","mouseover","mouseup","move","moveend","movestart","pitch","pitchend","pitchstart","projectiontransition","remove","render","resize","rotate","rotateend","rotatestart","sourcedata","sourcedataabort","sourcedataloading","styledata","styledataloading","styleimagemissing","terrain","tiledataloading","touchcancel","touchend","touchmove","touchstart","webglcontextlost","webglcontextrestored","wheel","zoom","zoomend","zoomstart"]);const P=new Map,j=Symbol("default");function me(e=j){let n=P.get(e);return n||(n=t.reactive({isLoaded:!1,isMounted:!1,language:null}),P.set(e,n)),n}function fe(e,n,a=j){var o;let i=P.get(a);return i||(i=t.reactive({isLoaded:!1,isMounted:!1,language:null}),P.set(a,i)),i.component=e,i.map=n.value,i.isLoaded=((o=n.value)==null?void 0:o.loaded())||!1,i.isMounted=!1,i}const H={AUTO:"auto",STYLE_LOCK:"style_lock",LATIN:"latin",NON_LATIN:"nonlatin",LOCAL:"",ALBANIAN:"sq",AMHARIC:"am",ARABIC:"ar",ARMENIAN:"hy",AZERBAIJANI:"az",BASQUE:"eu",BELORUSSIAN:"be",BOSNIAN:"bs",BRETON:"br",BULGARIAN:"bg",CATALAN:"ca",CHINESE:"zh",CORSICAN:"co",CROATIAN:"hr",CZECH:"cs",DANISH:"da",DUTCH:"nl",ENGLISH:"en",ESPERANTO:"eo",ESTONIAN:"et",FINNISH:"fi",FRENCH:"fr",FRISIAN:"fy",GEORGIAN:"ka",GERMAN:"de",GREEK:"el",HEBREW:"he",HINDI:"hi",HUNGARIAN:"hu",ICELANDIC:"is",INDONESIAN:"id",IRISH:"ga",ITALIAN:"it",JAPANESE:"ja",JAPANESE_HIRAGANA:"ja-Hira",JAPANESE_KANA:"ja_kana",JAPANESE_LATIN:"ja_rm",JAPANESE_2018:"ja-Latn",KANNADA:"kn",KAZAKH:"kk",KOREAN:"ko",KOREAN_LATIN:"ko-Latn",KURDISH:"ku",ROMAN_LATIN:"la",LATVIAN:"lv",LITHUANIAN:"lt",LUXEMBOURGISH:"lb",MACEDONIAN:"mk",MALAYALAM:"ml",MALTESE:"mt",NORWEGIAN:"no",OCCITAN:"oc",POLISH:"pl",PORTUGUESE:"pt",ROMANIAN:"ro",ROMANSH:"rm",RUSSIAN:"ru",SCOTTISH_GAELIC:"gd",SERBIAN_CYRILLIC:"sr",SERBIAN_LATIN:"sr-Latn",SLOVAK:"sk",SLOVENE:"sl",SPANISH:"es",SWEDISH:"sv",TAMIL:"ta",TELUGU:"te",THAI:"th",TURKISH:"tr",UKRAINIAN:"uk",WELSH:"cy"};new Set(Object.values(H));new Set(Object.values(H));function x(e,n){const a=e.getStyle().layers,i=/^\s*{\s*name\s*(:\s*(\S*))?\s*}$/,o=/^\s*name\s*(:\s*(\S*))?\s*$/,c=/^\s*{\s*name\s*(:\s*(\S*))?\s*}(\s*){\s*name\s*(:\s*(\S*))?\s*}$/,p=/^(.*)({\s*name\s*(:\s*(\S*))?\s*})(.*)$/,y=n?`name:${n}`:"name",f=["case",["has",y],["get",y],["get","name"]];for(let b=0;b<a.length;b+=1){const g=a[b],C=g.layout;if(!C||!C["text-field"])continue;const m=e.getLayoutProperty(g.id,"text-field");let A;if(Array.isArray(m)&&m.length>=2&&m[0].trim().toLowerCase()==="concat"){const h=m.slice();for(let d=0;d<m.length;d+=1){const l=m[d];if((typeof l=="string"||l instanceof String)&&i.exec(l.toString())){h[d]=f;break}else if(Array.isArray(l)&&l.length>=2&&l[0].trim().toLowerCase()==="get"&&o.exec(l[1].toString())){h[d]=f;break}else if(Array.isArray(l)&&l.length===4&&l[0].trim().toLowerCase()==="case"){h[d]=f;break}}e.setLayoutProperty(g.id,"text-field",h)}else if(Array.isArray(m)&&m.length>=2&&m[0].trim().toLowerCase()==="get"&&o.exec(m[1].toString())){const h=f;e.setLayoutProperty(g.id,"text-field",h)}else if((typeof m=="string"||m instanceof String)&&i.exec(m.toString())){const h=f;e.setLayoutProperty(g.id,"text-field",h)}else if(Array.isArray(m)&&m.length===4&&m[0].trim().toLowerCase()==="case"){const h=f;e.setLayoutProperty(g.id,"text-field",h)}else if((typeof m=="string"||m instanceof String)&&(A=c.exec(m.toString()))!==null){const h=`{${y}}${A[3]}{name${A[4]||""}}`;e.setLayoutProperty(g.id,"text-field",h)}else if((typeof m=="string"||m instanceof String)&&(A=p.exec(m.toString()))!==null){const h=`${A[1]}{${y}}${A[5]}`;e.setLayoutProperty(g.id,"text-field",h)}}}const z=t.defineComponent({name:"MglMap",props:{width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},attributionControl:{type:[Boolean,Object],default:()=>u.attributionControl},bearing:{type:Number,default:()=>u.bearing},bearingSnap:{type:Number,default:()=>u.bearingSnap},bounds:{type:[Array,Object],default:()=>u.bounds},boxZoom:{type:Boolean,default:()=>u.boxZoom},cancelPendingTileRequestsWhileZooming:{type:Boolean,default:()=>u.cancelPendingTileRequestsWhileZooming},canvasContextAttributes:{type:Object,default:()=>u.canvasContextAttributes},center:{type:[Array,Object],default:()=>u.center},centerClampedToGround:{type:Boolean,default:()=>u.centerClampedToGround},clickTolerance:{type:Number,default:()=>u.clickTolerance},collectResourceTiming:{type:Boolean,default:()=>u.collectResourceTiming},cooperativeGestures:{type:[Boolean,Object],default:()=>u.cooperativeGestures},crossSourceCollisions:{type:Boolean,default:()=>u.crossSourceCollisions},doubleClickZoom:{type:Boolean,default:()=>u.doubleClickZoom},dragPan:{type:Boolean,default:()=>u.dragPan},dragRotate:{type:Boolean,default:()=>u.dragRotate},elevation:{type:Number,default:()=>u.elevation},fadeDuration:{type:Number,default:()=>u.fadeDuration},fitBoundsOptions:{type:Object,default:()=>u.fitBoundsOptions},hash:{type:[Boolean,String],default:()=>u.hash},interactive:{type:Boolean,default:()=>u.interactive},keyboard:{type:Boolean,default:()=>u.keyboard},language:{type:String,default:()=>u.language||null},locale:{type:Object,default:()=>u.locale},localIdeographFontFamily:{type:String,default:()=>u.localIdeographFontFamily},logoPosition:{type:[String],default:()=>u.logoPosition},mapKey:{type:[String,Symbol]},maplibreLogo:{type:Boolean,default:()=>u.maplibreLogo},mapStyle:{type:[String,Object],default:()=>u.style},maxBounds:{type:[Array,Object],default:()=>u.maxBounds},maxCanvasSize:{type:Array,default:()=>u.maxCanvasSize},maxPitch:{type:Number,default:()=>u.maxPitch},maxTileCacheSize:{type:Number,default:()=>u.maxTileCacheSize},maxTileCacheZoomLevels:{type:Number,default:()=>u.maxTileCacheZoomLevels},maxZoom:{type:Number,default:()=>u.maxZoom},minPitch:{type:Number,default:()=>u.minPitch},minZoom:{type:Number,default:()=>u.minZoom},pitch:{type:Number,default:()=>u.pitch},pitchWithRotate:{type:Boolean,default:()=>u.pitchWithRotate},pixelRatio:{type:Number,default:()=>u.pixelRatio},refreshExpiredTiles:{type:Boolean,default:()=>u.refreshExpiredTiles},renderWorldCopies:{type:Boolean,default:()=>u.renderWorldCopies},roll:{type:Number,default:()=>u.roll},rollEnabled:{typed:Boolean,default:()=>u.rollEnabled},scrollZoom:{type:Boolean,default:()=>u.scrollZoom},touchPitch:{type:Boolean,default:()=>u.touchPitch},touchZoomRotate:{type:Boolean,default:()=>u.touchZoomRotate},trackResize:{type:Boolean,default:()=>u.trackResize},transformCameraUpdate:{type:Function,default:u.transformCameraUpdate},transformRequest:{type:Function,default:u.transformRequest},validateStyle:{type:Boolean,default:()=>u.validateStyle},zoom:{type:Number,default:()=>u.zoom},projection:{type:Object}},emits:["map:boxzoomcancel","map:boxzoomend","map:boxzoomstart","map:click","map:contextmenu","map:cooperativegestureprevented","map:data","map:dataabort","map:dataloading","map:dblclick","map:drag","map:dragend","map:dragstart","map:error","map:idle","map:load","map:mousedown","map:mousemove","map:mouseout","map:mouseover","map:mouseup","map:move","map:moveend","map:movestart","map:pitch","map:pitchend","map:pitchstart","map:projectiontransition","map:remove","map:render","map:resize","map:rotate","map:rotateend","map:rotatestart","map:sourcedata","map:sourcedataabort","map:sourcedataloading","map:styledata","map:styledataloading","map:styleimagemissing","map:terrain","map:tiledataloading","map:touchcancel","map:touchend","map:touchmove","map:touchstart","map:webglcontextlost","map:webglcontextrestored","map:wheel","map:zoom","map:zoomend","map:zoomstart"],slots:Object,setup(e,n){const a=t.markRaw(t.getCurrentInstance()),i=t.shallowRef(),o=t.shallowRef(),c=t.ref(!1),p=t.ref(!1),y=t.ref(!1),f=new Map,b=de(),g=fe(a,o,e.mapKey);let C;t.provide(r.mapSymbol,o),t.provide(r.isLoadedSymbol,p),t.provide(r.isInitializedSymbol,c),t.provide(r.componentIdSymbol,a.uid),t.provide(r.sourceIdSymbol,""),t.provide(r.emitterSymbol,b),t.provide(r.fitBoundsOptionsSymbol,e.fitBoundsOptions),t.watch(()=>e.bearing,l=>{var s;return l&&((s=o.value)==null?void 0:s.setBearing(l))}),t.watch(()=>e.bounds,l=>{var s,O;return l&&((O=o.value)==null?void 0:O.fitBounds(l,(s=e.fitBoundsOptions)!=null&&s.useOnBoundsUpdate?e.fitBoundsOptions:void 0))}),t.watch(()=>e.center,l=>{var s;return l&&((s=o.value)==null?void 0:s.setCenter(l))}),t.watch(()=>e.maxBounds,l=>{var s;return l&&((s=o.value)==null?void 0:s.setMaxBounds(l))}),t.watch(()=>e.maxPitch,l=>{var s;return l&&((s=o.value)==null?void 0:s.setMaxPitch(l))}),t.watch(()=>e.maxZoom,l=>{var s;return l&&((s=o.value)==null?void 0:s.setMaxZoom(l))}),t.watch(()=>e.minPitch,l=>{var s;return l&&((s=o.value)==null?void 0:s.setMinPitch(l))}),t.watch(()=>e.minZoom,l=>{var s;return l&&((s=o.value)==null?void 0:s.setMinZoom(l))}),t.watch(()=>e.pitch,l=>{var s;return l&&((s=o.value)==null?void 0:s.setPitch(l))}),t.watch(()=>e.renderWorldCopies,l=>{var s;return l&&((s=o.value)==null?void 0:s.setRenderWorldCopies(l))}),t.watch(()=>e.mapStyle,l=>{var s;return l&&((s=o.value)==null?void 0:s.setStyle(l))}),t.watch(()=>e.transformRequest,l=>{var s;return l&&((s=o.value)==null?void 0:s.setTransformRequest(l))}),t.watch(()=>e.zoom,l=>{var s;return l&&((s=o.value)==null?void 0:s.setZoom(l))}),t.watch(()=>e.projection,l=>{var s;return l&&((s=o.value)==null?void 0:s.setProjection(l))}),t.watch(()=>e.language,l=>{y.value&&o.value&&g.language!==(l||null)&&(x(o.value,l||""),g.language=l||null)}),t.watch(()=>g.language,l=>{y.value&&o.value&&x(o.value,l||"")});function m(){y.value=!0,e.language?g.language=e.language:g.language&&x(o.value,e.language||""),e.projection&&o.value.setProjection(e.projection)}function A(){g.isMounted=!0;const l=Object.keys(e).filter(s=>e[s]!==void 0&&M.MAP_OPTION_KEYS.indexOf(s)!==-1).reduce((s,O)=>(s[O==="mapStyle"?"style":O]=t.unref(e[O]),s),{container:i.value});if(o.value=t.markRaw(new E.Map(l)),g.map=o.value,c.value=!0,f.set("__load",()=>(p.value=!0,g.isLoaded=!0)),o.value.once("styledata",m),o.value.on("load",f.get("__load")),a.vnode.props){for(let s=0,O=M.MAP_EVENT_TYPES.length;s<O;s++)if(a.vnode.props["onMap:"+M.MAP_EVENT_TYPES[s]]){const T=M.createEventHandler(a,o.value,n,"map:"+M.MAP_EVENT_TYPES[s]);f.set(M.MAP_EVENT_TYPES[s],T),o.value.on(M.MAP_EVENT_TYPES[s],T)}}o.value.getCanvas().addEventListener("webglcontextlost",d)}async function h(){g.isMounted=!1,g.isLoaded=!1,p.value=!1,o.value&&(o.value.getCanvas().removeEventListener("webglcontextlost",d),o.value._controls.forEach(l=>{o.value.removeControl(l)}),c.value=!1,f.forEach((l,s)=>{o.value.off(s.startsWith("__")?s.substring(2):s,l)}),o.value.remove())}function d(){h(),t.nextTick(A)}return t.onMounted(()=>{A(),o.value&&(C=new ResizeObserver(r.debounce(o.value.resize.bind(o.value),100)),C.observe(i.value))}),t.onBeforeUnmount(()=>{C!==void 0&&(C.disconnect(),C=void 0),h()}),n.expose({map:o}),()=>t.h("div",{class:"mgl-container",style:{height:e.height,width:e.width}},[t.h("div",{ref:i,class:"mgl-wrapper"}),c.value&&n.slots.default?n.slots.default({}):void 0])}}),_=t.defineComponent({name:"MglAttributionControl",props:{position:{type:String,validator:e=>r.PositionValues.indexOf(e)!==-1},compact:Boolean,customAttribution:[String,Array]},setup(e){const n=t.inject(r.mapSymbol),a=t.inject(r.isInitializedSymbol),i=new E.AttributionControl({compact:e.compact,customAttribution:e.customAttribution});r.usePositionWatcher(()=>e.position,n,i),t.onBeforeUnmount(()=>a.value&&n.value.removeControl(i))},render(){}}),k=t.defineComponent({name:"MglFullscreenControl",props:{position:{type:String,default:r.Position.TOP_RIGHT,validator:e=>r.PositionValues.indexOf(e)!==-1},container:{type:Object,default:null}},setup(e){const n=t.inject(r.mapSymbol),a=t.inject(r.isInitializedSymbol),i=new E.FullscreenControl({container:e.container||void 0});function o(){t.nextTick(()=>{var c;return(c=n.value)==null?void 0:c.resize()})}i.on("fullscreenstart",o),i.on("fullscreenend",o),r.usePositionWatcher(()=>e.position,n,i),t.onBeforeUnmount(()=>{var c;i.off("fullscreenstart",o),i.off("fullscreenend",o),a.value&&((c=n.value)==null||c.removeControl(i))})},render(){}});class ge{constructor(n="rgba(0,0,0,0.9)",a=4*window.devicePixelRatio,i="#7cf859",o="Monaco, Consolas, Courier, monospace",c=60*window.devicePixelRatio,p=90*window.devicePixelRatio,y=0,f=5*window.devicePixelRatio,b=100*window.devicePixelRatio){v(this,"frames",0);v(this,"totalTime",0);v(this,"totalFrames",0);v(this,"time",null);v(this,"map");v(this,"container");v(this,"readOutput");v(this,"canvas");v(this,"eventHandlers",new Map);this.background=n,this.barWidth=a,this.color=i,this.font=o,this.graphHeight=c,this.graphWidth=p,this.graphTop=y,this.graphRight=f,this.width=b}getDefaultPosition(){return r.Position.TOP_RIGHT}onAdd(n){this.map=n;const a=this.container=document.createElement("div");return a.className="maplibregl-ctrl maplibregl-ctrl-fps",a.style.backgroundColor=this.background,a.style.borderRadius="6px",this.readOutput=document.createElement("div"),this.readOutput.style.color=this.color,this.readOutput.style.fontFamily=this.font,this.readOutput.style.padding="0 5px 5px",this.readOutput.style.fontSize="9px",this.readOutput.style.fontWeight="bold",this.readOutput.textContent="Waiting…",this.canvas=document.createElement("canvas"),this.canvas.className="maplibregl-ctrl-canvas",this.canvas.width=this.width,this.canvas.height=this.graphHeight,this.canvas.style.cssText=`width: ${this.width/window.devicePixelRatio}px; height: ${this.graphHeight/window.devicePixelRatio}px;`,a.appendChild(this.readOutput),a.appendChild(this.canvas),this.eventHandlers.set("movestart",this.onMoveStart.bind(this)),this.eventHandlers.set("moveend",this.onMoveEnd.bind(this)),this.map.on("movestart",this.eventHandlers.get("movestart")),this.map.on("moveend",this.eventHandlers.get("moveend")),this.container}onRemove(){this.map.off("movestart",this.eventHandlers.get("movestart")),this.map.off("moveend",this.eventHandlers.get("moveend")),this.eventHandlers.clear(),this.container.parentNode.removeChild(this.container),this.map=void 0}onMoveStart(){this.frames=0,this.time=performance.now(),this.eventHandlers.set("render",this.onRender.bind(this)),this.map.on("render",this.eventHandlers.get("render"))}onMoveEnd(){const n=performance.now();this.updateGraph(this.getFPS(n)),this.frames=0,this.time=null,this.map.off("render",this.eventHandlers.get("render"))}onRender(){if(this.time){this.frames++;const n=performance.now();n>=this.time+1e3&&(this.updateGraph(this.getFPS(n)),this.frames=0,this.time=performance.now())}}getFPS(n){return this.totalTime+=n-this.time,this.totalFrames+=this.frames,Math.round(1e3*this.frames/(n-this.time))||0}updateGraph(n){const a=this.canvas.getContext("2d"),i=Math.round(1e3*this.totalFrames/this.totalTime)||0,o=(this.graphHeight,this.barWidth);a.fillStyle=this.background,a.globalAlpha=1,a.fillRect(0,0,this.graphWidth,this.graphTop),a.fillStyle=this.color,this.readOutput.textContent=`${n} FPS (${i} Avg)`,a.drawImage(this.canvas,this.graphRight+o,this.graphTop,this.graphWidth-o,this.graphHeight,this.graphRight,this.graphTop,this.graphWidth-o,this.graphHeight),a.fillRect(this.graphRight+this.graphWidth-o,this.graphTop,o,this.graphHeight),a.fillStyle=this.background,a.globalAlpha=.75,a.fillRect(this.graphRight+this.graphWidth-o,this.graphTop,o,(1-n/100)*this.graphHeight)}}const V=t.defineComponent({name:"MglFrameRateControl",props:{position:{type:String,validator:e=>r.PositionValues.indexOf(e)!==-1},background:{type:String,default:"rgba(0,0,0,0.9)"},barWidth:{type:Number,default:4*window.devicePixelRatio},color:{type:String,default:"#7cf859"},font:{type:String,default:"Monaco, Consolas, Courier, monospace"},graphHeight:{type:Number,default:60*window.devicePixelRatio},graphWidth:{type:Number,default:90*window.devicePixelRatio},graphTop:{type:Number,default:0},graphRight:{type:Number,default:5*window.devicePixelRatio},width:{type:Number,default:100*window.devicePixelRatio}},setup(e){const n=t.inject(r.mapSymbol),a=t.inject(r.isInitializedSymbol),i=new ge(e.background,e.barWidth,e.color,e.font,e.graphHeight,e.graphWidth,e.graphTop,e.graphRight,e.width);r.usePositionWatcher(()=>e.position,n,i),t.onBeforeUnmount(()=>{var o;return a.value&&((o=n.value)==null?void 0:o.removeControl(i))})},render(){}}),D=t.defineComponent({name:"MglGeolocationControl",props:{position:{type:String,default:r.Position.TOP_RIGHT,validator:e=>r.PositionValues.indexOf(e)!==-1},positionOptions:{type:Object,default:{enableHighAccuracy:!1,timeout:6e3}},fitBoundsOptions:{type:Object,default:{maxZoom:15}},trackUserLocation:{type:Boolean,default:!1},showAccuracyCircle:{type:Boolean,default:!0},showUserLocation:{type:Boolean,default:!0}},setup(e){const n=t.inject(r.mapSymbol),a=t.inject(r.isInitializedSymbol),i=new E.GeolocateControl({positionOptions:e.positionOptions,fitBoundsOptions:e.fitBoundsOptions,trackUserLocation:e.trackUserLocation,showAccuracyCircle:e.showAccuracyCircle,showUserLocation:e.showUserLocation});r.usePositionWatcher(()=>e.position,n,i),t.onBeforeUnmount(()=>{var o;return a.value&&((o=n.value)==null?void 0:o.removeControl(i))})},render(){}}),U=t.defineComponent({name:"MglNavigationControl",props:{position:{type:String,default:r.Position.TOP_RIGHT,validator:e=>r.PositionValues.indexOf(e)!==-1},showCompass:{type:Boolean,default:!0},showZoom:{type:Boolean,default:!0},visualizePitch:Boolean},setup(e){const n=t.inject(r.mapSymbol),a=t.inject(r.isInitializedSymbol),i=new E.NavigationControl({showCompass:e.showCompass,showZoom:e.showZoom,visualizePitch:e.visualizePitch});r.usePositionWatcher(()=>e.position,n,i),t.onBeforeUnmount(()=>{var o;return a.value&&((o=n.value)==null?void 0:o.removeControl(i))})},render(){}});var F=(e=>(e.IMPERIAL="imperial",e.METRIC="metric",e.NAUTICAL="nautical",e))(F||{});const pe=Object.values(F),W=t.defineComponent({name:"MglScaleControl",props:{position:{type:String,validator:e=>r.PositionValues.indexOf(e)!==-1},maxWidth:{type:Number,default:100},unit:{type:String,default:"metric",validator:e=>pe.indexOf(e)!==-1}},setup(e){const n=t.inject(r.mapSymbol),a=t.inject(r.isInitializedSymbol),i=new E.ScaleControl({maxWidth:e.maxWidth,unit:e.unit});r.usePositionWatcher(()=>e.position,n,i),t.onBeforeUnmount(()=>{var o;return a.value&&((o=n.value)==null?void 0:o.removeControl(i))})},render(){}});function B(e){return e&&!!e.stopPropagation}const Z=t.defineComponent({name:"MglStyleSwitchControl",props:{position:{type:String,validator:e=>r.PositionValues.indexOf(e)!==-1},mapStyles:{type:Array,required:!0,default:[]},modelValue:{type:Object},isOpen:{type:Boolean,default:void 0}},slots:Object,emits:["update:modelValue","update:isOpen"],setup(e,{emit:n,slots:a}){const i=t.inject(r.mapSymbol),o=t.inject(r.isInitializedSymbol),c=t.inject(r.isLoadedSymbol),p=t.inject(r.emitterSymbol),y=t.ref(!1),f=t.ref(e.isOpen===void 0?!1:e.isOpen),b=t.shallowRef(e.modelValue===void 0?e.mapStyles.length?e.mapStyles[0]:null:e.modelValue),g=new r.CustomControl(y,!1),C=h.bind(null,!1);function m(){const d=i.value.getStyle().name;for(let l=0,s=e.mapStyles.length;l<s;l++)if(e.mapStyles[l].name===d){A(e.mapStyles[l]);break}}t.watch(c,d=>{d&&m()},{immediate:!0}),i.value.on("style.load",m),document.addEventListener("click",C),r.usePositionWatcher(()=>e.position,i,g),e.modelValue!==void 0&&t.watch(()=>e.modelValue,d=>{d!==void 0&&(b.value=d)}),e.isOpen!==void 0&&t.watch(()=>e.isOpen,d=>{d!==void 0&&(f.value=d)}),t.onBeforeUnmount(()=>{o.value&&(i.value.removeControl(g),i.value.off("style.load",m)),document.removeEventListener("click",C)});function A(d){var l;((l=b.value)==null?void 0:l.name)!==d.name&&(p.emit("styleSwitched",d),i.value.setStyle(d.style,{diff:!1}),e.modelValue===void 0&&(b.value=d),n("update:modelValue",d),h(!1))}function h(d,l){B(l)?l.stopPropagation():B(d)&&d.stopPropagation(),!(e.isOpen!==void 0&&e.isOpen===d||f.value===d)&&(e.isOpen===void 0?(f.value=typeof d=="boolean"?d:!f.value,n("update:isOpen",f.value)):n("update:isOpen",typeof d=="boolean"?d:!e.isOpen))}return()=>{if(!y.value)return t.createCommentVNode("style-switch-control");const d={isOpen:f,toggleOpen:h,setStyle:A,mapStyles:e.mapStyles,currentStyle:b};return t.h(t.Teleport,{to:g.container},a.default?a.default(d):[a.button?a.button(d):t.h(r.MglButton,{type:r.ButtonType.MDI,path:"M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z",class:["maplibregl-ctrl-icon maplibregl-style-switch",f.value?"is-open":""],onClick:h.bind(null,!0)}),a.styleList?a.styleList(d):t.h("div",{class:["maplibregl-style-list",f.value?"is-open":""]},e.mapStyles.map(l=>{var s,O;return l.icon?t.h(r.MglButton,{type:r.ButtonType.MDI,path:l.icon.path,class:((s=b.value)==null?void 0:s.name)===l.name?"is-active":"",onClick:()=>A(l)},t.createTextVNode(l.label)):t.h("button",{type:"button",class:((O=b.value)==null?void 0:O.name)===l.name?"is-active":"",onClick:()=>A(l)},t.createTextVNode(l.label))}))])}},template:`
<slot>
<slot name="button"></slot>
<slot name="styleList"></slot>
</slot>
`}),G=t.defineComponent({name:"MglMarker",props:{coordinates:{type:[Object,Array],required:!0},offset:[Object,Array],anchor:String,color:String,clickTolerance:Number,rotation:Number,rotationAlignment:String,pitchAlignment:String,scale:Number},setup(e){const n=t.inject(r.mapSymbol),a=Object.keys(e).filter(o=>e[o]!==void 0&&M.MARKER_OPTION_KEYS.indexOf(o)!==-1).reduce((o,c)=>(o[c]=t.unref(e[c]),o),{}),i=new E.Marker(a);return i.setLngLat(e.coordinates).addTo(n.value),t.watch(()=>e.coordinates,o=>i.setLngLat(o)),t.watch(()=>e.offset,o=>i.setOffset(o||[0,0])),t.watch(()=>e.pitchAlignment,o=>i.setPitchAlignment(o||"auto")),t.watch(()=>e.rotationAlignment,o=>i.setRotationAlignment(o||"auto")),t.onBeforeUnmount(i.remove.bind(i)),{marker:i}},render(){}}),w=class w{static genSourceOpts(n,a,i){return Object.keys(a).filter(o=>a[o]!==void 0&&i.indexOf(o)!==-1).reduce((o,c)=>(o[c]=t.unref(a[c]),o),{type:n})}static getSourceRef(n,a){const i=typeof a=="string",o=String(n)+(i?a:"");let c=w.REFS.get(o);return c||(c=t.ref(i?null:void 0),w.REFS.set(o,c)),c}};v(w,"REFS",new Map);let I=w;class he{constructor(){v(this,"unmountHandlers",new Map)}registerUnmountHandler(n,a){this.unmountHandlers.set(n,a)}unregisterUnmountHandler(n){this.unmountHandlers.delete(n)}unmount(){this.unmountHandlers.forEach(n=>n())}}function L(e,n,a){const i=t.inject(r.mapSymbol),o=t.inject(r.isLoadedSymbol),c=t.inject(r.emitterSymbol),p=t.inject(r.componentIdSymbol),y=I.getSourceRef(p,e.sourceId),f=new he;t.provide(r.sourceIdSymbol,e.sourceId),t.provide(r.sourceLayerRegistry,f);function b(){o.value&&(i.value.addSource(e.sourceId,I.genSourceOpts(n,e,a)),y.value=i.value.getSource(e.sourceId))}function g(){y.value=null}return t.watch(o,b,{immediate:!0}),i.value.on("style.load",b),c.on("styleSwitched",g),t.onBeforeUnmount(()=>{o.value&&(f.unmount(),i.value.removeSource(e.sourceId)),i.value.off("style.load",b),c.off("styleSwitched",g)}),y}const ye=r.AllSourceOptions({animate:void 0,canvas:void 0,coordinates:void 0}),q=t.defineComponent({name:"MglCanvasSource",props:{sourceId:{type:String,required:!0},coordinates:Array,animate:Boolean,canvas:[Object,String]},slots:Object,setup(e,{slots:n}){const a=L(e,"canvas",ye);return t.watch(t.isRef(e.coordinates)?e.coordinates:()=>e.coordinates,i=>{var o;(o=a.value)==null||o.setCoordinates(i)},{immediate:!0}),()=>[t.createCommentVNode("Canvas Source"),a.value&&n.default?n.default({}):void 0]}}),Se=r.AllSourceOptions({data:void 0,maxzoom:void 0,attribution:void 0,buffer:void 0,tolerance:void 0,cluster:void 0,clusterRadius:void 0,clusterMaxZoom:void 0,clusterMinPoints:void 0,clusterProperties:void 0,lineMetrics:void 0,generateId:void 0,promoteId:void 0,filter:void 0}),Y=t.defineComponent({name:"MglGeoJsonSource",props:{sourceId:{type:String,required:!0},data:[Object,String],maxzoom:Number,attribution:String,buffer:Number,tolerance:Number,cluster:[Number,Boolean],clusterRadius:Number,clusterMaxZoom:Number,clusterMinPoints:Number,clusterProperties:Object,lineMetrics:Boolean,generateId:Boolean,promoteId:[Object,String],filter:[Array,String,Object]},slots:Object,setup(e,{slots:n}){const a=L(e,"geojson",Se);return t.watch(t.isRef(e.data)?e.data:()=>e.data,i=>{var o;(o=a.value)==null||o.setData(i||{type:"FeatureCollection",features:[]})},{immediate:!0}),()=>[t.createCommentVNode("GeoJSON Source"),a.value&&n.default?n.default({}):void 0]}}),be=r.AllSourceOptions({url:void 0,coordinates:void 0}),$=t.defineComponent({name:"MglImageSource",props:{sourceId:{type:String,required:!0},url:String,coordinates:Array},slots:Object,setup(e,{slots:n}){const a=L(e,"image",be);return t.watch(t.isRef(e.coordinates)?e.coordinates:()=>e.coordinates,i=>{var o;(o=a.value)==null||o.setCoordinates(i)},{immediate:!0}),()=>[t.createCommentVNode("Image Source"),a.value&&n.default?n.default({}):void 0]}}),ve=r.AllSourceOptions({url:void 0,tiles:void 0,bounds:void 0,minzoom:void 0,maxzoom:void 0,tileSize:void 0,scheme:void 0,attribution:void 0,volatile:void 0}),K=t.defineComponent({name:"MglRasterSource",props:{sourceId:{type:String,required:!0},url:String,tiles:Array,bounds:Array,minzoom:Number,maxzoom:Number,tileSize:Number,scheme:String,attribution:String,volatile:Boolean},slots:Object,setup(e,{slots:n}){const a=L(e,"raster",ve);return()=>[t.createCommentVNode("Raster Source"),a.value&&n.default?n.default({}):void 0]}}),Ae=r.AllSourceOptions({url:void 0,tiles:void 0,bounds:void 0,minzoom:void 0,maxzoom:void 0,tileSize:void 0,attribution:void 0,encoding:void 0,volatile:void 0,redFactor:void 0,blueFactor:void 0,greenFactor:void 0,baseShift:void 0}),J=t.defineComponent({name:"MglRasterDemSource",props:{sourceId:{type:String,required:!0},url:String,tiles:Array,bounds:Array,minzoom:Number,maxzoom:Number,tileSize:Number,attribution:String,encoding:String,volatile:Boolean,redFactor:Number,blueFactor:Number,greenFactor:Number,baseShift:Number},slots:Object,setup(e,{slots:n}){const a=L(e,"raster-dem",Ae);return()=>[t.createCommentVNode("RasterDem Source"),a.value&&n.default?n.default({}):void 0]}}),Ce=r.AllSourceOptions({url:void 0,tiles:void 0,bounds:void 0,scheme:void 0,minzoom:void 0,maxzoom:void 0,attribution:void 0,promoteId:void 0,volatile:void 0}),Q=t.defineComponent({name:"MglVectorSource",props:{sourceId:{type:String,required:!0},url:String,tiles:Array,bounds:Array,scheme:String,minzoom:Number,maxzoom:Number,attribution:String,promoteId:[Object,String],volatile:Boolean},slots:Object,setup(e,{slots:n}){const a=L(e,"vector",Ce);return t.watch(t.isRef(e.tiles)?e.tiles:()=>e.tiles,i=>{var o;(o=a.value)==null||o.setTiles(i||[])},{immediate:!0}),t.watch(t.isRef(e.url)?e.url:()=>e.url,i=>{var o;(o=a.value)==null||o.setUrl(i||"")},{immediate:!0}),()=>[t.createCommentVNode("Vector Source"),a.value&&n.default?n.default({}):void 0]}}),Re=r.AllSourceOptions({urls:void 0,coordinates:void 0}),X=t.defineComponent({name:"MglVideoSource",props:{sourceId:{type:String,required:!0},urls:Array,coordinates:Array},slots:Object,setup(e,{slots:n}){const a=L(e,"video",Re);return t.watch(t.isRef(e.coordinates)?e.coordinates:()=>e.coordinates,i=>{var o;(o=a.value)==null||o.setCoordinates(i)},{immediate:!0}),()=>[t.createCommentVNode("Video Source"),a.value&&n.default?n.default({}):void 0]}}),R=class R{static genLayerOpts(n,a,i,o){return Object.keys(i).filter(c=>i[c]!==void 0&&R.SOURCE_OPTS.indexOf(c)!==-1).reduce((c,p)=>(c[p==="sourceLayer"?"source-layer":p]=t.unref(i[p]),c),{type:a,source:i.source||o,id:n})}static registerLayerEvents(n,a,i){if(i.props)for(let o=0,c=R.LAYER_EVENTS.length;o<c;o++){const p="on"+R.LAYER_EVENTS[o].charAt(0).toUpperCase()+R.LAYER_EVENTS[o].substr(1);i.props[p]&&n.on(R.LAYER_EVENTS[o],a,i.props[p])}}static unregisterLayerEvents(n,a,i){if(i.props)for(let o=0,c=R.LAYER_EVENTS.length;o<c;o++){const p="on"+R.LAYER_EVENTS[o].charAt(0).toUpperCase()+R.LAYER_EVENTS[o].substr(1);i.props[p]&&n.off(R.LAYER_EVENTS[o],a,i.props[p])}}};v(R,"SOURCE_OPTS",["metadata","ref","source","sourceLayer","minzoom","maxzoom","interactive","filter","layout","paint"]),v(R,"LAYER_EVENTS",["click","dblclick","mousedown","mouseup","mousemove","mouseenter","mouseleave","mouseover","mouseout","contextmenu","touchstart","touchend","touchcancel"]),v(R,"SHARED",{props:{layerId:{type:String,required:!0},source:[String,Object],metadata:[Object,Array,String,Number],sourceLayer:String,minzoom:Number,maxzoom:Number,interactive:Boolean,before:String},emits:["click","dblclick","mousedown","mouseup","mousemove","mouseenter","mouseleave","mouseover","mouseout","contextmenu","touchstart","touchend","touchcancel"]});let S=R;function N(e,n,a,i,o){const c=t.inject(r.sourceIdSymbol),p=n||c;p||t.warn(`Layer (${a}): layer must be used inside source tag or source prop must be set`);const y=t.inject(r.mapSymbol),f=t.inject(r.isLoadedSymbol),b=t.inject(r.componentIdSymbol),g=I.getSourceRef(b,p),C=t.inject(r.sourceLayerRegistry);function m(){f.value&&(o&&S.unregisterLayerEvents(y.value,a,o.vnode),y.value.getLayer(a)&&y.value.removeLayer(a))}return C.registerUnmountHandler(a,m),t.onBeforeUnmount(()=>{C.unregisterUnmountHandler(a),m()}),t.watch([f,g],([A,h])=>{A&&(h||h===void 0)&&(y.value.addLayer(S.genLayerOpts(a,e,i,p),i.before||void 0),o&&S.registerLayerEvents(y.value,i.layerId,o.vnode))},{immediate:!0}),{map:y,isLoaded:f,source:g}}const ee=t.defineComponent({name:"MglBackgroundLayer",props:{...S.SHARED.props,layout:Object,paint:Object},emits:[...S.SHARED.emits],setup(e){return N("background",e.source,e.layerId,e),()=>t.createCommentVNode("Background Layer")}}),te=t.defineComponent({name:"MglCircleLayer",props:{...S.SHARED.props,layout:Object,paint:Object,filter:[Boolean,Array]},emits:[...S.SHARED.emits],setup(e){const n=t.getCurrentInstance();return N("circle",e.source,e.layerId,e,n),()=>t.createCommentVNode("Circle Layer")}}),oe=t.defineComponent({name:"MglFillLayer",props:{...S.SHARED.props,layout:Object,paint:Object,filter:[Boolean,Array]},emits:[...S.SHARED.emits],setup(e){const n=t.getCurrentInstance();return N("fill",e.source,e.layerId,e,n),()=>t.createCommentVNode("Fill Layer")}}),ne=t.defineComponent({name:"MglFillExtrusionLayer",props:{...S.SHARED.props,layout:Object,paint:Object,filter:[Boolean,Array]},emits:[...S.SHARED.emits],setup(e){const n=t.getCurrentInstance();return N("fill-extrusion",e.source,e.layerId,e,n),()=>t.createCommentVNode("Fill Extrusion Layer")}}),ae=t.defineComponent({name:"MglHeatmapLayer",props:{...S.SHARED.props,layout:Object,paint:Object,filter:[Boolean,Array]},emits:[...S.SHARED.emits],setup(e){const n=t.getCurrentInstance();return N("heatmap",e.source,e.layerId,e,n),()=>t.createCommentVNode("Heatmap Layer")}}),ie=t.defineComponent({name:"MglHillshadeLayer",props:{...S.SHARED.props,layout:Object,paint:Object,filter:[Boolean,Array]},emits:[...S.SHARED.emits],setup(e){const n=t.getCurrentInstance();return N("hillshade",e.source,e.layerId,e,n),()=>t.createCommentVNode("Hillshade Layer")}}),re=t.defineComponent({name:"MglLineLayer",props:{...S.SHARED.props,layout:Object,paint:Object,filter:[Boolean,Array]},emits:[...S.SHARED.emits],setup(e){const n=t.getCurrentInstance();return N("line",e.source,e.layerId,e,n),()=>t.createCommentVNode("Line Layer")}}),le=t.defineComponent({name:"MglRasterLayer",props:{...S.SHARED.props,layout:Object,paint:Object,filter:[Boolean,Array]},emits:[...S.SHARED.emits],setup(e){const n=t.getCurrentInstance();return N("raster",e.source,e.layerId,e,n),()=>t.createCommentVNode("Raster Layer")}}),se=t.defineComponent({name:"MglSymbolLayer",props:{...S.SHARED.props,layout:Object,paint:Object,filter:[Boolean,Array]},emits:[...S.SHARED.emits],setup(e){const n=t.getCurrentInstance();return N("symbol",e.source,e.layerId,e,n),()=>t.createCommentVNode("Symbol Layer")}}),Oe=Object.freeze(Object.defineProperty({__proto__:null,MglAttributionControl:_,MglBackgroundLayer:ee,MglButton:r.MglButton,MglCanvasSource:q,MglCircleLayer:te,MglCustomControl:r.MglCustomControl,MglFillExtrusionLayer:ne,MglFillLayer:oe,MglFrameRateControl:V,MglFullscreenControl:k,MglGeoJsonSource:Y,MglGeolocationControl:D,MglHeatmapLayer:ae,MglHillshadeLayer:ie,MglImageSource:$,MglLineLayer:re,MglMap:z,MglMarker:G,MglNavigationControl:U,MglRasterDemSource:J,MglRasterLayer:le,MglRasterSource:K,MglScaleControl:W,MglStyleSwitchControl:Z,MglSymbolLayer:se,MglVectorSource:Q,MglVideoSource:X,Position:r.Position},Symbol.toStringTag,{value:"Module"})),Me=function(n){Object.entries(Oe).forEach(([a,i])=>{n.component(a,i)})};exports.AllOptions=r.AllOptions;exports.AllSourceOptions=r.AllSourceOptions;exports.CircleMode=r.CircleMode;exports.CircleStaticMode=r.CircleStaticMode;exports.DrawMode=r.DrawMode;exports.DrawPlugin=r.DrawPlugin;exports.MglButton=r.MglButton;exports.MglCustomControl=r.MglCustomControl;exports.MglDrawControl=r.draw_control;exports.PolygonMode=r.PolygonMode;exports.Position=r.Position;exports.componentIdSymbol=r.componentIdSymbol;exports.emitterSymbol=r.emitterSymbol;exports.fitBoundsOptionsSymbol=r.fitBoundsOptionsSymbol;exports.isInitializedSymbol=r.isInitializedSymbol;exports.isLoadedSymbol=r.isLoadedSymbol;exports.mapSymbol=r.mapSymbol;exports.sourceIdSymbol=r.sourceIdSymbol;exports.sourceLayerRegistry=r.sourceLayerRegistry;exports.usePositionWatcher=r.usePositionWatcher;exports.MglAttributionControl=_;exports.MglBackgroundLayer=ee;exports.MglCanvasSource=q;exports.MglCircleLayer=te;exports.MglDefaults=u;exports.MglFillExtrusionLayer=ne;exports.MglFillLayer=oe;exports.MglFrameRateControl=V;exports.MglFullscreenControl=k;exports.MglGeoJsonSource=Y;exports.MglGeolocationControl=D;exports.MglHeatmapLayer=ae;exports.MglHillshadeLayer=ie;exports.MglImageSource=$;exports.MglLineLayer=re;exports.MglMap=z;exports.MglMarker=G;exports.MglNavigationControl=U;exports.MglRasterDemSource=J;exports.MglRasterLayer=le;exports.MglRasterSource=K;exports.MglScaleControl=W;exports.MglStyleSwitchControl=Z;exports.MglSymbolLayer=se;exports.MglVectorSource=Q;exports.MglVideoSource=X;exports.default=Me;exports.useDisposableLayer=N;exports.useMap=me;exports.useSource=L;
//# sourceMappingURL=vue-maplibre-gl.cjs.map