@geoql/v-maplibre 1.0.0

package/dist/index.js

@@ -0,0 +1,1457 @@
+import { inject as O, defineComponent as h, useSlots as R, onMounted as S, renderSlot as _, ref as b, watch as v, onBeforeUnmount as C, createBlock as J, openBlock as M, computed as V, provide as T, shallowRef as B, createElementBlock as j, createCommentVNode as D, withCtx as F } from "vue";
+import U, { AttributionControl as Z, FullscreenControl as K, GeolocateControl as W, NavigationControl as H, ScaleControl as Q, Map as X, Popup as Y, Marker as ee } from "maplibre-gl";
+import { PMTiles as re, Protocol as te } from "pmtiles";
+function P(p, t) {
+  const e = O(p, t);
+  if (!e)
+    throw new Error(`Could not resolve ${p.description}`);
+  return e;
+}
+const E = Symbol("Map"), G = Symbol("Protocol"), pe = /* @__PURE__ */ h({
+  __name: "VControlAttribution",
+  props: {
+    options: { default: void 0 },
+    position: { default: "bottom-right" }
+  },
+  setup(p) {
+    const t = {
+      compact: !1,
+      customAttribution: void 0
+    }, e = p, y = R(), i = P(E);
+    S(() => {
+      u();
+    });
+    const u = () => {
+      let d = t;
+      e.options && (d = {
+        ...e.options
+      }), y && y.default?.() && (d.customAttribution = y.default()[0].children);
+      const m = new Z(d);
+      i.value.addControl(m, e.position);
+    };
+    return (d, m) => _(d.$slots, "default");
+  }
+}), fe = /* @__PURE__ */ h({
+  __name: "VControlFullscreen",
+  props: {
+    options: { default: void 0 },
+    position: { default: "top-left" }
+  },
+  setup(p) {
+    const t = {
+      container: void 0
+    }, e = p, y = P(E);
+    S(() => {
+      i();
+    });
+    const i = () => {
+      const u = new K(e.options || t);
+      y.value.addControl(u, e.position);
+    };
+    return () => {
+    };
+  }
+}), x = [
+  "geolocate",
+  "error",
+  "outofmaxbounds",
+  "trackuserlocationstart",
+  "trackuserlocationend"
+], me = /* @__PURE__ */ h({
+  __name: "VControlGeolocate",
+  props: {
+    options: { default: void 0 },
+    position: { default: "top-left" }
+  },
+  emits: x,
+  setup(p, { emit: t }) {
+    const e = {
+      fitBoundsOptions: {
+        linear: !1,
+        offset: [0, 0],
+        maxZoom: 22
+      },
+      positionOptions: {
+        enableHighAccuracy: !0,
+        maximumAge: 0,
+        timeout: 6e3
+      },
+      trackUserLocation: !0,
+      showAccuracyCircle: !0,
+      showUserLocation: !0
+    }, y = p, i = t, u = P(E);
+    S(() => {
+      d();
+    });
+    const d = () => {
+      const m = new W(y.options || e);
+      u.value.addControl(m, y.position), x.forEach((g) => {
+        m.on(g, () => {
+          i(g);
+        });
+      });
+    };
+    return () => {
+    };
+  }
+}), ge = /* @__PURE__ */ h({
+  __name: "VControlNavigation",
+  props: {
+    options: { default: void 0 },
+    position: { default: "top-left" }
+  },
+  setup(p) {
+    const t = {
+      showCompass: !0,
+      showZoom: !0,
+      visualizePitch: !0
+    }, e = p, y = O(E);
+    S(() => {
+      i();
+    });
+    const i = () => {
+      const u = new H(e.options || t);
+      y.value.addControl(u, e.position);
+    };
+    return () => {
+    };
+  }
+}), ve = /* @__PURE__ */ h({
+  __name: "VControlScale",
+  props: {
+    options: { default: void 0 },
+    position: { default: "bottom-left" }
+  },
+  setup(p) {
+    const t = {
+      maxWidth: 100,
+      unit: "metric"
+    }, e = p, y = O(E);
+    S(() => {
+      i();
+    });
+    const i = () => {
+      const u = new Q(e.options || t);
+      y?.value.addControl(u, e.position);
+    };
+    return (u, d) => _(u.$slots, "default");
+  }
+}), Ie = /* @__PURE__ */ h({
+  __name: "VLayerMaplibreCanvas",
+  props: {
+    source: {},
+    layer: {},
+    sourceId: { default: "maplibre.gl-canvas-source" },
+    layerId: { default: "maplibre.gl-canvas-layer" },
+    before: { default: "" }
+  },
+  setup(p) {
+    const t = p, e = P(E), y = b(!1), i = () => e.value || null, u = (r) => {
+      r && r.on("style.load", () => {
+        const a = () => {
+          r.isStyleLoaded() ? y.value = !0 : (y.value = !1, setTimeout(a, 200));
+        };
+        a();
+      });
+    }, d = () => {
+      const r = i();
+      if (r)
+        try {
+          if (r.getSource(t.sourceId) || r.addSource(t.sourceId, t.source), !r.getLayer(t.layerId)) {
+            const a = {
+              ...t.layer,
+              id: t.layerId,
+              source: t.sourceId
+            };
+            r.addLayer(a, t.before);
+          }
+        } catch (a) {
+          console.error("Error adding Canvas layer:", a);
+        }
+    }, m = () => {
+      const r = i();
+      if (r)
+        try {
+          r.getLayer(t.layerId) && r.removeLayer(t.layerId), r.getSource(t.sourceId) && r.removeSource(t.sourceId), r.addSource(t.sourceId, t.source);
+          const a = {
+            ...t.layer,
+            id: t.layerId,
+            source: t.sourceId
+          };
+          r.addLayer(a, t.before);
+        } catch (a) {
+          console.error("Error updating Canvas source:", a);
+        }
+    }, g = () => {
+      const r = i();
+      if (r)
+        try {
+          r.getLayer(t.layerId) && (Object.entries(t.layer.paint || {}).forEach(([a, f]) => {
+            r.setPaintProperty(t.layerId, a, f);
+          }), Object.entries(t.layer.layout || {}).forEach(([a, f]) => {
+            r.setLayoutProperty(t.layerId, a, f);
+          }));
+        } catch (a) {
+          console.error("Error updating Canvas layer:", a);
+        }
+    };
+    return v(() => t.source, m, { deep: !0 }), v(() => t.layer, g, { deep: !0 }), v(
+      e,
+      (r) => {
+        r && u(r);
+      },
+      { immediate: !0 }
+    ), v(y, (r) => {
+      r && d();
+    }), S(() => {
+      i()?.isStyleLoaded() && d();
+    }), C(() => {
+      const r = i();
+      if (r)
+        try {
+          r.getLayer(t.layerId) && r.removeLayer(t.layerId), r.getSource(t.sourceId) && r.removeSource(t.sourceId);
+        } catch (a) {
+          console.error("Error cleaning up Canvas layer:", a);
+        }
+    }), (r, a) => _(r.$slots, "default");
+  }
+}), Le = /* @__PURE__ */ h({
+  __name: "VLayerMaplibreGeojson",
+  props: {
+    sourceId: { default: "maplibre-gl-geojson-source" },
+    layerId: { default: "maplibre-gl-geojson-layer" },
+    source: {},
+    layer: {},
+    before: { default: "" }
+  },
+  emits: ["on-click"],
+  setup(p, { emit: t }) {
+    const e = p, y = t, i = P(E), u = b(!1), d = (o) => !o || typeof o == "string" ? !1 : o && typeof o == "object" && "type" in o ? o.type === "FeatureCollection" && "features" in o ? o.features.length > 0 : o.type === "Feature" || o.type === "Point" || o.type === "LineString" || o.type === "Polygon" || o.type === "MultiPoint" || o.type === "MultiLineString" || o.type === "MultiPolygon" : !1, m = () => i.value || null, g = (o) => {
+      o && o.on("style.load", () => {
+        const l = () => {
+          o.isStyleLoaded() ? u.value = !0 : (u.value = !1, setTimeout(l, 200));
+        };
+        l();
+      });
+    }, r = () => {
+      const o = m();
+      if (!(!o || !o.isStyleLoaded())) {
+        if (!d(e.source.data)) {
+          console.log(
+            `[${e.layerId}] Waiting for valid data before adding layer`
+          );
+          return;
+        }
+        try {
+          if (o.getSource(e.sourceId) || o.addSource(e.sourceId, e.source), !o.getLayer(e.layerId)) {
+            const l = {
+              ...e.layer,
+              id: e.layerId,
+              source: e.sourceId
+            };
+            o.addLayer(l, e.before);
+          }
+        } catch (l) {
+          console.error("Error adding GeoJSON layer:", l);
+        }
+      }
+    }, a = () => {
+      const o = m();
+      if (o)
+        try {
+          const l = o.getSource(e.sourceId);
+          if (l && "setData" in l) {
+            const I = o.getStyle().layers.filter(
+              (s) => s.type !== "background" && "source" in s && s.source === e.sourceId
+            );
+            (I.length === 0 || I[0]?.id === e.layerId) && l.setData(e.source.data);
+          } else l || r();
+        } catch (l) {
+          console.error("Error updating GeoJSON source:", l);
+        }
+    }, f = () => {
+      const o = m();
+      if (o)
+        try {
+          o.getLayer(e.layerId) ? (Object.entries(e.layer.paint || {}).forEach(([l, I]) => {
+            o.setPaintProperty(e.layerId, l, I);
+          }), Object.entries(e.layer.layout || {}).forEach(([l, I]) => {
+            o.setLayoutProperty(e.layerId, l, I);
+          })) : r();
+        } catch (l) {
+          console.error("Error updating GeoJSON layer:", l);
+        }
+    }, n = (o) => {
+      if (o)
+        try {
+          o.on("click", e.layerId, (l) => {
+            l.features && l.features.length > 0 && y("on-click", {
+              features: l.features,
+              coordinates: l.lngLat
+            });
+          }), o.on("mouseenter", e.layerId, () => {
+            o.getCanvas().style.cursor = "pointer";
+          }), o.on("mouseleave", e.layerId, () => {
+            o.getCanvas().style.cursor = "";
+          });
+        } catch (l) {
+          console.error("Error in setupLayerEvents:", l);
+        }
+    };
+    return v(
+      () => e.source,
+      (o, l) => {
+        if (d(o?.data) && JSON.stringify(o.data) !== JSON.stringify(l?.data)) {
+          const I = m();
+          I?.isStyleLoaded() && (I.getSource(e.sourceId) ? a() : r());
+        }
+      },
+      { deep: !0 }
+    ), v(() => e.layer, f, { deep: !0 }), v(
+      i,
+      (o) => {
+        o && (g(o), o.isStyleLoaded() && (u.value = !0));
+      },
+      { immediate: !0 }
+    ), v(u, (o) => {
+      if (o && d(e.source.data)) {
+        const l = m();
+        l && (r(), n(l));
+      }
+    }), v(
+      () => e.layer.layout?.visibility,
+      (o) => {
+        const l = m();
+        if (!l || !l.isStyleLoaded()) return;
+        const I = l.getLayer(e.layerId);
+        if (!I && o === "visible")
+          d(e.source.data) && r();
+        else if (I)
+          try {
+            l.setLayoutProperty(
+              e.layerId,
+              "visibility",
+              o
+            );
+          } catch (s) {
+            console.error(
+              `Error updating visibility for ${e.layerId}:`,
+              s
+            );
+          }
+      },
+      { immediate: !0 }
+    ), S(() => {
+      try {
+        m()?.isStyleLoaded() && d(e.source.data) && r();
+      } catch (o) {
+        console.error("Error adding layer:", o);
+      }
+    }), C(() => {
+      const o = m();
+      if (o)
+        try {
+          o.getLayer(e.layerId) && o.removeLayer(e.layerId), o.getStyle().layers.filter(
+            (I) => I.type !== "background" && "source" in I && I.source === e.sourceId
+          ).length === 0 && o.getSource(e.sourceId) && o.removeSource(e.sourceId);
+        } catch (l) {
+          console.error("Error cleaning up GeoJSON layer:", l);
+        }
+    }), (o, l) => _(o.$slots, "default");
+  }
+}), be = /* @__PURE__ */ h({
+  __name: "VLayerMaplibreImage",
+  props: {
+    sourceId: {
+      type: String,
+      default: "maplibre.gl-image-source",
+      required: !0
+    },
+    layerId: {
+      type: String,
+      default: "maplibre.gl-image-layer",
+      required: !0
+    },
+    source: {
+      type: Object,
+      required: !0
+    },
+    layer: {
+      type: Object,
+      default: () => ({}),
+      required: !0
+    },
+    before: {
+      type: String,
+      default: "",
+      required: !1
+    }
+  },
+  setup(p) {
+    const t = p, e = P(E), y = b(!1), i = () => e.value || null, u = (r) => {
+      r && r.on("style.load", () => {
+        const a = () => {
+          r.isStyleLoaded() ? y.value = !0 : (y.value = !1, setTimeout(a, 200));
+        };
+        a();
+      });
+    }, d = () => {
+      const r = i();
+      if (r)
+        try {
+          if (r.getSource(t.sourceId) || r.addSource(t.sourceId, t.source), !r.getLayer(t.layerId)) {
+            const a = {
+              ...t.layer,
+              id: t.layerId,
+              source: t.sourceId
+            };
+            r.addLayer(a, t.before);
+          }
+        } catch (a) {
+          console.error("Error adding Image layer:", a);
+        }
+    }, m = () => {
+      const r = i();
+      if (r)
+        try {
+          const a = r.getSource(t.sourceId);
+          if (a)
+            if (a.updateImage)
+              a.updateImage({
+                url: t.source.url,
+                coordinates: t.source.coordinates
+              });
+            else {
+              r.getLayer(t.layerId) && r.removeLayer(t.layerId), r.getSource(t.sourceId) && r.removeSource(t.sourceId), r.addSource(t.sourceId, t.source);
+              const f = {
+                ...t.layer,
+                id: t.layerId,
+                source: t.sourceId
+              };
+              r.addLayer(f, t.before);
+            }
+        } catch (a) {
+          console.error("Error updating Image source:", a);
+        }
+    }, g = () => {
+      const r = i();
+      if (r)
+        try {
+          r.getLayer(t.layerId) && (Object.entries(t.layer.paint || {}).forEach(([a, f]) => {
+            r.setPaintProperty(t.layerId, a, f);
+          }), Object.entries(t.layer.layout || {}).forEach(([a, f]) => {
+            r.setLayoutProperty(t.layerId, a, f);
+          }));
+        } catch (a) {
+          console.error("Error updating Image layer:", a);
+        }
+    };
+    return v(() => t.source, m, { deep: !0 }), v(() => t.layer, g, { deep: !0 }), v(
+      e,
+      (r) => {
+        r && u(r);
+      },
+      { immediate: !0 }
+    ), v(y, (r) => {
+      r && d();
+    }), S(() => {
+      i()?.isStyleLoaded() && d();
+    }), C(() => {
+      const r = i();
+      if (r)
+        try {
+          r.getLayer(t.layerId) && r.removeLayer(t.layerId), r.getSource(t.sourceId) && r.removeSource(t.sourceId);
+        } catch (a) {
+          console.error("Error cleaning up Image layer:", a);
+        }
+    }), (r, a) => _(r.$slots, "default");
+  }
+}), oe = /* @__PURE__ */ h({
+  __name: "VLayerMaplibreRaster",
+  props: {
+    sourceId: {},
+    source: {},
+    layerId: {},
+    layer: {},
+    before: {}
+  },
+  setup(p) {
+    const t = p, e = P(E), y = b(!1), i = () => e.value || null, u = (r) => {
+      r && r.on("style.load", () => {
+        const a = () => {
+          r.isStyleLoaded() ? y.value = !0 : (y.value = !1, setTimeout(a, 200));
+        };
+        a();
+      });
+    }, d = () => {
+      const r = i();
+      if (r)
+        try {
+          r.getSource(t.sourceId) || r.addSource(t.sourceId, t.source), r.getLayer(t.layerId) || (r.addLayer(t.layer, t.before), t.layer.layout?.visibility && r.setLayoutProperty(
+            t.layerId,
+            "visibility",
+            t.layer.layout.visibility
+          ));
+        } catch (a) {
+          console.error(`[${t.layerId}] Error setting up layer:`, a);
+        }
+    }, m = () => {
+      const r = i();
+      if (r)
+        try {
+          const a = t.before;
+          r.getLayer(t.layerId) && r.removeLayer(t.layerId), r.removeSource(t.sourceId), r.addSource(t.sourceId, t.source);
+          const f = {
+            ...t.layer,
+            id: t.layerId,
+            type: "raster",
+            source: t.sourceId
+          };
+          a && r.getLayer(a) ? r.addLayer(f, a) : r.addLayer(f);
+        } catch (a) {
+          console.error("Error updating Raster source:", a);
+        }
+    }, g = () => {
+      const r = i();
+      if (r)
+        try {
+          if (r.getLayer(t.layerId)) {
+            const a = t.layer.paint || {};
+            Object.entries(a).forEach(([n, o]) => {
+              r.setPaintProperty(t.layerId, n, o);
+            });
+            const f = t.layer.layout || {};
+            Object.entries(f).forEach(([n, o]) => {
+              r.setLayoutProperty(t.layerId, n, o);
+            });
+          }
+        } catch (a) {
+          console.error("Error updating Raster layer:", a);
+        }
+    };
+    return v(
+      () => t.source.tiles?.[0],
+      // Usually raster sources have a single tile URL
+      (r, a) => {
+        r !== a && m();
+      }
+    ), v(() => t.layer, g, { deep: !0 }), v(
+      e,
+      (r) => {
+        r && u(r);
+      },
+      { immediate: !0 }
+    ), v(y, (r) => {
+      r && d();
+    }), v(
+      () => t.layer.layout?.visibility,
+      (r) => {
+        const a = i();
+        if (!a) return;
+        if (a.getLayer(t.layerId))
+          try {
+            a.setLayoutProperty(
+              t.layerId,
+              "visibility",
+              r
+            ), r === "visible" && t.before && a.moveLayer(t.layerId, t.before);
+          } catch (n) {
+            console.error(`[${t.layerId}] Error updating visibility:`, n);
+          }
+        else
+          try {
+            a.addLayer(t.layer, t.before);
+          } catch (n) {
+            console.error(`[${t.layerId}] Error adding layer:`, n);
+          }
+      },
+      { immediate: !0 }
+    ), v(
+      () => t.before,
+      (r) => {
+        const a = i();
+        if (!(!a || !a.getLayer(t.layerId)) && t.layer.layout?.visibility === "visible")
+          try {
+            console.log(`[${t.layerId}] Moving layer before:`, r), a.moveLayer(t.layerId, r);
+          } catch (f) {
+            console.error(`[${t.layerId}] Error moving layer:`, f);
+          }
+      }
+    ), S(() => {
+      if (i())
+        try {
+          d();
+        } catch (a) {
+          console.error(`[${t.layerId}] Error setting up layer:`, a);
+        }
+    }), (r, a) => _(r.$slots, "default");
+  }
+}), A = [
+  "click",
+  "dblclick",
+  "mousedown",
+  "mouseup",
+  "mousemove",
+  "mouseenter",
+  "mouseleave",
+  "mouseover",
+  "mouseout",
+  "contextmenu",
+  "touchstart",
+  "touchend",
+  "touchcancel"
+], N = [
+  "error",
+  "load",
+  "idle",
+  "remove",
+  "render",
+  "resize",
+  "webglcontextlost",
+  "webglcontextrestored",
+  "dataloading",
+  "data",
+  "tiledataloading",
+  "sourcedataloading",
+  "styledataloading",
+  "sourcedata",
+  "styledata",
+  "boxzoomcancel",
+  "boxzoomstart",
+  "boxzoomend",
+  "touchcancel",
+  "touchmove",
+  "touchend",
+  "touchstart",
+  "click",
+  "contextmenu",
+  "dblclick",
+  "mousemove",
+  "mouseup",
+  "mousedown",
+  "mouseout",
+  "mouseover",
+  "movestart",
+  "move",
+  "moveend",
+  "zoomstart",
+  "zoom",
+  "zoomend",
+  "rotatestart",
+  "rotate",
+  "rotateend",
+  "dragstart",
+  "drag",
+  "dragend",
+  "pitchstart",
+  "pitch",
+  "pitchend",
+  "wheel"
+], w = ["dragstart", "drag", "dragend"], q = ["click", "mouseenter", "mouseleave"], z = ["open", "close"], he = /* @__PURE__ */ h({
+  __name: "VLayerMaplibreVector",
+  props: {
+    sourceId: {},
+    source: {},
+    layerId: {},
+    layer: {},
+    before: {}
+  },
+  emits: [...A],
+  setup(p, { emit: t }) {
+    const e = p, y = t, i = P(E), u = b(!1), d = () => i.value || null, m = (n) => {
+      n && n.on("style.load", () => {
+        const o = () => {
+          n.isStyleLoaded() ? u.value = !0 : (u.value = !1, setTimeout(o, 200));
+        };
+        o();
+      });
+    }, g = () => {
+      const n = d();
+      if (n)
+        try {
+          n.getSource(e.sourceId) || n.addSource(e.sourceId, e.source), n.getLayer(e.layerId) || (e.layer.layout?.visibility === "visible" ? n.addLayer(e.layer, e.before) : n.addLayer(e.layer));
+        } catch (o) {
+          console.error(`[${e.layerId}] Error setting up layer:`, o);
+        }
+    }, r = () => {
+      const n = d();
+      if (n)
+        try {
+          const o = n.getSource(e.sourceId);
+          if (o && JSON.stringify(o.serialize()) !== JSON.stringify(e.source)) {
+            n.getLayer(e.layerId) && n.removeLayer(e.layerId), n.removeSource(e.sourceId), n.addSource(e.sourceId, e.source);
+            const l = {
+              ...e.layer,
+              id: e.layerId,
+              source: e.sourceId
+            };
+            n.addLayer(l, e.before);
+          }
+        } catch (o) {
+          console.error("Error updating vector source:", o);
+        }
+    }, a = () => {
+      const n = d();
+      if (n)
+        try {
+          if (n.getLayer(e.layerId)) {
+            const o = n.getLayer(e.layerId), l = o?.paint || {}, I = o?.layout || {};
+            Object.entries(e.layer.paint || {}).forEach(([s, c]) => {
+              JSON.stringify(l[s]) !== JSON.stringify(c) && n.setPaintProperty(e.layerId, s, c);
+            }), Object.entries(e.layer.layout || {}).forEach(([s, c]) => {
+              JSON.stringify(I[s]) !== JSON.stringify(c) && n.setLayoutProperty(e.layerId, s, c);
+            });
+          }
+        } catch (o) {
+          console.error("Error updating vector layer:", o);
+        }
+    }, f = (n) => {
+      if (n)
+        try {
+          A.forEach((o) => {
+            n.on(o, e.layerId, (l) => {
+              o === "mousemove" && (n.getCanvas().style.cursor = "pointer"), o === "mouseleave" && (n.getCanvas().style.cursor = ""), y(o, l);
+            });
+          });
+        } catch (o) {
+          console.error("Error setting up layer events:", o);
+        }
+    };
+    return v(
+      i,
+      (n, o) => {
+        n && n !== o && m(n);
+      },
+      { immediate: !0 }
+    ), v(u, (n) => {
+      if (n) {
+        const o = d();
+        if (!o) return;
+        g(), f(o);
+      }
+    }), v(
+      () => JSON.stringify(e.source.tiles),
+      (n, o) => {
+        n !== o && r();
+      }
+    ), v(
+      () => ({
+        paint: e.layer.paint,
+        // Watch layout changes but exclude visibility since it's handled separately
+        layout: e.layer.layout ? { ...e.layer.layout, visibility: void 0 } : void 0
+      }),
+      (n, o) => {
+        JSON.stringify(n) !== JSON.stringify(o) && a();
+      },
+      { deep: !0 }
+    ), v(
+      () => e.layer.layout?.visibility,
+      (n) => {
+        const o = d();
+        if (!o) return;
+        if (o.getLayer(e.layerId))
+          try {
+            o.setLayoutProperty(
+              e.layerId,
+              "visibility",
+              n
+            ), n === "visible" && e.before && setTimeout(() => {
+              o.moveLayer(e.layerId, e.before);
+            }, 0);
+          } catch (I) {
+            console.error(`[${e.layerId}] Error updating visibility:`, I);
+          }
+        else
+          try {
+            o.getSource(e.sourceId) || o.addSource(e.sourceId, e.source), o.addLayer(e.layer, e.before);
+          } catch (I) {
+            console.error(`[${e.layerId}] Error adding layer:`, I);
+          }
+      },
+      { immediate: !0 }
+    ), v(
+      () => e.before,
+      (n) => {
+        const o = d();
+        if (!(!o || !o.getLayer(e.layerId)) && e.layer.layout?.visibility === "visible")
+          try {
+            o.moveLayer(e.layerId, n);
+          } catch (l) {
+            console.error(
+              `Error reordering vector layer ${e.layerId}:`,
+              l
+            );
+          }
+      }
+    ), v(
+      () => e.layer.layout?.visibility,
+      (n) => {
+        const o = d();
+        if (!o) return;
+        if (o.getLayer(e.layerId))
+          try {
+            o.setLayoutProperty(
+              e.layerId,
+              "visibility",
+              n
+            );
+          } catch (I) {
+            console.error(`[${e.layerId}] Error updating visibility:`, I);
+          }
+        else
+          try {
+            o.getSource(e.sourceId) || o.addSource(e.sourceId, e.source), o.addLayer(e.layer, e.before);
+          } catch (I) {
+            console.error(`[${e.layerId}] Error adding layer:`, I);
+          }
+      },
+      { immediate: !0 }
+    ), S(() => {
+      if (d())
+        try {
+          g();
+        } catch (o) {
+          console.error(`[${e.layerId}] Error setting up layer:`, o);
+        }
+    }), (n, o) => _(n.$slots, "default");
+  }
+}), Se = /* @__PURE__ */ h({
+  __name: "VLayerMaplibreVideo",
+  props: {
+    sourceId: {
+      type: String,
+      default: "maplibre.gl-video-source",
+      required: !0
+    },
+    layerId: {
+      type: String,
+      default: "maplibre.gl-video-layer",
+      required: !0
+    },
+    source: {
+      type: Object,
+      required: !0
+    },
+    layer: {
+      type: Object,
+      default: () => ({}),
+      required: !0
+    },
+    before: {
+      type: String,
+      default: "",
+      required: !1
+    }
+  },
+  setup(p) {
+    const t = p, e = P(E), y = b(!1), i = () => e.value || null, u = (r) => {
+      r && r.on("style.load", () => {
+        const a = () => {
+          r.isStyleLoaded() ? y.value = !0 : (y.value = !1, setTimeout(a, 200));
+        };
+        a();
+      });
+    }, d = () => {
+      const r = i();
+      if (r)
+        try {
+          if (r.getSource(t.sourceId) || r.addSource(t.sourceId, t.source), !r.getLayer(t.layerId)) {
+            const a = {
+              ...t.layer,
+              id: t.layerId,
+              source: t.sourceId
+            };
+            r.addLayer(a, t.before);
+          }
+        } catch (a) {
+          console.error("Error adding Video layer:", a);
+        }
+    }, m = () => {
+      const r = i();
+      if (r)
+        try {
+          const a = r.getSource(t.sourceId);
+          if (a) {
+            r.getLayer(t.layerId) && r.removeLayer(t.layerId), r.getSource(t.sourceId) && r.removeSource(t.sourceId), r.addSource(t.sourceId, t.source);
+            const f = {
+              ...t.layer,
+              id: t.layerId,
+              source: t.sourceId
+            };
+            if (r.addLayer(f, t.before), a.getVideo) {
+              const n = a.getVideo();
+              n && n.play().catch((o) => {
+                console.error("Error playing video:", o);
+              });
+            }
+          }
+        } catch (a) {
+          console.error("Error updating Video source:", a);
+        }
+    }, g = () => {
+      const r = i();
+      if (r)
+        try {
+          r.getLayer(t.layerId) && (Object.entries(t.layer.paint || {}).forEach(([a, f]) => {
+            r.setPaintProperty(t.layerId, a, f);
+          }), Object.entries(t.layer.layout || {}).forEach(([a, f]) => {
+            r.setLayoutProperty(t.layerId, a, f);
+          }));
+        } catch (a) {
+          console.error("Error updating Video layer:", a);
+        }
+    };
+    return v(() => t.source, m, { deep: !0 }), v(() => t.layer, g, { deep: !0 }), v(
+      e,
+      (r) => {
+        r && u(r);
+      },
+      { immediate: !0 }
+    ), v(y, (r) => {
+      r && d();
+    }), S(() => {
+      i()?.isStyleLoaded() && d();
+    }), C(() => {
+      const r = i();
+      if (r)
+        try {
+          const a = r.getSource(t.sourceId);
+          if (a?.getVideo) {
+            const f = a.getVideo();
+            f && (f.pause(), f.remove());
+          }
+          r.getLayer(t.layerId) && r.removeLayer(t.layerId), r.getSource(t.sourceId) && r.removeSource(t.sourceId);
+        } catch (a) {
+          console.error("Error cleaning up Video layer:", a);
+        }
+    }), (r, a) => _(r.$slots, "default");
+  }
+}), Ee = /* @__PURE__ */ h({
+  __name: "VLayerMaplibrePmtile",
+  props: {
+    sourceId: {
+      type: String,
+      default: "maplibre.gl-pmtile-source",
+      required: !0
+    },
+    layerId: {
+      type: String,
+      default: "maplibre.gl-pmtile-layer",
+      required: !0
+    },
+    url: {
+      type: String,
+      required: !0
+    },
+    layer: {
+      type: Object,
+      default: () => ({}),
+      required: !0
+    },
+    before: {
+      type: String,
+      default: "",
+      required: !1
+    }
+  },
+  setup(p) {
+    const t = p, e = O(G);
+    if (!e)
+      throw new Error("Protocol not provided");
+    const y = b({
+      type: "raster",
+      url: `pmtiles://${t.url}`,
+      tileSize: 512,
+      volatile: !0
+    });
+    return S(async () => {
+      const i = new re(t.url);
+      e.add(i);
+    }), (i, u) => (M(), J(oe, {
+      "source-id": p.sourceId,
+      "layer-id": p.layerId,
+      source: y.value,
+      layer: {
+        ...p.layer,
+        type: "raster"
+      },
+      before: p.before
+    }, null, 8, ["source-id", "layer-id", "source", "layer", "before"]));
+  }
+}), _e = /* @__PURE__ */ h({
+  __name: "VLayerMaplibreCluster",
+  props: {
+    sourceId: { default: "cluster-source" },
+    baseLayerId: { default: "cluster" },
+    source: {},
+    visibility: { type: Boolean, default: !0 },
+    clusterPaint: { default: () => ({
+      colors: ["#51bbd6", "#f1f075", "#f28cb1"],
+      radii: [20, 30, 40]
+    }) },
+    unclusteredPaint: { default: () => ({
+      color: "#51bbd6",
+      radius: 6
+    }) },
+    textPaint: { default: () => ({
+      color: "#ffffff",
+      font: ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
+      size: 12
+    }) }
+  },
+  emits: ["cluster-click", "point-click"],
+  setup(p, { emit: t }) {
+    const e = p, y = t, i = P(E), u = b(!1), d = V(() => `${e.baseLayerId}-clusters`), m = V(
+      () => `${e.baseLayerId}-cluster-count`
+    ), g = V(
+      () => `${e.baseLayerId}-unclustered-point`
+    ), r = () => i.value || null, a = (s) => typeof s == "string" ? !1 : s && typeof s == "object" && "type" in s && s.type === "FeatureCollection" && "features" in s ? s.features.length > 0 : !1, f = () => {
+      const s = r();
+      if (!(!s || !s.isStyleLoaded()))
+        try {
+          if (!s.getSource(e.sourceId))
+            console.log(`Adding clustered source: ${e.sourceId}`), s.addSource(e.sourceId, {
+              ...e.source,
+              cluster: !0,
+              clusterMaxZoom: 14,
+              clusterRadius: 50
+            });
+          else {
+            const c = s.getSource(e.sourceId);
+            c && "setData" in c && c.setData(e.source.data);
+          }
+          s.getLayer(d.value) || (console.log(`Adding clusters layer: ${d.value}`), s.addLayer({
+            id: d.value,
+            type: "circle",
+            source: e.sourceId,
+            filter: ["has", "point_count"],
+            paint: {
+              "circle-color": [
+                "step",
+                ["get", "point_count"],
+                e.clusterPaint.colors[0],
+                100,
+                e.clusterPaint.colors[1],
+                750,
+                e.clusterPaint.colors[2]
+              ],
+              "circle-radius": [
+                "step",
+                ["get", "point_count"],
+                e.clusterPaint.radii[0],
+                100,
+                e.clusterPaint.radii[1],
+                750,
+                e.clusterPaint.radii[2]
+              ],
+              "circle-stroke-width": 2,
+              "circle-stroke-color": "#ffffff",
+              "circle-opacity": 0.9
+            },
+            layout: {
+              visibility: e.visibility ? "visible" : "none"
+            }
+          })), s.getLayer(m.value) || (console.log(`Adding cluster count layer: ${m.value}`), s.addLayer({
+            id: m.value,
+            type: "symbol",
+            source: e.sourceId,
+            filter: ["has", "point_count"],
+            layout: {
+              "text-field": "{point_count_abbreviated}",
+              "text-font": e.textPaint.font,
+              "text-size": e.textPaint.size,
+              visibility: e.visibility ? "visible" : "none"
+            },
+            paint: {
+              "text-color": e.textPaint.color
+            }
+          })), s.getLayer(g.value) || (console.log(
+            `Adding unclustered points layer: ${g.value}`
+          ), s.addLayer({
+            id: g.value,
+            type: "circle",
+            source: e.sourceId,
+            filter: ["!", ["has", "point_count"]],
+            paint: {
+              "circle-color": e.unclusteredPaint.color,
+              "circle-radius": e.unclusteredPaint.radius,
+              "circle-stroke-width": 2,
+              "circle-stroke-color": "#ffffff",
+              "circle-opacity": 0.95
+            },
+            layout: {
+              visibility: e.visibility ? "visible" : "none"
+            }
+          })), console.log(`All cluster layers added for ${e.baseLayerId}`), l(s);
+        } catch (c) {
+          console.error("Error adding cluster layers:", c);
+        }
+    }, n = () => {
+      const s = r();
+      if (s)
+        try {
+          const c = s.getSource(e.sourceId);
+          c && "setData" in c ? (console.log(`Updating source ${e.sourceId} with data`), c.setData(e.source.data), setTimeout(() => {
+            f();
+          }, 100)) : c || f();
+        } catch (c) {
+          console.error("Error updating source:", c);
+        }
+    }, o = (s) => {
+      const c = r();
+      if (!c) return;
+      const L = s ? "visible" : "none";
+      [
+        d.value,
+        m.value,
+        g.value
+      ].forEach(($) => {
+        c.getLayer($) && c.setLayoutProperty($, "visibility", L);
+      });
+    }, l = (s) => {
+      if (s)
+        try {
+          s.on(
+            "click",
+            d.value,
+            (c) => {
+              c.features && c.features.length > 0 && y("cluster-click", {
+                features: c.features,
+                coordinates: c.lngLat
+              });
+            }
+          ), s.on(
+            "click",
+            g.value,
+            (c) => {
+              c.features && c.features.length > 0 && y("point-click", {
+                features: c.features,
+                coordinates: c.lngLat
+              });
+            }
+          ), [d.value, g.value].forEach((c) => {
+            s.on("mouseenter", c, () => {
+              s.getCanvas().style.cursor = "pointer";
+            }), s.on("mouseleave", c, () => {
+              s.getCanvas().style.cursor = "";
+            });
+          });
+        } catch (c) {
+          console.error("Error setting up layer events:", c);
+        }
+    }, I = (s) => {
+      s && (s.on("style.load", () => {
+        const c = () => {
+          s.isStyleLoaded() ? (u.value = !0, a(e.source.data) && f()) : (u.value = !1, setTimeout(c, 200));
+        };
+        c();
+      }), s.isStyleLoaded() && (u.value = !0, a(e.source.data) && f()));
+    };
+    return v(
+      () => e.source.data,
+      (s) => {
+        if (a(s)) {
+          const c = r();
+          c?.isStyleLoaded() && (c.getSource(e.sourceId) ? n() : f());
+        }
+      },
+      { deep: !0, immediate: !0 }
+    ), v(() => e.visibility, o), v(
+      i,
+      (s) => {
+        s && I(s);
+      },
+      { immediate: !0 }
+    ), S(() => {
+      r()?.isStyleLoaded() && a(e.source.data) && f();
+    }), C(() => {
+      const s = r();
+      if (s)
+        try {
+          [d.value, g.value].forEach((c) => {
+            s.off("click", c, () => {
+            }), s.off("mouseenter", c, () => {
+            }), s.off("mouseleave", c, () => {
+            });
+          }), [
+            d.value,
+            m.value,
+            g.value
+          ].forEach((c) => {
+            s.getLayer(c) && s.removeLayer(c);
+          }), s.getSource(e.sourceId) && s.removeSource(e.sourceId);
+        } catch (c) {
+          console.error("Error cleaning up cluster layers:", c);
+        }
+    }), (s, c) => _(s.$slots, "default");
+  }
+}), ae = ["id"], se = /* @__PURE__ */ h({
+  __name: "VMap",
+  props: {
+    options: { default: () => ({ container: "map" }) },
+    supportPmtiles: { type: Boolean, default: !1 }
+  },
+  emits: ["loaded", ...N],
+  setup(p, { emit: t }) {
+    const e = p, y = t;
+    if (e.supportPmtiles) {
+      const g = new te({ metadata: !0 });
+      U.addProtocol("pmtiles", g.tile), T(G, g);
+    }
+    const i = B(null), u = b(!1), d = b(N);
+    T(E, i), S(() => {
+      i.value = new X(e.options), u.value = !0, m();
+    });
+    const m = () => {
+      i.value && d.value.forEach((g) => {
+        i.value?.on(g, (r) => {
+          switch (g) {
+            case "load":
+              y("loaded", i.value);
+              break;
+            default:
+              y(g, r);
+              break;
+          }
+        });
+      });
+    };
+    return (g, r) => (M(), j("div", {
+      id: `${p.options?.container}`,
+      class: "v-map-container"
+    }, [
+      u.value ? _(g.$slots, "default", { key: 0 }, () => [
+        _(g.$slots, "default", {}, void 0, !0)
+      ], !0) : D("", !0)
+    ], 8, ae));
+  }
+}), ce = (p, t) => {
+  const e = p.__vccOpts || p;
+  for (const [y, i] of t)
+    e[y] = i;
+  return e;
+}, Pe = /* @__PURE__ */ ce(se, [["__scopeId", "data-v-e49c0b85"]]), ne = ["id"], ie = /* @__PURE__ */ h({
+  __name: "VPopup",
+  props: {
+    options: { default: () => ({}) },
+    coordinates: { default: () => ({}) },
+    marker: { default: () => ({}) }
+  },
+  emits: ["added", "removed", "open", "close"],
+  setup(p, { emit: t }) {
+    const e = p, y = t, i = P(E), u = new Y(e.options), d = b(!0), m = b(null), g = () => i.value || null, r = (s) => {
+      s && s.on("style.load", () => {
+        const c = () => {
+          s.isStyleLoaded() ? d.value = !0 : (d.value = !1, setTimeout(c, 200));
+        };
+        c();
+      });
+    }, a = () => {
+      try {
+        m.value && u.setDOMContent(m.value);
+      } catch (s) {
+        console.error("Error setting popup content:", s);
+      }
+    }, f = () => {
+      try {
+        u.setLngLat(e.coordinates);
+      } catch (s) {
+        console.error("Error setting popup coordinates:", s);
+      }
+    }, n = () => {
+      const s = g();
+      if (s)
+        try {
+          "setPopup" in e.marker ? e.marker.setPopup(u) : u.addTo(s), y("added", { popup: u });
+        } catch (c) {
+          console.error("Error adding popup to marker:", c);
+        }
+    }, o = () => {
+      try {
+        u.remove(), y("removed");
+      } catch (s) {
+        console.error("Error removing popup:", s);
+      }
+    }, l = () => {
+      try {
+        z.forEach((s) => {
+          u.on(s, () => {
+            y(s);
+          });
+        });
+      } catch (s) {
+        console.error("Error setting up popup events:", s);
+      }
+    }, I = () => {
+      try {
+        z.forEach((s) => {
+          u.off(s, () => {
+            y(s);
+          });
+        });
+      } catch (s) {
+        console.error("Error removing popup events:", s);
+      }
+    };
+    return v(
+      i,
+      (s) => {
+        s && r(s);
+      },
+      { immediate: !0 }
+    ), v(
+      () => e.coordinates,
+      () => {
+        f();
+      },
+      { deep: !0 }
+    ), S(() => {
+      if (d.value)
+        try {
+          a(), f(), n(), l();
+        } catch (s) {
+          console.error("Error initializing popup:", s);
+        }
+      else
+        o(), I();
+    }), C(() => {
+      o(), I();
+    }), (s, c) => (M(), j("section", {
+      id: `popup-${Date.now()}`,
+      ref_key: "content",
+      ref: m
+    }, [
+      _(s.$slots, "default")
+    ], 8, ne));
+  }
+}), le = ["id"], $e = /* @__PURE__ */ h({
+  __name: "VMarker",
+  props: {
+    coordinates: { default: null },
+    options: { default: () => ({}) },
+    popupOptions: { default: () => ({}) },
+    cursor: { default: "pointer" }
+  },
+  emits: [
+    "added",
+    "update:coordinates",
+    "removed",
+    ...w,
+    ...q
+  ],
+  setup(p, { emit: t }) {
+    const e = p, y = t, i = P(E), u = b(null), d = b(!0), m = b(!1), g = b(null), r = () => i.value || null, a = (c) => {
+      c && c.on("style.load", () => {
+        const L = () => {
+          c.isStyleLoaded() ? d.value = !0 : (d.value = !1, setTimeout(L, 200));
+        };
+        L();
+      });
+    }, f = (c) => {
+      g.value = c;
+    }, n = (c) => {
+      if (e.coordinates !== null)
+        try {
+          c.setLngLat(e.coordinates);
+        } catch (L) {
+          console.error("Error setting marker coordinates:", L);
+        }
+    }, o = (c) => {
+      try {
+        c.getElement().style.cursor = e.cursor || "default";
+      } catch (L) {
+        console.error("Error setting cursor:", L);
+      }
+    }, l = (c) => {
+      const L = r();
+      if (L)
+        try {
+          c.addTo(L), y("added", { marker: c });
+        } catch ($) {
+          console.error("Error adding marker to map:", $);
+        }
+    }, I = (c) => {
+      try {
+        c.remove(), y("removed");
+      } catch (L) {
+        console.error("Error removing marker from map:", L);
+      }
+    }, s = (c) => {
+      try {
+        let L;
+        w.forEach(($) => {
+          c.on($, (k) => {
+            $ === "dragend" && (Array.isArray(e.coordinates) ? L = [
+              k.target.getLngLat().lng,
+              k.target.getLngLat().lat
+            ] : L = k.target.getLngLat(), y("update:coordinates", L)), y($, k);
+          });
+        }), q.forEach(($) => {
+          c.getElement().addEventListener($, (k) => {
+            y($, k);
+          });
+        });
+      } catch (L) {
+        console.error("Error setting up marker events:", L);
+      }
+    };
+    return v(u, (c) => {
+      m.value = c !== null && "_map" in c;
+    }), v(
+      i,
+      (c) => {
+        c && a(c);
+      },
+      { immediate: !0 }
+    ), S(() => {
+      if (d.value)
+        try {
+          const c = {
+            ...e.options,
+            element: g.value || void 0
+          };
+          u.value = new ee(c), n(u.value), l(u.value), o(u.value), s(u.value);
+        } catch (c) {
+          console.error("Error initializing marker:", c);
+        }
+    }), C(() => {
+      u.value && I(u.value);
+    }), (c, L) => (M(), j("section", {
+      id: `marker-${Date.now()}`,
+      class: "absolute"
+    }, [
+      _(c.$slots, "markers", { setRef: f }),
+      m.value ? (M(), J(ie, {
+        key: 0,
+        marker: u.value,
+        options: p.popupOptions,
+        coordinates: p.coordinates
+      }, {
+        default: F(() => [
+          _(c.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["marker", "options", "coordinates"])) : D("", !0)
+    ], 8, le));
+  }
+});
+export {
+  pe as VControlAttribution,
+  fe as VControlFullscreen,
+  me as VControlGeolocate,
+  ge as VControlNavigation,
+  ve as VControlScale,
+  Ie as VLayerMaplibreCanvas,
+  _e as VLayerMaplibreCluster,
+  Le as VLayerMaplibreGeojson,
+  be as VLayerMaplibreImage,
+  Ee as VLayerMaplibrePmtile,
+  oe as VLayerMaplibreRaster,
+  he as VLayerMaplibreVector,
+  Se as VLayerMaplibreVideo,
+  Pe as VMap,
+  $e as VMarker,
+  ie as VPopup,
+  Pe as default
+};
+//# sourceMappingURL=index.js.map