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