vue-maplibre-gl
Version:
Vue 3 plugin for maplibre-gl
1,279 lines (1,278 loc) • 39.6 kB
JavaScript
/*!
* vue-maplibre-gl v5.6.1
* (c) 2026 Volker Nauruhn
* @license MIT
*/
import { reactive as q, defineComponent as g, markRaw as X, getCurrentInstance as A, shallowRef as U, ref as _, provide as x, watch as c, onMounted as le, onBeforeUnmount as O, h as N, unref as Z, nextTick as ae, inject as m, createCommentVNode as y, Teleport as se, createTextVNode as ee, isRef as k, warn as ue } from "vue";
import { m as R, i as W, c as T, e as $, s as K, f as J, g as ce, h as de, u as B, j as z, k as D, l as me, M as Y, B as te, n as ie, A as j, o as ge } from "./draw.control-D4AB-wuc.js";
import { p as gt, C as vt, a as ft, D as ht, b as pt, d as yt, P as bt } from "./draw.control-D4AB-wuc.js";
import { Map as ve, AttributionControl as fe, FullscreenControl as he, GeolocateControl as pe, NavigationControl as ye, ScaleControl as be, Marker as Se } from "maplibre-gl";
import Me from "mitt";
const l = q({
style: "https://demotiles.maplibre.org/style.json",
center: [0, 0],
zoom: 1,
trackResize: !1
});
function G(e, t) {
const i = e.getStyle();
if (!i?.layers) return;
const a = t ? `name:${t}` : "name";
function o(n) {
if (typeof n == "string")
return /\{name(:\S+)?\}/.test(n) ? ["coalesce", ["get", a], ["get", "name"]] : n;
if (Array.isArray(n)) {
const s = n[0];
return s === "get" ? typeof n[1] == "string" && n[1].startsWith("name") ? ["coalesce", ["get", a], ["get", "name"]] : n : n.map(o);
}
return n;
}
i.layers.forEach((n) => {
if (n.type !== "symbol") return;
const s = e.getLayoutProperty(n.id, "text-field");
if (!s) return;
const v = o(s);
v && e.setLayoutProperty(n.id, "text-field", v);
});
}
class P {
static 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"
];
static MARKER_OPTION_KEYS = [
"element",
"offset",
"anchor",
"color",
"draggable",
"clickTolerance",
"rotation",
"rotationAlignment",
"pitchAlignment",
"scale"
];
static 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"
];
static createEventHandler(t, i, a, o) {
return (n = {}) => a.emit(o, { type: n.type, map: i, component: t, event: n });
}
}
const V = /* @__PURE__ */ new Map(), re = /* @__PURE__ */ Symbol("default");
function ut(e = re) {
let t = V.get(e);
return t || (t = q({ isLoaded: !1, isMounted: !1, language: void 0 }), V.set(e, t)), t;
}
function Oe(e, t, i = re) {
let a = V.get(i);
return a || (a = q({ isLoaded: !1, isMounted: !1, language: void 0 }), V.set(i, a)), a.component = e, a.map = t.value, a.isLoaded = t.value?.loaded() || !1, a.isMounted = !1, a;
}
const Re = /* @__PURE__ */ g({
name: "MglMap",
props: {
width: { type: [Number, String], default: "100%" },
height: { type: [Number, String], default: "100%" },
attributionControl: { type: [Boolean, Object], default: () => l.attributionControl },
bearing: { type: Number, default: () => l.bearing },
bearingSnap: { type: Number, default: () => l.bearingSnap },
bounds: { type: [Array, Object], default: () => l.bounds },
boxZoom: { type: Boolean, default: () => l.boxZoom },
cancelPendingTileRequestsWhileZooming: {
type: Boolean,
default: () => l.cancelPendingTileRequestsWhileZooming
},
canvasContextAttributes: { type: Object, default: () => l.canvasContextAttributes },
center: { type: [Array, Object], default: () => l.center },
centerClampedToGround: { type: Boolean, default: () => l.centerClampedToGround },
clickTolerance: { type: Number, default: () => l.clickTolerance },
collectResourceTiming: { type: Boolean, default: () => l.collectResourceTiming },
cooperativeGestures: { type: [Boolean, Object], default: () => l.cooperativeGestures },
crossSourceCollisions: { type: Boolean, default: () => l.crossSourceCollisions },
doubleClickZoom: { type: Boolean, default: () => l.doubleClickZoom },
dragPan: { type: Boolean, default: () => l.dragPan },
dragRotate: { type: Boolean, default: () => l.dragRotate },
elevation: { type: Number, default: () => l.elevation },
fadeDuration: { type: Number, default: () => l.fadeDuration },
fitBoundsOptions: { type: Object, default: () => l.fitBoundsOptions },
hash: { type: [Boolean, String], default: () => l.hash },
interactive: { type: Boolean, default: () => l.interactive },
keyboard: { type: Boolean, default: () => l.keyboard },
language: { type: String, default: () => l.language || void 0 },
locale: { type: Object, default: () => l.locale },
localIdeographFontFamily: {
type: String,
default: () => l.localIdeographFontFamily
},
logoPosition: { type: [String], default: () => l.logoPosition },
mapKey: { type: [String, Symbol] },
maplibreLogo: { type: Boolean, default: () => l.maplibreLogo },
// StyleSpecification triggers TS7056, so users must handle typings themselves
mapStyle: { type: [String, Object], default: () => l.style },
maxBounds: { type: [Array, Object], default: () => l.maxBounds },
maxCanvasSize: { type: Array, default: () => l.maxCanvasSize },
maxPitch: { type: Number, default: () => l.maxPitch },
maxTileCacheSize: { type: Number, default: () => l.maxTileCacheSize },
maxTileCacheZoomLevels: { type: Number, default: () => l.maxTileCacheZoomLevels },
maxZoom: { type: Number, default: () => l.maxZoom },
minPitch: { type: Number, default: () => l.minPitch },
minZoom: { type: Number, default: () => l.minZoom },
pitch: { type: Number, default: () => l.pitch },
pitchWithRotate: { type: Boolean, default: () => l.pitchWithRotate },
pixelRatio: { type: Number, default: () => l.pixelRatio },
refreshExpiredTiles: { type: Boolean, default: () => l.refreshExpiredTiles },
renderWorldCopies: { type: Boolean, default: () => l.renderWorldCopies },
roll: { type: Number, default: () => l.roll },
rollEnabled: { typed: Boolean, default: () => l.rollEnabled },
scrollZoom: { type: Boolean, default: () => l.scrollZoom },
touchPitch: { type: Boolean, default: () => l.touchPitch },
touchZoomRotate: { type: Boolean, default: () => l.touchZoomRotate },
trackResize: { type: Boolean, default: () => l.trackResize },
transformCameraUpdate: { type: Function, default: l.transformCameraUpdate },
transformRequest: { type: Function, default: l.transformRequest },
validateStyle: { type: Boolean, default: () => l.validateStyle },
zoom: { type: Number, default: () => l.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, t) {
const i = X(A()), a = U(), o = U(), n = _(!1), s = _(!1), v = _(!1), f = /* @__PURE__ */ new Map(), b = Me(), h = Oe(i, o, e.mapKey);
let M;
x(R, o), x(W, s), x(T, n), x($, i.uid), x(K, ""), x(J, b), x(ce, e.fitBoundsOptions), c(() => e.bearing, (r) => r && o.value?.setBearing(r)), c(() => e.bounds, (r) => r && o.value?.fitBounds(r, e.fitBoundsOptions?.useOnBoundsUpdate ? e.fitBoundsOptions : void 0)), c(() => e.center, (r) => r && o.value?.setCenter(r)), c(() => e.maxBounds, (r) => r && o.value?.setMaxBounds(r)), c(() => e.maxPitch, (r) => r && o.value?.setMaxPitch(r)), c(() => e.maxZoom, (r) => r && o.value?.setMaxZoom(r)), c(() => e.minPitch, (r) => r && o.value?.setMinPitch(r)), c(() => e.minZoom, (r) => r && o.value?.setMinZoom(r)), c(() => e.pitch, (r) => r && o.value?.setPitch(r)), c(() => e.renderWorldCopies, (r) => r && o.value?.setRenderWorldCopies(r)), c(() => e.mapStyle, (r) => r && o.value?.setStyle(r)), c(() => e.transformRequest, (r) => r && o.value?.setTransformRequest(r)), c(() => e.zoom, (r) => r && o.value?.setZoom(r)), c(() => e.projection, (r) => r && o.value?.setProjection(r)), e.language && (h.language = e.language), c(() => e.language, (r) => {
v.value && o.value && h.language !== (r || void 0) && (G(o.value, r), h.language = r || void 0);
}), c(() => h.language, (r) => {
v.value && o.value && G(o.value, r);
});
function w() {
v.value = !0, e.projection && o.value.setProjection(e.projection);
}
function C() {
G(o.value, h.language);
}
function E() {
h.isMounted = !0;
const r = Object.keys(e).filter((S) => e[S] !== void 0 && P.MAP_OPTION_KEYS.indexOf(S) !== -1).reduce((S, F) => (S[F === "mapStyle" ? "style" : F] = Z(e[F]), S), { container: a.value });
if (o.value = X(new ve(r)), h.map = o.value, n.value = !0, f.set("__load", () => {
s.value = !0, h.isLoaded = !0;
}), o.value.once("styledata", w), o.value.on("load", f.get("__load")), o.value.on("style.load", C), i.vnode.props) {
for (let S = 0, F = P.MAP_EVENT_TYPES.length; S < F; S++)
if (i.vnode.props["onMap:" + P.MAP_EVENT_TYPES[S]]) {
const Q = P.createEventHandler(i, o.value, t, "map:" + P.MAP_EVENT_TYPES[S]);
f.set(P.MAP_EVENT_TYPES[S], Q), o.value.on(P.MAP_EVENT_TYPES[S], Q);
}
}
o.value.getCanvas().addEventListener("webglcontextlost", p);
}
async function u() {
h.isMounted = !1, h.isLoaded = !1, s.value = !1, o.value && (o.value.off("style.load", C), o.value.getCanvas().removeEventListener("webglcontextlost", p), o.value._controls.forEach((r) => {
o.value.removeControl(r);
}), n.value = !1, f.forEach((r, S) => {
o.value.off(S.startsWith("__") ? S.substring(2) : S, r);
}), o.value.remove());
}
function p() {
u(), ae(E);
}
return le(() => {
E(), o.value && (M = new ResizeObserver(de(o.value.resize.bind(o.value), 100)), M.observe(a.value));
}), O(() => {
M !== void 0 && (M.disconnect(), M = void 0), u();
}), t.expose({ map: o }), () => N(
"div",
{
class: "mgl-container",
style: { height: e.height, width: e.width }
},
[
N("div", { ref: a, class: "mgl-wrapper" }),
n.value && t.slots.default ? t.slots.default({}) : void 0
]
);
}
}), Ce = /* @__PURE__ */ g({
name: "MglAttributionControl",
props: {
position: {
type: String,
validator: (e) => z.indexOf(e) !== -1
},
compact: Boolean,
customAttribution: [String, Array]
},
setup(e) {
const t = m(R), i = m(T), a = new fe({ compact: e.compact, customAttribution: e.customAttribution });
B(() => e.position, t, a), O(() => i.value && t.value.removeControl(a));
},
render() {
}
}), Ee = /* @__PURE__ */ g({
name: "MglFullscreenControl",
props: {
position: {
type: String,
default: D.TOP_RIGHT,
validator: (e) => z.indexOf(e) !== -1
},
container: {
type: Object,
default: null
}
},
setup(e) {
const t = m(R), i = m(T), a = new he({ container: e.container || void 0 });
function o() {
ae(() => t.value?.resize());
}
a.on("fullscreenstart", o), a.on("fullscreenend", o), B(() => e.position, t, a), O(() => {
a.off("fullscreenstart", o), a.off("fullscreenend", o), i.value && t.value?.removeControl(a);
});
},
render() {
}
});
class xe {
constructor(t = "rgba(0,0,0,0.9)", i = 4 * window.devicePixelRatio, a = "#7cf859", o = "Monaco, Consolas, Courier, monospace", n = 60 * window.devicePixelRatio, s = 90 * window.devicePixelRatio, v = 0, f = 5 * window.devicePixelRatio, b = 100 * window.devicePixelRatio) {
this.background = t, this.barWidth = i, this.color = a, this.font = o, this.graphHeight = n, this.graphWidth = s, this.graphTop = v, this.graphRight = f, this.width = b;
}
frames = 0;
totalTime = 0;
totalFrames = 0;
time = null;
map;
container;
readOutput;
canvas;
eventHandlers = /* @__PURE__ */ new Map();
getDefaultPosition() {
return D.TOP_RIGHT;
}
onAdd(t) {
this.map = t;
const i = this.container = document.createElement("div");
return i.className = "maplibregl-ctrl maplibregl-ctrl-fps", i.style.backgroundColor = this.background, i.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;`, i.appendChild(this.readOutput), i.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 t = performance.now();
this.updateGraph(this.getFPS(t)), this.frames = 0, this.time = null, this.map.off("render", this.eventHandlers.get("render"));
}
onRender() {
if (this.time) {
this.frames++;
const t = performance.now();
t >= this.time + 1e3 && (this.updateGraph(this.getFPS(t)), this.frames = 0, this.time = performance.now());
}
}
getFPS(t) {
return this.totalTime += t - this.time, this.totalFrames += this.frames, Math.round(1e3 * this.frames / (t - this.time)) || 0;
}
updateGraph(t) {
const i = this.canvas.getContext("2d"), a = Math.round(1e3 * this.totalFrames / this.totalTime) || 0, o = (this.graphHeight, this.barWidth);
i.fillStyle = this.background, i.globalAlpha = 1, i.fillRect(0, 0, this.graphWidth, this.graphTop), i.fillStyle = this.color, this.readOutput.textContent = `${t} FPS (${a} Avg)`, i.drawImage(
this.canvas,
this.graphRight + o,
this.graphTop,
this.graphWidth - o,
this.graphHeight,
this.graphRight,
this.graphTop,
this.graphWidth - o,
this.graphHeight
), i.fillRect(
this.graphRight + this.graphWidth - o,
this.graphTop,
o,
this.graphHeight
), i.fillStyle = this.background, i.globalAlpha = 0.75, i.fillRect(
this.graphRight + this.graphWidth - o,
this.graphTop,
o,
(1 - t / 100) * this.graphHeight
);
}
}
const Ae = /* @__PURE__ */ g({
name: "MglFrameRateControl",
props: {
position: {
type: String,
validator: (e) => z.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 t = m(R), i = m(T), a = new xe(
e.background,
e.barWidth,
e.color,
e.font,
e.graphHeight,
e.graphWidth,
e.graphTop,
e.graphRight,
e.width
);
B(() => e.position, t, a), O(() => i.value && t.value?.removeControl(a));
},
render() {
}
}), Le = /* @__PURE__ */ g({
name: "MglGeolocationControl",
props: {
position: {
type: String,
default: D.TOP_RIGHT,
validator: (e) => z.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 t = m(R), i = m(T), a = new pe({
positionOptions: e.positionOptions,
fitBoundsOptions: e.fitBoundsOptions,
trackUserLocation: e.trackUserLocation,
showAccuracyCircle: e.showAccuracyCircle,
showUserLocation: e.showUserLocation
});
B(() => e.position, t, a), O(() => i.value && t.value?.removeControl(a));
},
render() {
}
}), we = /* @__PURE__ */ g({
name: "MglNavigationControl",
props: {
position: {
type: String,
default: D.TOP_RIGHT,
validator: (e) => z.indexOf(e) !== -1
},
showCompass: { type: Boolean, default: !0 },
showZoom: { type: Boolean, default: !0 },
visualizePitch: Boolean
},
setup(e) {
const t = m(R), i = m(T), a = new ye({ showCompass: e.showCompass, showZoom: e.showZoom, visualizePitch: e.visualizePitch });
B(() => e.position, t, a), O(() => i.value && t.value?.removeControl(a));
},
render() {
}
});
var ne = /* @__PURE__ */ ((e) => (e.IMPERIAL = "imperial", e.METRIC = "metric", e.NAUTICAL = "nautical", e))(ne || {});
const Pe = Object.values(ne), Te = /* @__PURE__ */ g({
name: "MglScaleControl",
props: {
position: {
type: String,
validator: (e) => z.indexOf(e) !== -1
},
maxWidth: { type: Number, default: 100 },
unit: {
type: String,
default: "metric",
validator: (e) => Pe.indexOf(e) !== -1
}
},
setup(e) {
const t = m(R), i = m(T), a = new be({ maxWidth: e.maxWidth, unit: e.unit });
B(() => e.position, t, a), O(() => i.value && t.value?.removeControl(a));
},
render() {
}
});
function oe(e) {
return e && !!e.stopPropagation;
}
const Ne = /* @__PURE__ */ g({
name: "MglStyleSwitchControl",
props: {
position: {
type: String,
validator: (e) => z.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: t, slots: i }) {
const a = m(R), o = m(T), n = m(W), s = m(J), v = _(!1), f = _(e.isOpen === void 0 ? !1 : e.isOpen), b = U(e.modelValue === void 0 ? e.mapStyles.length ? e.mapStyles[0] : void 0 : e.modelValue), h = new me(v, !1), M = E.bind(null, !1);
function w() {
const u = a.value.getStyle().name;
for (let p = 0, r = e.mapStyles.length; p < r; p++)
if (e.mapStyles[p].name === u) {
C(e.mapStyles[p]);
break;
}
}
c(n, (u) => {
u && w();
}, { immediate: !0 }), a.value.on("style.load", w), document.addEventListener("click", M), B(() => e.position, a, h), e.modelValue !== void 0 && c(() => e.modelValue, (u) => {
u !== void 0 && (b.value = u);
}), e.isOpen !== void 0 && c(() => e.isOpen, (u) => {
u !== void 0 && (f.value = u);
}), O(() => {
o.value && (a.value.removeControl(h), a.value.off("style.load", w)), document.removeEventListener("click", M);
});
function C(u) {
b.value?.name !== u.name && (s.emit("styleSwitched", u), a.value.setStyle(u.style, { diff: !1 }), e.modelValue === void 0 && (b.value = u), t("update:modelValue", u), E(!1));
}
function E(u, p) {
oe(p) ? p.stopPropagation() : oe(u) && u.stopPropagation(), !(e.isOpen !== void 0 && e.isOpen === u || f.value === u) && (e.isOpen === void 0 ? (f.value = typeof u == "boolean" ? u : !f.value, t("update:isOpen", f.value)) : t("update:isOpen", typeof u == "boolean" ? u : !e.isOpen));
}
return () => {
if (!v.value)
return y("style-switch-control");
const u = {
isOpen: f,
toggleOpen: E,
setStyle: C,
mapStyles: e.mapStyles,
currentStyle: b
};
return N(
se,
{ to: h.container },
i.default ? i.default(u) : [
i.button ? i.button(u) : N(Y, {
type: te.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: E.bind(null, !0)
}),
i.styleList ? i.styleList(u) : N(
"div",
{ class: ["maplibregl-style-list", f.value ? "is-open" : ""] },
e.mapStyles.map((p) => p.icon ? N(Y, {
type: te.MDI,
path: p.icon.path,
class: b.value?.name === p.name ? "is-active" : "",
onClick: () => C(p)
}, ee(p.label)) : N("button", {
type: "button",
class: b.value?.name === p.name ? "is-active" : "",
onClick: () => C(p)
}, ee(p.label)))
)
]
);
};
},
// just only for code assist
template: `
<slot>
<slot name="button"></slot>
<slot name="styleList"></slot>
</slot>
`
}), Be = /* @__PURE__ */ g({
name: "MglMarker",
props: {
coordinates: {
type: [Object, Array],
required: !0
},
offset: [Object, Array],
anchor: String,
color: String,
// draggable : Boolean as PropType<boolean>, todo implement feature
clickTolerance: Number,
rotation: Number,
rotationAlignment: String,
pitchAlignment: String,
scale: Number
},
setup(e) {
const t = m(R), i = Object.keys(e).filter((o) => e[o] !== void 0 && P.MARKER_OPTION_KEYS.indexOf(o) !== -1).reduce((o, n) => (o[n] = Z(e[n]), o), {}), a = new Se(i);
return a.setLngLat(e.coordinates).addTo(t.value), c(() => e.coordinates, (o) => a.setLngLat(o)), c(() => e.offset, (o) => a.setOffset(o || [0, 0])), c(() => e.pitchAlignment, (o) => a.setPitchAlignment(o || "auto")), c(() => e.rotationAlignment, (o) => a.setRotationAlignment(o || "auto")), O(a.remove.bind(a)), { marker: a };
},
render() {
}
});
class I {
static REFS = /* @__PURE__ */ new Map();
static genSourceOpts(t, i, a) {
return Object.keys(i).filter((o) => i[o] !== void 0 && a.indexOf(o) !== -1).reduce((o, n) => (o[n] = Z(i[n]), o), { type: t });
}
static getSourceRef(t, i) {
const a = typeof i == "string", o = String(t) + (a ? i : "");
let n = I.REFS.get(o);
return n || (n = _(a ? null : void 0), I.REFS.set(o, n)), n;
}
}
class ze {
unmountHandlers = /* @__PURE__ */ new Map();
registerUnmountHandler(t, i) {
this.unmountHandlers.set(t, i);
}
unregisterUnmountHandler(t) {
this.unmountHandlers.delete(t);
}
unmount() {
this.unmountHandlers.forEach((t) => t());
}
}
function H(e, t, i) {
const a = m(R), o = m(W), n = m(J), s = m($), v = I.getSourceRef(s, e.sourceId), f = new ze();
x(K, e.sourceId), x(ie, f);
function b() {
o.value && (a.value.addSource(e.sourceId, I.genSourceOpts(t, e, i)), v.value = a.value.getSource(e.sourceId));
}
function h() {
v.value = null;
}
return c(o, b, { immediate: !0 }), a.value.on("style.load", b), n.on("styleSwitched", h), O(() => {
o.value && (f.unmount(), a.value.removeSource(e.sourceId)), a.value.off("style.load", b), n.off("styleSwitched", h);
}), v;
}
const je = j({
animate: void 0,
canvas: void 0,
coordinates: void 0
}), He = /* @__PURE__ */ g({
name: "MglCanvasSource",
props: {
sourceId: {
type: String,
required: !0
},
coordinates: Array,
animate: Boolean,
canvas: [Object, String]
},
slots: Object,
setup(e, { slots: t }) {
const i = H(e, "canvas", je);
return c(k(e.coordinates) ? e.coordinates : () => e.coordinates, (a) => {
i.value?.setCoordinates(a);
}, { immediate: !0 }), () => [
y("Canvas Source"),
i.value && t.default ? t.default({}) : void 0
];
}
}), _e = j({
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
}), ke = /* @__PURE__ */ g({
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: t }) {
const i = H(e, "geojson", _e);
return c(k(e.data) ? e.data : () => e.data, (a) => {
i.value?.setData(a || { type: "FeatureCollection", features: [] });
}, { immediate: !0 }), () => [
y("GeoJSON Source"),
i.value && t.default ? t.default({}) : void 0
];
}
}), Ie = j({
url: void 0,
coordinates: void 0
}), Fe = /* @__PURE__ */ g({
name: "MglImageSource",
props: {
sourceId: {
type: String,
required: !0
},
url: String,
coordinates: Array
},
slots: Object,
setup(e, { slots: t }) {
const i = H(e, "image", Ie);
return c(k(e.coordinates) ? e.coordinates : () => e.coordinates, (a) => {
i.value?.setCoordinates(a);
}, { immediate: !0 }), () => [
y("Image Source"),
i.value && t.default ? t.default({}) : void 0
];
}
}), De = j({
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
}), Ve = /* @__PURE__ */ g({
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: t }) {
const i = H(e, "raster", De);
return () => [
y("Raster Source"),
i.value && t.default ? t.default({}) : void 0
];
}
}), Ze = j({
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
}), We = /* @__PURE__ */ g({
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: t }) {
const i = H(e, "raster-dem", Ze);
return () => [
y("RasterDem Source"),
i.value && t.default ? t.default({}) : void 0
];
}
}), Ge = j({
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,
encoding: void 0
}), Ue = /* @__PURE__ */ g({
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,
encoding: String
},
slots: Object,
setup(e, { slots: t }) {
const i = H(e, "vector", Ge);
return c(k(e.tiles) ? e.tiles : () => e.tiles, (a) => {
i.value?.setTiles(a || []);
}, { immediate: !0 }), c(k(e.url) ? e.url : () => e.url, (a) => {
i.value?.setUrl(a || "");
}, { immediate: !0 }), () => [
y("Vector Source"),
i.value && t.default ? t.default({}) : void 0
];
}
}), Ye = j({
urls: void 0,
coordinates: void 0
}), qe = /* @__PURE__ */ g({
name: "MglVideoSource",
props: {
sourceId: {
type: String,
required: !0
},
urls: Array,
coordinates: Array
},
slots: Object,
setup(e, { slots: t }) {
const i = H(e, "video", Ye);
return c(k(e.coordinates) ? e.coordinates : () => e.coordinates, (a) => {
i.value?.setCoordinates(a);
}, { immediate: !0 }), () => [
y("Video Source"),
i.value && t.default ? t.default({}) : void 0
];
}
});
class d {
static SOURCE_OPTS = [
"metadata",
"ref",
"source",
"sourceLayer",
"minzoom",
"maxzoom",
"interactive",
"filter",
"layout",
"paint"
];
static LAYER_EVENTS = [
"click",
"dblclick",
"mousedown",
"mouseup",
"mousemove",
"mouseenter",
"mouseleave",
"mouseover",
"mouseout",
"contextmenu",
"touchstart",
"touchend",
"touchcancel"
];
static 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"
]
};
static genLayerOpts(t, i, a, o) {
return Object.keys(a).filter((n) => a[n] !== void 0 && d.SOURCE_OPTS.indexOf(n) !== -1).reduce((n, s) => (n[s === "sourceLayer" ? "source-layer" : s] = Z(a[s]), n), { type: i, source: a.source || o, id: t });
}
static registerLayerEvents(t, i, a) {
if (a.props)
for (let o = 0, n = d.LAYER_EVENTS.length; o < n; o++) {
const s = "on" + d.LAYER_EVENTS[o].charAt(0).toUpperCase() + d.LAYER_EVENTS[o].substr(1);
a.props[s] && t.on(d.LAYER_EVENTS[o], i, a.props[s]);
}
}
static unregisterLayerEvents(t, i, a) {
if (a.props)
for (let o = 0, n = d.LAYER_EVENTS.length; o < n; o++) {
const s = "on" + d.LAYER_EVENTS[o].charAt(0).toUpperCase() + d.LAYER_EVENTS[o].substr(1);
a.props[s] && t.off(d.LAYER_EVENTS[o], i, a.props[s]);
}
}
}
function L(e, t, i, a, o) {
const n = m(K), s = t || n;
s || ue(`Layer (${i}): layer must be used inside source tag or source prop must be set`);
const v = m(R), f = m(W), b = m($), h = I.getSourceRef(b, s), M = m(ie);
function w() {
f.value && (o && d.unregisterLayerEvents(v.value, i, o.vnode), v.value.getLayer(i) && v.value.removeLayer(i));
}
return M.registerUnmountHandler(i, w), O(() => {
M.unregisterUnmountHandler(i), w();
}), c([f, h], ([C, E]) => {
C && (E || E === void 0) && (v.value.addLayer(d.genLayerOpts(i, e, a, s), a.before || void 0), o && d.registerLayerEvents(v.value, a.layerId, o.vnode));
}, { immediate: !0 }), { map: v, isLoaded: f, source: h };
}
const $e = /* @__PURE__ */ g({
name: "MglBackgroundLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object
},
emits: [...d.SHARED.emits],
setup(e) {
return L("background", e.source, e.layerId, e), () => y("Background Layer");
}
}), Ke = /* @__PURE__ */ g({
name: "MglCircleLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object,
filter: [Boolean, Array]
},
emits: [...d.SHARED.emits],
setup(e) {
const t = A();
return L("circle", e.source, e.layerId, e, t), () => y("Circle Layer");
}
}), Je = /* @__PURE__ */ g({
name: "MglFillLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object,
filter: [Boolean, Array]
},
emits: [...d.SHARED.emits],
setup(e) {
const t = A();
return L("fill", e.source, e.layerId, e, t), () => y("Fill Layer");
}
}), Qe = /* @__PURE__ */ g({
name: "MglFillExtrusionLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object,
filter: [Boolean, Array]
},
emits: [...d.SHARED.emits],
setup(e) {
const t = A();
return L("fill-extrusion", e.source, e.layerId, e, t), () => y("Fill Extrusion Layer");
}
}), Xe = /* @__PURE__ */ g({
name: "MglHeatmapLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object,
filter: [Boolean, Array]
},
emits: [...d.SHARED.emits],
setup(e) {
const t = A();
return L("heatmap", e.source, e.layerId, e, t), () => y("Heatmap Layer");
}
}), et = /* @__PURE__ */ g({
name: "MglHillshadeLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object,
filter: [Boolean, Array]
},
emits: [...d.SHARED.emits],
setup(e) {
const t = A();
return L("hillshade", e.source, e.layerId, e, t), () => y("Hillshade Layer");
}
}), tt = /* @__PURE__ */ g({
name: "MglLineLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object,
filter: [Boolean, Array]
},
emits: [...d.SHARED.emits],
setup(e) {
const t = A();
return L("line", e.source, e.layerId, e, t), () => y("Line Layer");
}
}), ot = /* @__PURE__ */ g({
name: "MglRasterLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object,
filter: [Boolean, Array]
},
emits: [...d.SHARED.emits],
setup(e) {
const t = A();
return L("raster", e.source, e.layerId, e, t), () => y("Raster Layer");
}
}), at = /* @__PURE__ */ g({
name: "MglSymbolLayer",
props: {
...d.SHARED.props,
layout: Object,
paint: Object,
filter: [Boolean, Array]
},
emits: [...d.SHARED.emits],
setup(e) {
const t = A();
return L("symbol", e.source, e.layerId, e, t), () => y("Symbol Layer");
}
}), it = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
MglAttributionControl: Ce,
MglBackgroundLayer: $e,
MglButton: Y,
MglCanvasSource: He,
MglCircleLayer: Ke,
MglCustomControl: ge,
MglFillExtrusionLayer: Qe,
MglFillLayer: Je,
MglFrameRateControl: Ae,
MglFullscreenControl: Ee,
MglGeoJsonSource: ke,
MglGeolocationControl: Le,
MglHeatmapLayer: Xe,
MglHillshadeLayer: et,
MglImageSource: Fe,
MglLineLayer: tt,
MglMap: Re,
MglMarker: Be,
MglNavigationControl: we,
MglRasterDemSource: We,
MglRasterLayer: ot,
MglRasterSource: Ve,
MglScaleControl: Te,
MglStyleSwitchControl: Ne,
MglSymbolLayer: at,
MglVectorSource: Ue,
MglVideoSource: qe,
Position: D
}, Symbol.toStringTag, { value: "Module" })), ct = function(t) {
Object.entries(it).forEach(([i, a]) => {
t.component(i, a);
});
};
export {
gt as AllOptions,
j as AllSourceOptions,
vt as CircleMode,
ft as CircleStaticMode,
ht as DrawMode,
pt as DrawPlugin,
Ce as MglAttributionControl,
$e as MglBackgroundLayer,
Y as MglButton,
He as MglCanvasSource,
Ke as MglCircleLayer,
ge as MglCustomControl,
l as MglDefaults,
yt as MglDrawControl,
Qe as MglFillExtrusionLayer,
Je as MglFillLayer,
Ae as MglFrameRateControl,
Ee as MglFullscreenControl,
ke as MglGeoJsonSource,
Le as MglGeolocationControl,
Xe as MglHeatmapLayer,
et as MglHillshadeLayer,
Fe as MglImageSource,
tt as MglLineLayer,
Re as MglMap,
Be as MglMarker,
we as MglNavigationControl,
We as MglRasterDemSource,
ot as MglRasterLayer,
Ve as MglRasterSource,
Te as MglScaleControl,
Ne as MglStyleSwitchControl,
at as MglSymbolLayer,
Ue as MglVectorSource,
qe as MglVideoSource,
bt as PolygonMode,
D as Position,
$ as componentIdSymbol,
ct as default,
J as emitterSymbol,
ce as fitBoundsOptionsSymbol,
T as isInitializedSymbol,
W as isLoadedSymbol,
R as mapSymbol,
K as sourceIdSymbol,
ie as sourceLayerRegistry,
L as useDisposableLayer,
ut as useMap,
B as usePositionWatcher,
H as useSource
};
//# sourceMappingURL=vue-maplibre-gl.js.map