@yappkit/front-module-map 0.1.1 → 0.1.3

package/lib/providers/mapbox.js

@@ -1,17 +1,17 @@
-import { defineComponent as m, ref as f, toRefs as y, shallowRef as v, provide as b, h as g, inject as x, onMounted as M, onUnmounted as L, watch as p, nextTick as w } from "vue";
+import { defineComponent as m, ref as f, toRefs as y, shallowRef as v, provide as b, h as g, inject as x, onMounted as M, onUnmounted as L, watch as d, nextTick as w } from "vue";
 class S {
   constructor() {
     this.overlay = null, this.watching = { layers: !1 };
   }
-  watchLayers(e, s = {}) {
+  watchLayers(t, s = {}) {
     if (!this.overlay)
       throw new Error("overlay should be set");
     if (this.watching.layers) {
       console.warn("No need to call MapboxDeckGLOverlay.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, p(e, () => {
-      this.overlay.setProps({ layers: e.value });
+    this.watching.layers = !0, d(t, () => {
+      this.overlay.setProps({ layers: t.value });
     }, s);
   }
 }
@@ -19,62 +19,62 @@ class k {
   constructor() {
     this.map = null, this.watching = { sources: !1, layers: !1 };
   }
-  watchSources(e, s = {}) {
+  watchSources(t, s = {}) {
     if (!this.map)
       throw new Error("map should be set");
     if (this.watching.sources) {
       console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
       return;
     }
-    this.watching.sources = !0, p(e, (a, o) => {
-      const r = [...o || []], i = [...a || []], n = i.map((t) => t.id), l = r.map((t) => t.id), c = i.filter((t) => !l.includes(t.id)), h = r.filter((t) => !n.includes(t.id));
-      for (const t of h)
+    this.watching.sources = !0, d(t, (a, r) => {
+      const o = [...r || []], i = [...a || []], n = i.map((e) => e.id), l = o.map((e) => e.id), c = i.filter((e) => !l.includes(e.id)), p = o.filter((e) => !n.includes(e.id));
+      for (const e of p)
         w(() => {
-          this.map.removeSource(t.id);
+          this.map.removeSource(e.id);
         });
-      for (const t of c) {
-        const u = { ...t };
-        delete u.id, this.map.addSource(t.id, u);
+      for (const e of c) {
+        const u = { ...e };
+        delete u.id, this.map.addSource(e.id, u);
       }
     }, s);
   }
-  watchLayers(e, s = {}) {
+  watchLayers(t, s = {}) {
     if (!this.map)
       throw new Error("map should be set");
     if (this.watching.layers) {
       console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, p(e, (a, o) => {
-      const r = [...o || []], i = [...a || []], n = i.map((t) => t.id), l = r.map((t) => t.id), c = i.filter((t) => !l.includes(t.id)), h = r.filter((t) => !n.includes(t.id));
-      for (const t of h)
-        this.map.removeLayer(t.id);
-      for (const t of c)
+    this.watching.layers = !0, d(t, (a, r) => {
+      const o = [...r || []], i = [...a || []], n = i.map((e) => e.id), l = o.map((e) => e.id), c = i.filter((e) => !l.includes(e.id)), p = o.filter((e) => !n.includes(e.id));
+      for (const e of p)
+        this.map.removeLayer(e.id);
+      for (const e of c)
         w(() => {
-          this.map.addLayer(t);
+          this.map.addLayer(e);
         });
     }, s);
   }
-  async setDeckGLOverlay(e = {}) {
+  async setDeckGLOverlay(t = {}) {
     if (!this.map)
       throw new Error("map should be set");
     const { MapboxOverlay: s } = await import("@deck.gl/mapbox"), a = new S();
-    return a.overlay = new s(e), this.map.addControl(a.overlay), a;
+    return a.overlay = new s(t), this.map.addControl(a.overlay), a;
   }
 }
 class D {
-  constructor(e) {
-    if (this.apiKey = e.apiKey, !this.apiKey)
+  constructor(t) {
+    if (this.apiKey = t.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 = t.services || [], this.sdk = {}, this.mapboxgl = null, this.services.length && this.loadMapboxSDK();
   }
   get Map() {
     return m(
-      (e, { emit: s, slots: a }) => {
-        const o = f(null), { options: r, layers: i, sources: n } = y(e), l = v(null);
-        return b("mapboxMap", l), this.createMap(o, r.value).then((c) => {
-          l.value = c, c.watchSources(n, r.value.watchSourcesOptions || { immediate: !0 }), c.watchLayers(i, r.value.watchLayersOptions || { immediate: !0 }), s("loaded", c);
-        }), () => g("div", { ref: o }, l.value ? a : []);
+      (t, { emit: s, slots: a }) => {
+        const r = f(null), { options: o, layers: i, sources: n } = y(t), l = v(null);
+        return b("mapboxMap", l), this.createMap(r, o.value).then((c) => {
+          l.value = c, c.watchSources(n, o.value.watchSourcesOptions || { immediate: !0 }), c.watchLayers(i, o.value.watchLayersOptions || { immediate: !0 }), s("loaded", c);
+        }), () => g("div", { ref: r }, l.value ? a : []);
       },
       {
         props: {
@@ -96,12 +96,12 @@ class D {
   }
   get DeckGLOverlay() {
     return m(
-      (e, { emit: s, slots: a }) => {
-        const { options: o, layers: r } = y(e), i = x("mapboxMap");
+      (t, { emit: s, slots: a }) => {
+        const { options: r, layers: o } = y(t), i = x("mapboxMap");
         if (!i || !i.value)
           throw new Error("map should exist");
-        return i.value.setDeckGLOverlay(o.value).then((n) => {
-          n.watchLayers(r, o.value.watchLayersOptions || { immediate: !0 }), s("loaded", n);
+        return i.value.setDeckGLOverlay(r.value).then((n) => {
+          n.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), s("loaded", n);
         }), () => {
         };
       },
@@ -120,49 +120,49 @@ class D {
     );
   }
   async loadMapbox() {
-    const e = await import("../mapbox-gl.js").then((s) => s.mapboxGl);
-    this.mapboxgl = e;
+    const t = await import("../mapbox-gl.js").then((s) => s.mapboxGl);
+    this.mapboxgl = t;
   }
   get servicesLoader() {
     return {
-      datasets: () => import("../mapbox-sdk/datasets.js").then((e) => e.datasets),
-      directions: () => import("../mapbox-sdk/directions.js").then((e) => e.directions),
-      geocoding: () => import("../mapbox-sdk/geocoding.js").then((e) => e.geocoding),
-      geocodingV6: () => import("../mapbox-sdk/geocoding-v6.js").then((e) => e.geocodingV6),
-      mapMatching: () => import("../mapbox-sdk/map-matching.js").then((e) => e.mapMatching),
-      matrix: () => import("../mapbox-sdk/matrix.js").then((e) => e.matrix),
-      optimization: () => import("../mapbox-sdk/optimization.js").then((e) => e.optimization),
-      static: () => import("../mapbox-sdk/static.js").then((e) => e._static),
-      styles: () => import("../mapbox-sdk/styles.js").then((e) => e.styles),
-      tilequery: () => import("../mapbox-sdk/tilequery.js").then((e) => e.tilequery),
-      tilesets: () => import("../mapbox-sdk/tilesets.js").then((e) => e.tilesets),
-      tokens: () => import("../mapbox-sdk/tokens.js").then((e) => e.tokens),
-      uploads: () => import("../mapbox-sdk/uploads.js").then((e) => e.uploads),
-      isochrone: () => import("../mapbox-sdk/isochrone.js").then((e) => e.isochrone)
+      datasets: () => import("@mapbox/mapbox-sdk/services/datasets.js"),
+      directions: () => import("@mapbox/mapbox-sdk/services/directions.js"),
+      geocoding: () => import("@mapbox/mapbox-sdk/services/geocoding.js"),
+      geocodingV6: () => import("@mapbox/mapbox-sdk/services/geocoding-v6.js"),
+      mapMatching: () => import("@mapbox/mapbox-sdk/services/map-matching.js"),
+      matrix: () => import("@mapbox/mapbox-sdk/services/matrix.js"),
+      optimization: () => import("@mapbox/mapbox-sdk/services/optimization.js"),
+      static: () => import("@mapbox/mapbox-sdk/services/static.js"),
+      styles: () => import("@mapbox/mapbox-sdk/services/styles.js"),
+      tilequery: () => import("@mapbox/mapbox-sdk/services/tilequery.js"),
+      tilesets: () => import("@mapbox/mapbox-sdk/services/tilesets.js"),
+      tokens: () => import("@mapbox/mapbox-sdk/services/tokens.js"),
+      uploads: () => import("@mapbox/mapbox-sdk/services/uploads.js"),
+      isochrone: () => import("@mapbox/mapbox-sdk/services/isochrone.js")
     };
   }
   async loadMapboxSDK() {
-    const s = (await import("../mapbox-sdk.js").then((o) => o.index)).default({ accessToken: this.apiKey }), a = await Promise.all(this.services.map((o) => this.servicesLoader[o]().then((r) => r.default(s))));
-    for (const [o, r] of this.services.entries())
-      this.sdk[r] = a[o];
+    const s = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), a = await Promise.all(this.services.map((r) => this.servicesLoader[r]().then((o) => o.default(s))));
+    for (const [r, o] of this.services.entries())
+      this.sdk[o] = a[r];
   }
   async getSDK() {
     return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
   }
-  async createMap(e, s = {}) {
+  async createMap(t, s = {}) {
     const a = new k();
-    return new Promise((o, r) => {
+    return new Promise((r, o) => {
       M(async () => {
         await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
         const i = () => {
-          if (!e.value)
+          if (!t.value)
             throw new Error("Missing HTML element");
           a.map = new this.mapboxgl.Map({
-            container: e.value,
+            container: t.value,
             accessToken: this.apiKey,
             ...s
           }), a.map.on("load", () => {
-            o(a);
+            r(a);
           });
         };
         s.onMounted ? s.onMounted(i) : i();

package/lib/providers/maplibre.js

@@ -1,17 +1,17 @@
-import { defineComponent as m, ref as f, toRefs as y, shallowRef as v, provide as b, h as g, inject as x, onMounted as M, onUnmounted as L, watch as d, nextTick as w } from "vue";
+import { defineComponent as m, ref as f, toRefs as y, shallowRef as v, provide as b, h as x, inject as g, onMounted as M, onUnmounted as L, watch as h, nextTick as w } from "vue";
 class S {
   constructor() {
     this.overlay = null, this.watching = { layers: !1 };
   }
-  watchLayers(e, s = {}) {
+  watchLayers(t, s = {}) {
     if (!this.overlay)
       throw new Error("overlay should be set");
     if (this.watching.layers) {
       console.warn("No need to call MapboxDeckGLOverlay.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, d(e, () => {
-      this.overlay.setProps({ layers: e.value });
+    this.watching.layers = !0, h(t, () => {
+      this.overlay.setProps({ layers: t.value });
     }, s);
   }
 }
@@ -19,62 +19,62 @@ class k {
   constructor() {
     this.map = null, this.watching = { sources: !1, layers: !1 };
   }
-  watchSources(e, s = {}) {
+  watchSources(t, s = {}) {
     if (!this.map)
       throw new Error("map should be set");
     if (this.watching.sources) {
       console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
       return;
     }
-    this.watching.sources = !0, d(e, (a, o) => {
-      const r = [...o || []], i = [...a || []], n = i.map((t) => t.id), l = r.map((t) => t.id), c = i.filter((t) => !l.includes(t.id)), h = r.filter((t) => !n.includes(t.id));
-      for (const t of h)
+    this.watching.sources = !0, h(t, (a, r) => {
+      const o = [...r || []], i = [...a || []], n = i.map((e) => e.id), l = o.map((e) => e.id), c = i.filter((e) => !l.includes(e.id)), d = o.filter((e) => !n.includes(e.id));
+      for (const e of d)
         w(() => {
-          this.map.removeSource(t.id);
+          this.map.removeSource(e.id);
         });
-      for (const t of c) {
-        const u = { ...t };
-        delete u.id, this.map.addSource(t.id, u);
+      for (const e of c) {
+        const u = { ...e };
+        delete u.id, this.map.addSource(e.id, u);
       }
     }, s);
   }
-  watchLayers(e, s = {}) {
+  watchLayers(t, s = {}) {
     if (!this.map)
       throw new Error("map should be set");
     if (this.watching.layers) {
       console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
       return;
     }
-    this.watching.layers = !0, d(e, (a, o) => {
-      const r = [...o || []], i = [...a || []], n = i.map((t) => t.id), l = r.map((t) => t.id), c = i.filter((t) => !l.includes(t.id)), h = r.filter((t) => !n.includes(t.id));
-      for (const t of h)
-        this.map.removeLayer(t.id);
-      for (const t of c)
+    this.watching.layers = !0, h(t, (a, r) => {
+      const o = [...r || []], i = [...a || []], n = i.map((e) => e.id), l = o.map((e) => e.id), c = i.filter((e) => !l.includes(e.id)), d = o.filter((e) => !n.includes(e.id));
+      for (const e of d)
+        this.map.removeLayer(e.id);
+      for (const e of c)
         w(() => {
-          this.map.addLayer(t);
+          this.map.addLayer(e);
         });
     }, s);
   }
-  async setDeckGLOverlay(e = {}) {
+  async setDeckGLOverlay(t = {}) {
     if (!this.map)
       throw new Error("map should be set");
     const { MapboxOverlay: s } = await import("@deck.gl/mapbox"), a = new S();
-    return a.overlay = new s(e), this.map.addControl(a.overlay), a;
+    return a.overlay = new s(t), this.map.addControl(a.overlay), a;
   }
 }
 class O {
-  constructor(e) {
-    if (this.apiKey = e.apiKey, !this.apiKey)
+  constructor(t) {
+    if (this.apiKey = t.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 = t.services || [], this.sdk = {}, this.mapboxgl = null, this.services.length && this.loadMapboxSDK();
   }
   get Map() {
     return m(
-      (e, { emit: s, slots: a }) => {
-        const o = f(null), { options: r, layers: i, sources: n } = y(e), l = v(null);
-        return b("mapboxMap", l), this.createMap(o, r.value).then((c) => {
-          l.value = c, c.watchSources(n, r.value.watchSourcesOptions || { immediate: !0 }), c.watchLayers(i, r.value.watchLayersOptions || { immediate: !0 }), s("loaded", c);
-        }), () => g("div", { ref: o }, l.value ? a : []);
+      (t, { emit: s, slots: a }) => {
+        const r = f(null), { options: o, layers: i, sources: n } = y(t), l = v(null);
+        return b("mapboxMap", l), this.createMap(r, o.value).then((c) => {
+          l.value = c, c.watchSources(n, o.value.watchSourcesOptions || { immediate: !0 }), c.watchLayers(i, o.value.watchLayersOptions || { immediate: !0 }), s("loaded", c);
+        }), () => x("div", { ref: r }, l.value ? a : []);
       },
       {
         props: {
@@ -96,12 +96,12 @@ class O {
   }
   get DeckGLOverlay() {
     return m(
-      (e, { emit: s, slots: a }) => {
-        const { options: o, layers: r } = y(e), i = x("mapboxMap");
+      (t, { emit: s, slots: a }) => {
+        const { options: r, layers: o } = y(t), i = g("mapboxMap");
         if (!i || !i.value)
           throw new Error("map should exist");
-        return i.value.setDeckGLOverlay(o.value).then((n) => {
-          n.watchLayers(r, o.value.watchLayersOptions || { immediate: !0 }), s("loaded", n);
+        return i.value.setDeckGLOverlay(r.value).then((n) => {
+          n.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), s("loaded", n);
         }), () => {
         };
       },
@@ -120,49 +120,49 @@ class O {
     );
   }
   async loadMapbox() {
-    const e = await import("../mapbox-gl.js").then((s) => s.mapboxGl);
-    this.mapboxgl = e;
+    const t = await import("../mapbox-gl.js").then((s) => s.mapboxGl);
+    this.mapboxgl = t;
   }
   get servicesLoader() {
     return {
-      datasets: () => import("../mapbox-sdk/datasets.js").then((e) => e.datasets),
-      directions: () => import("../mapbox-sdk/directions.js").then((e) => e.directions),
-      geocoding: () => import("../mapbox-sdk/geocoding.js").then((e) => e.geocoding),
-      geocodingV6: () => import("../mapbox-sdk/geocoding-v6.js").then((e) => e.geocodingV6),
-      mapMatching: () => import("../mapbox-sdk/map-matching.js").then((e) => e.mapMatching),
-      matrix: () => import("../mapbox-sdk/matrix.js").then((e) => e.matrix),
-      optimization: () => import("../mapbox-sdk/optimization.js").then((e) => e.optimization),
-      static: () => import("../mapbox-sdk/static.js").then((e) => e._static),
-      styles: () => import("../mapbox-sdk/styles.js").then((e) => e.styles),
-      tilequery: () => import("../mapbox-sdk/tilequery.js").then((e) => e.tilequery),
-      tilesets: () => import("../mapbox-sdk/tilesets.js").then((e) => e.tilesets),
-      tokens: () => import("../mapbox-sdk/tokens.js").then((e) => e.tokens),
-      uploads: () => import("../mapbox-sdk/uploads.js").then((e) => e.uploads),
-      isochrone: () => import("../mapbox-sdk/isochrone.js").then((e) => e.isochrone)
+      datasets: () => import("@mapbox/mapbox-sdk/services/datasets.js"),
+      directions: () => import("@mapbox/mapbox-sdk/services/directions.js"),
+      geocoding: () => import("@mapbox/mapbox-sdk/services/geocoding.js"),
+      geocodingV6: () => import("@mapbox/mapbox-sdk/services/geocoding-v6.js"),
+      mapMatching: () => import("@mapbox/mapbox-sdk/services/map-matching.js"),
+      matrix: () => import("@mapbox/mapbox-sdk/services/matrix.js"),
+      optimization: () => import("@mapbox/mapbox-sdk/services/optimization.js"),
+      static: () => import("@mapbox/mapbox-sdk/services/static.js"),
+      styles: () => import("@mapbox/mapbox-sdk/services/styles.js"),
+      tilequery: () => import("@mapbox/mapbox-sdk/services/tilequery.js"),
+      tilesets: () => import("@mapbox/mapbox-sdk/services/tilesets.js"),
+      tokens: () => import("@mapbox/mapbox-sdk/services/tokens.js"),
+      uploads: () => import("@mapbox/mapbox-sdk/services/uploads.js"),
+      isochrone: () => import("@mapbox/mapbox-sdk/services/isochrone.js")
     };
   }
   async loadMapboxSDK() {
-    const s = (await import("../mapbox-sdk.js").then((o) => o.index)).default({ accessToken: this.apiKey }), a = await Promise.all(this.services.map((o) => this.servicesLoader[o]().then((r) => r.default(s))));
-    for (const [o, r] of this.services.entries())
-      this.sdk[r] = a[o];
+    const s = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), a = await Promise.all(this.services.map((r) => this.servicesLoader[r]().then((o) => o.default(s))));
+    for (const [r, o] of this.services.entries())
+      this.sdk[o] = a[r];
   }
   async getSDK() {
     return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
   }
-  async createMap(e, s = {}) {
+  async createMap(t, s = {}) {
     const a = new k();
-    return new Promise((o, r) => {
+    return new Promise((r, o) => {
       M(async () => {
         await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
         const i = () => {
-          if (!e.value)
+          if (!t.value)
             throw new Error("Missing HTML element");
           a.map = new this.mapboxgl.Map({
-            container: e.value,
+            container: t.value,
             accessToken: this.apiKey,
             ...s
           }), a.map.on("load", () => {
-            o(a);
+            r(a);
           });
         };
         s.onMounted ? s.onMounted(i) : i();
@@ -174,8 +174,8 @@ class O {
 }
 class K extends O {
   async loadMapbox() {
-    const e = await import("maplibre-gl");
-    this.mapboxgl = e;
+    const t = await import("maplibre-gl");
+    this.mapboxgl = t;
   }
 }
 export {