@yappkit/front-module-map 0.1.3 → 0.1.5

package/lib/yappkit-map.js

@@ -1,8 +1,25 @@
-import { defineComponent as u, ref as w, toRefs as h, shallowRef as f, provide as m, h as L, inject as g, onMounted as M, onUnmounted as k, watch as v, nextTick as G, computed as S } from "vue";
-import { lineString as K, length as P, along as E, point as D } from "@turf/turf";
-class j {
-  constructor() {
-    this.overlay = null, this.watching = { layers: !1 };
+import { defineComponent as w, ref as f, toRefs as y, shallowRef as v, provide as g, watch as d, h as M, inject as L, onMounted as b, onUnmounted as k, nextTick as O, toRaw as x, computed as E } from "vue";
+import { lineString as K, length as P, along as j, point as G } from "@turf/turf";
+class T {
+  constructor({ unwatchFn: e }) {
+    this.overlay = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = e;
+  }
+  watchOptions(e, a = {}) {
+    if (!this.overlay)
+      throw new Error("overlay should be set");
+    if (this.watching.options) {
+      console.warn("No need to call MapboxDeckGLOverlay.watchOptions(). options are already being watched");
+      return;
+    }
+    this.watching.options = !0;
+    const t = d(e, () => {
+      this.overlay.setProps({ ...e.value });
+    }, {
+      immediate: !0,
+      deep: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
   watchLayers(e, a = {}) {
     if (!this.overlay)
@@ -11,14 +28,19 @@ class j {
       console.warn("No need to call MapboxDeckGLOverlay.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, v(e, () => {
+    this.watching.layers = !0;
+    const t = d(e, () => {
       this.overlay.setProps({ layers: e.value });
-    }, a);
+    }, {
+      immediate: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
 }
-class T {
+class N {
   constructor() {
-    this.map = null, this.watching = { sources: !1, layers: !1 };
+    this.map = null, this.watching = { sources: !1, layers: !1 }, this.unwatchFn = [];
   }
   watchSources(e, a = {}) {
     if (!this.map)
@@ -27,17 +49,29 @@ class T {
       console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
       return;
     }
-    this.watching.sources = !0, v(e, (t, s) => {
-      const r = [...s || []], o = [...t || []], n = o.map((i) => i.id), c = r.map((i) => i.id), p = o.filter((i) => !c.includes(i.id)), y = r.filter((i) => !n.includes(i.id));
-      for (const i of y)
-        G(() => {
-          this.map.removeSource(i.id);
-        });
-      for (const i of p) {
-        const d = { ...i };
-        delete d.id, this.map.addSource(i.id, d);
+    this.watching.sources = !0;
+    const t = d(() => (e.value || []).map((s) => {
+      const { data: r, ...o } = s;
+      return s.propsId = JSON.stringify(o), s;
+    }), async (s, r) => {
+      const o = r || [], n = s || [], i = n.filter((c, u) => {
+        var m;
+        return c !== o[u] && c.propsId === ((m = o[u]) == null ? void 0 : m.propsId);
+      }), p = n.filter((c, u) => c !== o[u] && !i.find((m) => m.id === c.id)), l = o.filter((c, u) => c !== n[u] && !i.find((m) => m.id === c.id));
+      for (const c of i)
+        this.map.getSource(c.id).setData(c.data);
+      await O();
+      for (const c of l)
+        this.map.removeSource(c.id);
+      for (const c of p) {
+        const u = { ...c };
+        delete u.id, delete u.propsId, this.map.addSource(c.id, u);
       }
-    }, a);
+    }, {
+      immediate: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
   watchLayers(e, a = {}) {
     if (!this.map)
@@ -46,20 +80,24 @@ class T {
       console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, v(e, (t, s) => {
-      const r = [...s || []], o = [...t || []], n = o.map((i) => i.id), c = r.map((i) => i.id), p = o.filter((i) => !c.includes(i.id)), y = r.filter((i) => !n.includes(i.id));
-      for (const i of y)
-        this.map.removeLayer(i.id);
-      for (const i of p)
-        G(() => {
-          this.map.addLayer(i);
-        });
-    }, a);
+    this.watching.layers = !0;
+    const t = d(e, async (s, r) => {
+      const o = r || [], n = s || [], i = n.filter((l, c) => l !== o[c]), p = o.filter((l, c) => l !== n[c]);
+      for (const l of p)
+        this.map.removeLayer(l.id), this.map.getSource(l.id) && this.map.removeSource(l.id);
+      await O();
+      for (const l of i)
+        this.map.addLayer(l);
+    }, {
+      immediate: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
   async setDeckGLOverlay(e = {}) {
     if (!this.map)
       throw new Error("map should be set");
-    const { MapboxOverlay: a } = await import("@deck.gl/mapbox"), t = new j();
+    const { MapboxOverlay: a } = await import("@deck.gl/mapbox"), t = new T({ unwatchFn: this.unwatchFn });
     return t.overlay = new a(e), this.map.addControl(t.overlay), t;
   }
 }
@@ -67,15 +105,17 @@ class A {
   constructor(e) {
     if (this.apiKey = e.apiKey, !this.apiKey)
       throw new Error("apiKey is required");
-    this.services = e.services || [], this.sdk = {}, this.mapboxgl = null, this.services.length && this.loadMapboxSDK();
+    this.services = [...e.services || []], this.sdk = {}, this.mapboxgl = null, this.getSDK();
   }
   get Map() {
-    return u(
+    return w(
       (e, { emit: a, slots: t }) => {
-        const s = w(null), { options: r, layers: o, sources: n } = h(e), c = f(null);
-        return m("mapboxMap", c), this.createMap(s, r.value).then((p) => {
-          c.value = p, p.watchSources(n, r.value.watchSourcesOptions || { immediate: !0 }), p.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), a("loaded", p);
-        }), () => L("div", { ref: s }, c.value ? t : []);
+        const s = f(null), { options: r, layers: o, sources: n } = y(e), i = v(null);
+        return g("mapboxMap", i), this.createMap(s, r.value).then((p) => {
+          i.value = p, d(r, () => {
+            console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
+          }, { once: !0 }), p.watchSources(n, r.value.watchSourcesOptions), p.watchLayers(o, r.value.watchLayersOptions), a("loaded", p);
+        }), () => M("div", { ref: s }, i.value ? t : []);
       },
       {
         props: {
@@ -91,18 +131,19 @@ class A {
             type: Array,
             default: () => []
           }
-        }
+        },
+        emits: ["loaded"]
       }
     );
   }
   get DeckGLOverlay() {
-    return u(
+    return w(
       (e, { emit: a, slots: t }) => {
-        const { options: s, layers: r } = h(e), o = g("mapboxMap");
+        const { options: s, layers: r } = y(e), o = L("mapboxMap");
         if (!o || !o.value)
           throw new Error("map should exist");
         return o.value.setDeckGLOverlay(s.value).then((n) => {
-          n.watchLayers(r, s.value.watchLayersOptions || { immediate: !0 }), a("loaded", n);
+          n.watchOptions(s, s.value.watchOptionsOptions), n.watchLayers(r, s.value.watchLayersOptions), a("loaded", n);
         }), () => {
         };
       },
@@ -116,13 +157,16 @@ class A {
             type: Array,
             default: () => []
           }
-        }
+        },
+        emits: ["loaded"]
       }
     );
   }
   async loadMapbox() {
-    const e = await import("./mapbox-gl.js").then((a) => a.mapboxGl);
-    this.mapboxgl = e;
+    if (!this.mapboxgl) {
+      const e = await import("./mapbox-gl.js").then((a) => a.mapboxGl);
+      this.mapboxgl = e;
+    }
   }
   get servicesLoader() {
     return {
@@ -142,40 +186,72 @@ class A {
       isochrone: () => import("@mapbox/mapbox-sdk/services/isochrone.js")
     };
   }
-  async loadMapboxSDK() {
-    const a = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), t = await Promise.all(this.services.map((s) => this.servicesLoader[s]().then((r) => r.default(a))));
-    for (const [s, r] of this.services.entries())
-      this.sdk[r] = t[s];
-  }
-  async getSDK() {
-    return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
+  async loadMapboxSDK({ services: e = [] } = {}) {
+    const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), s = [.../* @__PURE__ */ new Set([...this.services, ...e])];
+    this.services = s;
+    const r = await Promise.all(this.services.map((o) => this.sdk[o] || this.servicesLoader[o]().then((n) => n.default(t))));
+    for (const [o, n] of this.services.entries())
+      this.sdk[n] = r[o];
+  }
+  async getSDK(e) {
+    let a = {};
+    if (typeof e == "string" ? a.services = [e] : a = { ...e }, await this.loadMapboxSDK(a), typeof e == "string") {
+      if (!this.sdk[e])
+        throw new Error(e + " service is not loaded");
+      return this.sdk[e];
+    }
+    return this.sdk;
   }
   async createMap(e, a = {}) {
-    const t = new T();
-    return new Promise((s, r) => {
-      M(async () => {
-        await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
-        const o = () => {
+    const t = new N(), s = () => {
+      for (const r of t.unwatchFn)
+        r();
+      t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
+    };
+    return new Promise((r, o) => {
+      b(async () => {
+        await this.loadMapbox();
+        const n = () => {
           if (!e.value)
             throw new Error("Missing HTML element");
+          const i = d(e, () => {
+            e.value || (s(), i());
+          });
           t.map = new this.mapboxgl.Map({
             container: e.value,
             accessToken: this.apiKey,
             ...a
           }), t.map.on("load", () => {
-            s(t);
+            r(t);
           });
         };
-        a.onMounted ? a.onMounted(o) : o();
+        a.onMounted ? a.onMounted(n) : n();
       }), k(() => {
-        t.map && (t.map.remove(), t.map = null);
+        s();
       });
     });
   }
 }
-class N {
-  constructor() {
-    this.overlay = null, this.watching = { layers: !1 };
+class C {
+  constructor({ unwatchFn: e }) {
+    this.overlay = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = e;
+  }
+  watchOptions(e, a = {}) {
+    if (!this.overlay)
+      throw new Error("overlay should be set");
+    if (this.watching.options) {
+      console.warn("No need to call GoogleMapsDeckGLOverlay.watchOptions(). options are already being watched");
+      return;
+    }
+    this.watching.options = !0;
+    const t = d(e, () => {
+      this.overlay.setProps({ ...e.value });
+    }, {
+      immediate: !0,
+      deep: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
   watchLayers(e, a = {}) {
     if (!this.overlay)
@@ -184,35 +260,116 @@ class N {
       console.warn("No need to call GoogleMapsDeckGLOverlay.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, v(e, () => {
+    this.watching.layers = !0;
+    const t = d(e, () => {
       this.overlay.setProps({ layers: e.value });
-    }, a);
+    }, {
+      immediate: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
 }
-class R {
+class V {
   constructor() {
-    this.map = null;
+    this.map = null, this.unwatchFn = [];
   }
   async setDeckGLOverlay(e = {}) {
     if (!this.map)
       throw new Error("map should be set");
-    const { GoogleMapsOverlay: a } = await import("@deck.gl/google-maps"), t = new N();
+    const { GoogleMapsOverlay: a } = await import("@deck.gl/google-maps"), t = new C({ unwatchFn: this.unwatchFn });
     return t.overlay = new a(e), t.overlay.setMap(this.map), t;
   }
 }
-class x {
+class I {
+  constructor() {
+    this.map = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = [];
+  }
+  _getSetters(e) {
+    const a = [], t = { ...Object.getOwnPropertyDescriptors(Object.getPrototypeOf(e)) };
+    for (const [s, r] of Object.entries(t))
+      r.enumerable && a.push(s);
+    return a;
+  }
+  _getOptions(e) {
+    const a = {}, t = this._getSetters(e);
+    for (const s of t) {
+      let r = e[s];
+      e[s] instanceof Object && (r = this._getOptions(e[s])), a[s] = r;
+    }
+    return a;
+  }
+  setProps(e = {}) {
+    for (const [a, t] of Object.entries(e))
+      this.map[a] = t;
+  }
+  getProps() {
+    return this._getOptions(this.map);
+  }
+  getLayer(e) {
+    if (!this.map)
+      throw new Error("map should be set");
+    return this.map.children.namedItem(e);
+  }
+  watchOptions(e, a = {}) {
+    if (!this.map)
+      throw new Error("map should be set");
+    if (this.watching.options) {
+      console.warn("No need to call GoogleMapsMap3D.watchOptions(). options are already being watched");
+      return;
+    }
+    this.watching.options = !0;
+    let t = {};
+    const s = d(e, async () => {
+      await O();
+      const r = x(e.value);
+      for (const [o, n] of Object.entries(r))
+        JSON.stringify(n) !== JSON.stringify(t[o]) && (this.map[o] = n);
+      t = structuredClone(r);
+    }, {
+      immediate: !0,
+      deep: !0,
+      ...a
+    });
+    this.unwatchFn.push(s);
+  }
+  watchLayers(e, a = {}) {
+    if (!this.map)
+      throw new Error("map should be set");
+    if (this.watching.layers) {
+      console.warn("No need to call GoogleMapsMap3D.watchLayers(). layers are already being watched");
+      return;
+    }
+    this.watching.layers = !0;
+    const t = d(e, async (s, r) => {
+      const o = r || [], n = s || [], i = n.filter((l, c) => l !== o[c]), p = o.filter((l, c) => l !== n[c]);
+      await O();
+      for (const l of p)
+        this.map.children.namedItem(l.id).remove();
+      for (const l of i)
+        l.element.setAttribute("name", l.id), this.map.appendChild(l.element);
+    }, {
+      immediate: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
+  }
+}
+class S {
   constructor(e) {
     if (this.apiKey = e.apiKey, !this.apiKey)
       throw new Error("apiKey is required");
-    this.libraries = e.libraries || ["maps"], this.version = e.version || "weekly", this.loader = null, this.sdk = {}, this.deckgl = null;
+    this.libraries = [...e.libraries || []], this.version = e.version || "weekly", this.loader = null, this.sdk = {}, this.deckgl = null, this.getSDK();
   }
   get Map() {
-    return u(
+    return w(
       (e, { emit: a, slots: t }) => {
-        const s = w(null), { options: r } = h(e), o = f(null);
-        return m("googleMapsMap", o), this.createMap(s, r.value).then((n) => {
-          o.value = n, a("loaded", n);
-        }), () => L("div", { ref: s }, o.value ? t : []);
+        const s = f(null), { options: r } = y(e), o = v(null);
+        return g("googleMapsMap", o), this.createMap(s, r.value).then((n) => {
+          o.value = n, d(r, () => {
+            console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
+          }, { once: !0 }), a("loaded", n);
+        }), () => M("div", { ref: s }, o.value ? t : []);
       },
       {
         props: {
@@ -220,18 +377,42 @@ class x {
             type: Object,
             default: () => ({})
           }
-        }
+        },
+        emits: ["loaded"]
+      }
+    );
+  }
+  get Map3D() {
+    return w(
+      (e, { emit: a, attrs: t, slots: s }) => {
+        const r = f(null), { options: o, layers: n } = y(e), i = v(null);
+        return g("googleMapsMap3D", i), this.createMap3D(r, o.value).then((p) => {
+          i.value = p, p.watchOptions(o, o.value.watchOptionsOptions), p.watchLayers(n, o.value.watchLayersOptions), a("loaded", p);
+        }), () => M("div", { ref: r }, i.value ? s : []);
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          }
+        },
+        emits: ["loaded"]
       }
     );
   }
   get DeckGLOverlay() {
-    return u(
+    return w(
       (e, { emit: a, slots: t }) => {
-        const { options: s, layers: r } = h(e), o = g("googleMapsMap");
+        const { options: s, layers: r } = y(e), o = L("googleMapsMap");
         if (!o || !o.value)
           throw new Error("map should exist");
         return o.value.setDeckGLOverlay(s.value).then((n) => {
-          n.watchLayers(r, s.value.watchLayersOptions || { immediate: !0 }), a("loaded", n);
+          n.watchOptions(s, s.value.watchOptionsOptions), n.watchLayers(r, s.value.watchLayersOptions), a("loaded", n);
         }), () => {
         };
       },
@@ -245,24 +426,27 @@ class x {
             type: Array,
             default: () => []
           }
-        }
+        },
+        emits: ["loaded"]
       }
     );
   }
   get DeckGL3DTileLayer() {
-    return u(
+    return w(
       (e, { emit: a, slots: t }) => {
-        const { options: s } = h(e), r = g("deckGLPrependLayers");
+        const { options: s } = y(e), r = L("deckGLPrependLayers");
         if (!r || !r.value)
           throw new Error("deckGLPrependLayers should exist");
-        const o = w("");
-        this.createDeckGL3DTileLayer(o, s).then((c) => {
-          r.value = [
+        const o = f("");
+        this.createDeckGL3DTileLayer(o, s.value).then((i) => {
+          d(s, () => {
+            console.error("Cannot update options on DeckGL layer. Replace layer instead");
+          }, { once: !0 }), r.value = [
             ...r.value,
-            c
+            i
           ];
         });
-        const n = g("deckGLAppendVNodeFn");
+        const n = L("deckGLAppendVNodeFn");
         if (!n)
           throw new Error("deckGLAppendVNodeFn should exist");
         return t.appendMap && n.value.push(() => t.appendMap({ credits: o.value })), () => {
@@ -278,35 +462,73 @@ class x {
       }
     );
   }
-  async loadGoogleMaps() {
-    const { Loader: e } = await import("@googlemaps/js-api-loader");
-    this.loader = new e({
+  async loadGoogleMapsSDK({ libraries: e = [] } = {}) {
+    const { Loader: a } = await import("@googlemaps/js-api-loader"), t = [.../* @__PURE__ */ new Set([...this.libraries, ...e])];
+    this.libraries.length === t.length && this.libraries.every((r) => t.includes(r)) || console.error("GoogleMaps Loader does not allow loading one library after the other. Set libraries option on a single googleMaps config"), this.libraries = t, this.loader = new a({
       apiKey: this.apiKey,
       version: this.version,
       libraries: this.libraries
     });
-    const a = await Promise.all(this.libraries.map((t) => this.loader.importLibrary(t)));
-    for (const [t, s] of this.libraries.entries())
-      this.sdk[s] = a[t];
-  }
-  async getSDK() {
-    return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadGoogleMaps()), this.sdk;
+    const s = await Promise.all(this.libraries.map((r) => this.sdk[r] || this.loader.importLibrary(r)));
+    for (const [r, o] of this.libraries.entries())
+      this.sdk[o] = s[r];
+  }
+  async getSDK(e) {
+    let a = {};
+    if (typeof e == "string" ? a.libraries = [e] : a = { ...e }, await this.loadGoogleMapsSDK(a), typeof e == "string") {
+      if (!this.sdk[e] || !Object.keys(this.sdk[e]).length)
+        throw new Error(`${e} library is not loaded${e === "maps3d" ? ". Missing version: 'alpha' or apiKey not authorized?" : ""}`);
+      return this.sdk[e];
+    }
+    return this.sdk;
   }
   async createMap(e, a = {}) {
-    const t = new R();
-    return new Promise((s, r) => {
-      M(async () => {
-        await (this.sdk.maps ? Promise.resolve() : this.loadGoogleMaps());
-        const o = () => {
+    const t = new V(), s = () => {
+      for (const r of t.unwatchFn)
+        r();
+      t.unwatchFn = [], t.map && (t.map = null);
+    };
+    return new Promise((r, o) => {
+      b(async () => {
+        await this.getSDK("maps");
+        const n = () => {
           if (!e.value)
             throw new Error("Missing HTML element");
+          const i = d(e, () => {
+            e.value || (s(), i());
+          });
           t.map = new this.sdk.maps.Map(e.value, {
             ...a
-          }), s(t);
+          }), r(t);
+        };
+        a.onMounted ? a.onMounted(n) : n();
+      }), k(() => {
+        s();
+      });
+    });
+  }
+  async createMap3D(e, a = {}) {
+    const t = new I(), s = () => {
+      for (const r of t.unwatchFn)
+        r();
+      t.unwatchFn = [], t.map && (t.map = null);
+    };
+    return new Promise((r, o) => {
+      b(async () => {
+        await this.getSDK("maps3d");
+        const n = () => {
+          if (!e.value)
+            throw new Error("Missing HTML element");
+          const i = d(e, () => {
+            e.value || (s(), i());
+          });
+          t.map = new this.sdk.maps3d.Map3DElement({
+            ...a
+          }), e.value.appendChild(t.map), r(t);
         };
-        a.onMounted ? a.onMounted(o) : o();
+        a.onMounted ? a.onMounted(n) : n();
       }), k(() => {
-        t.map && (t.map = null);
+        s();
       });
     });
   }
@@ -339,9 +561,26 @@ class x {
     });
   }
 }
-class V {
+class _ {
   constructor() {
-    this.deckgl = null, this.map = null, this.watching = { layers: !1 };
+    this.deckgl = null, this.map = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = [];
+  }
+  watchOptions(e, a = {}) {
+    if (!this.map)
+      throw new Error("map should be set");
+    if (this.watching.options) {
+      console.warn("No need to call DeckGLMap.watchOptions(). options are already being watched");
+      return;
+    }
+    this.watching.options = !0;
+    const t = d(e, () => {
+      this.map.setProps({ ...e.value });
+    }, {
+      immediate: !0,
+      deep: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
   watchLayers(e, a = {}) {
     if (!this.map)
@@ -350,31 +589,36 @@ class V {
       console.warn("No need to call DeckGLMap.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, v(e, () => {
+    this.watching.layers = !0;
+    const t = d(e, () => {
       this.map.setProps({ layers: e.value });
-    }, a);
+    }, {
+      immediate: !0,
+      ...a
+    });
+    this.unwatchFn.push(t);
   }
 }
-class O {
+class F {
   constructor(e) {
     this.deckgl = null;
   }
   get Map() {
-    return u(
+    return w(
       (e, { emit: a, attrs: t, slots: s }) => {
-        const r = w(null), { options: o, layers: n } = h(e), c = f(null);
-        m("deckGLMap", c);
-        const p = f([]);
-        m("deckGLPrependLayers", p);
-        const y = S(() => [
+        const r = f(null), { options: o, layers: n } = y(e), i = v(null);
+        g("deckGLMap", i);
+        const p = v([]);
+        g("deckGLPrependLayers", p);
+        const l = E(() => [
           ...p.value,
           ...n.value
         ]);
-        this.createMap(r, o.value).then((d) => {
-          c.value = d, d.watchLayers(y, o.value.watchLayersOptions || { immediate: !0 }), a("loaded", d);
+        this.createMap(r, o.value).then((u) => {
+          i.value = u, u.watchOptions(o, o.value.watchOptionsOptions), u.watchLayers(l, o.value.watchLayersOptions), a("loaded", u);
         });
-        const i = w([]);
-        return m("deckGLAppendVNodeFn", i), () => [L("div", { ...t, ref: r }, c.value ? s : []), i.value.map((d) => d())];
+        const c = f([]);
+        return g("deckGLAppendVNodeFn", c), () => [M("div", { ...t, ref: r }, i.value ? s : []), c.value.map((u) => u())];
       },
       {
         props: {
@@ -386,65 +630,75 @@ class O {
             type: Array,
             default: () => []
           }
-        }
+        },
+        emits: ["loaded"]
       }
     );
   }
   async loadDeckGL() {
-    const { Deck: e } = await import("deck.gl");
-    this.deckgl = { Deck: e };
+    if (!this.deckgl) {
+      const { Deck: e } = await import("deck.gl");
+      this.deckgl = { Deck: e };
+    }
   }
   async createMap(e, a = {}) {
-    const t = new V();
-    return new Promise((s, r) => {
-      M(async () => {
-        await (this.deckgl ? Promise.resolve() : this.loadDeckGL());
-        const o = () => {
+    const t = new _(), s = () => {
+      for (const r of t.unwatchFn)
+        r();
+      t.unwatchFn = [], t.map && (t.map.finalize(), t.map = null);
+    };
+    return new Promise((r, o) => {
+      b(async () => {
+        await this.loadDeckGL();
+        const n = () => {
           if (!e.value)
             throw new Error("Missing HTML element");
+          const i = d(e, () => {
+            e.value || (s(), i());
+          });
           t.deckgl = this.deckgl, t.map = new this.deckgl.Deck({
             parent: e.value,
             ...a
-          }), s(t);
+          }), r(t);
         };
-        a.onMounted ? a.onMounted(o) : o();
+        a.onMounted ? a.onMounted(n) : n();
       }), k(() => {
-        t.map && (t.map.finalize(), t.map = null);
+        s();
       });
     });
   }
 }
-function b(l) {
+function D(h) {
   let e = 0;
-  return l.map((a) => {
+  return h.map((a) => {
     let t = a[0];
     return t - e > 180 ? t += -360 : e - t > 180 ? t += 360 : t += 0, e = t, [t, a[1]];
   });
 }
-function F({ origin: l, destination: e, step: a = 100 }) {
-  const t = K([l, e]), s = P(t), r = [];
+function z({ origin: h, destination: e, step: a = 100 }) {
+  const t = K([h, e]), s = P(t), r = [];
   for (let o = 0; o < s; o += s / a) {
-    const n = E(t, o);
+    const n = j(t, o);
     r.push(n.geometry.coordinates);
   }
-  return r.push(e), t.geometry.coordinates = b(r), t;
+  return r.push(e), t.geometry.coordinates = D(r), t;
 }
-async function I({ origin: l, destination: e, includeBoundaries: a = !1 }) {
-  const t = (await import("./searoute.js")).default, s = t(D(l), D(e));
-  return a && (s.geometry.coordinates.unshift(l), s.geometry.coordinates.push(e)), s.geometry.coordinates = b(s.geometry.coordinates), s;
+async function H({ origin: h, destination: e, includeBoundaries: a = !1 }) {
+  const t = (await import("./searoute.js")).default, s = t(G(h), G(e));
+  return a && (s.geometry.coordinates.unshift(h), s.geometry.coordinates.push(e)), s.geometry.coordinates = D(s.geometry.coordinates), s;
 }
-const U = {
-  getAirRoute: F,
-  getWaterRoute: I,
-  normalizeRoute: b
-}, q = {
+const R = {
+  getAirRoute: z,
+  getWaterRoute: H,
+  normalizeRoute: D
+}, U = {
   mapbox: A,
-  google: x,
-  "google-maps": x,
-  deckgl: O,
-  "deck-gl": O
+  google: S,
+  "google-maps": S,
+  deckgl: F,
+  "deck-gl": F
 };
-class z {
+class q {
   constructor(e = {}) {
     this.options = { ...e };
   }
@@ -453,16 +707,16 @@ class z {
     for (const [t, s] of Object.entries(e.config.maps || {})) {
       if (!s.type)
         throw new Error("Map type should be defined");
-      const r = q[s.type];
+      const r = U[s.type];
       r ? a[t] = new r(s) : console.warn(`Map provider: ${s.type} is not supported`);
     }
     e.maps = a, e.map = a, this.yAppKit = e;
   }
 }
-const W = (l) => new z(l);
+const W = (h) => new q(h);
 export {
-  z as default,
+  q as default,
   W as loadMapModule,
-  q as mapProviders,
-  U as utils
+  U as mapProviders,
+  R as utils
 };