@yappkit/front-module-map 0.1.4 → 0.1.6

package/lib/providers/google-maps.js

@@ -244,7 +244,7 @@ class F {
     let s = {};
     if (typeof e == "string" ? s.libraries = [e] : s = { ...e }, await this.loadGoogleMapsSDK(s), 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'?" : ""}`);
+        throw new Error(`${e} library is not loaded${e === "maps3d" ? ". Missing version: 'alpha' or apiKey not authorized?" : ""}`);
       return this.sdk[e];
     }
     return this.sdk;

package/lib/providers/mapbox.js

@@ -49,14 +49,17 @@ class k {
       return;
     }
     this.watching.sources = !0;
-    const t = d(() => (e.value || []).map((o) => {
-      const { data: n, ...s } = o;
-      return o.propsId = JSON.stringify(s), o;
-    }), async (o, n) => {
-      const s = n || [], i = o || [], c = i.filter((r, h) => {
+    const t = d(() => (e.value || []).map((s) => {
+      if (!s.propsId) {
+        const { data: n, ...o } = s;
+        s.propsId = JSON.stringify(o);
+      }
+      return s;
+    }), async (s, n) => {
+      const o = n || [], i = s || [], c = i.filter((r, h) => {
         var u;
-        return r !== s[h] && r.propsId === ((u = s[h]) == null ? void 0 : u.propsId);
-      }), p = i.filter((r, h) => r !== s[h] && !c.find((u) => u.id === r.id)), l = s.filter((r, h) => r !== i[h] && !c.find((u) => u.id === r.id));
+        return r !== o[h] && r.propsId === ((u = o[h]) == null ? void 0 : u.propsId);
+      }), p = i.filter((r, h) => r !== o[h] && !c.find((u) => u.id === r.id)), l = o.filter((r, h) => r !== i[h] && !c.find((u) => u.id === r.id));
       for (const r of c)
         this.map.getSource(r.id).setData(r.data);
       await f();
@@ -80,8 +83,8 @@ class k {
       return;
     }
     this.watching.layers = !0;
-    const t = d(e, async (o, n) => {
-      const s = n || [], i = o || [], c = i.filter((l, r) => l !== s[r]), p = s.filter((l, r) => l !== i[r]);
+    const t = d(e, async (s, n) => {
+      const o = n || [], i = s || [], c = i.filter((l, r) => l !== o[r]), p = o.filter((l, r) => l !== i[r]);
       for (const l of p)
         this.map.removeLayer(l.id), this.map.getSource(l.id) && this.map.removeSource(l.id);
       await f();
@@ -109,12 +112,12 @@ class K {
   get Map() {
     return m(
       (e, { emit: a, slots: t }) => {
-        const o = v(null), { options: n, layers: s, sources: i } = y(e), c = g(null);
-        return b("mapboxMap", c), this.createMap(o, n.value).then((p) => {
+        const s = v(null), { options: n, layers: o, sources: i } = y(e), c = g(null);
+        return b("mapboxMap", c), this.createMap(s, n.value).then((p) => {
           c.value = p, d(n, () => {
             console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
-          }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(s, n.value.watchLayersOptions), a("loaded", p);
-        }), () => M("div", { ref: o }, c.value ? t : []);
+          }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(o, n.value.watchLayersOptions), a("loaded", p);
+        }), () => M("div", { ref: s }, c.value ? t : []);
       },
       {
         props: {
@@ -138,11 +141,11 @@ class K {
   get DeckGLOverlay() {
     return m(
       (e, { emit: a, slots: t }) => {
-        const { options: o, layers: n } = y(e), s = x("mapboxMap");
-        if (!s || !s.value)
+        const { options: s, layers: n } = y(e), o = x("mapboxMap");
+        if (!o || !o.value)
           throw new Error("map should exist");
-        return s.value.setDeckGLOverlay(o.value).then((i) => {
-          i.watchOptions(o, o.value.watchOptionsOptions), i.watchLayers(n, o.value.watchLayersOptions), a("loaded", i);
+        return o.value.setDeckGLOverlay(s.value).then((i) => {
+          i.watchOptions(s, s.value.watchOptionsOptions), i.watchLayers(n, s.value.watchLayersOptions), a("loaded", i);
         }), () => {
         };
       },
@@ -186,11 +189,11 @@ class K {
     };
   }
   async loadMapboxSDK({ services: e = [] } = {}) {
-    const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), o = [.../* @__PURE__ */ new Set([...this.services, ...e])];
-    this.services = o;
-    const n = await Promise.all(this.services.map((s) => this.sdk[s] || this.servicesLoader[s]().then((i) => i.default(t))));
-    for (const [s, i] of this.services.entries())
-      this.sdk[i] = n[s];
+    const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), s = [.../* @__PURE__ */ new Set([...this.services, ...e])];
+    this.services = s;
+    const n = await Promise.all(this.services.map((o) => this.sdk[o] || this.servicesLoader[o]().then((i) => i.default(t))));
+    for (const [o, i] of this.services.entries())
+      this.sdk[i] = n[o];
   }
   async getSDK(e) {
     let a = {};
@@ -202,19 +205,19 @@ class K {
     return this.sdk;
   }
   async createMap(e, a = {}) {
-    const t = new k(), o = () => {
+    const t = new k(), s = () => {
       for (const n of t.unwatchFn)
         n();
       t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
     };
-    return new Promise((n, s) => {
+    return new Promise((n, o) => {
       S(async () => {
         await this.loadMapbox();
         const i = () => {
           if (!e.value)
             throw new Error("Missing HTML element");
           const c = d(e, () => {
-            e.value || (o(), c());
+            e.value || (s(), c());
           });
           t.map = new this.mapboxgl.Map({
             container: e.value,
@@ -226,7 +229,7 @@ class K {
         };
         a.onMounted ? a.onMounted(i) : i();
       }), L(() => {
-        o();
+        s();
       });
     });
   }

package/lib/providers/maplibre.js

@@ -49,14 +49,17 @@ class k {
       return;
     }
     this.watching.sources = !0;
-    const t = d(() => (e.value || []).map((o) => {
-      const { data: n, ...s } = o;
-      return o.propsId = JSON.stringify(s), o;
-    }), async (o, n) => {
-      const s = n || [], i = o || [], c = i.filter((r, h) => {
+    const t = d(() => (e.value || []).map((s) => {
+      if (!s.propsId) {
+        const { data: n, ...o } = s;
+        s.propsId = JSON.stringify(o);
+      }
+      return s;
+    }), async (s, n) => {
+      const o = n || [], i = s || [], c = i.filter((r, h) => {
         var u;
-        return r !== s[h] && r.propsId === ((u = s[h]) == null ? void 0 : u.propsId);
-      }), p = i.filter((r, h) => r !== s[h] && !c.find((u) => u.id === r.id)), l = s.filter((r, h) => r !== i[h] && !c.find((u) => u.id === r.id));
+        return r !== o[h] && r.propsId === ((u = o[h]) == null ? void 0 : u.propsId);
+      }), p = i.filter((r, h) => r !== o[h] && !c.find((u) => u.id === r.id)), l = o.filter((r, h) => r !== i[h] && !c.find((u) => u.id === r.id));
       for (const r of c)
         this.map.getSource(r.id).setData(r.data);
       await f();
@@ -80,8 +83,8 @@ class k {
       return;
     }
     this.watching.layers = !0;
-    const t = d(e, async (o, n) => {
-      const s = n || [], i = o || [], c = i.filter((l, r) => l !== s[r]), p = s.filter((l, r) => l !== i[r]);
+    const t = d(e, async (s, n) => {
+      const o = n || [], i = s || [], c = i.filter((l, r) => l !== o[r]), p = o.filter((l, r) => l !== i[r]);
       for (const l of p)
         this.map.removeLayer(l.id), this.map.getSource(l.id) && this.map.removeSource(l.id);
       await f();
@@ -109,12 +112,12 @@ class D {
   get Map() {
     return m(
       (e, { emit: a, slots: t }) => {
-        const o = v(null), { options: n, layers: s, sources: i } = y(e), c = b(null);
-        return g("mapboxMap", c), this.createMap(o, n.value).then((p) => {
+        const s = v(null), { options: n, layers: o, sources: i } = y(e), c = b(null);
+        return g("mapboxMap", c), this.createMap(s, n.value).then((p) => {
           c.value = p, d(n, () => {
             console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
-          }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(s, n.value.watchLayersOptions), a("loaded", p);
-        }), () => x("div", { ref: o }, c.value ? t : []);
+          }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(o, n.value.watchLayersOptions), a("loaded", p);
+        }), () => x("div", { ref: s }, c.value ? t : []);
       },
       {
         props: {
@@ -138,11 +141,11 @@ class D {
   get DeckGLOverlay() {
     return m(
       (e, { emit: a, slots: t }) => {
-        const { options: o, layers: n } = y(e), s = M("mapboxMap");
-        if (!s || !s.value)
+        const { options: s, layers: n } = y(e), o = M("mapboxMap");
+        if (!o || !o.value)
           throw new Error("map should exist");
-        return s.value.setDeckGLOverlay(o.value).then((i) => {
-          i.watchOptions(o, o.value.watchOptionsOptions), i.watchLayers(n, o.value.watchLayersOptions), a("loaded", i);
+        return o.value.setDeckGLOverlay(s.value).then((i) => {
+          i.watchOptions(s, s.value.watchOptionsOptions), i.watchLayers(n, s.value.watchLayersOptions), a("loaded", i);
         }), () => {
         };
       },
@@ -186,11 +189,11 @@ class D {
     };
   }
   async loadMapboxSDK({ services: e = [] } = {}) {
-    const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), o = [.../* @__PURE__ */ new Set([...this.services, ...e])];
-    this.services = o;
-    const n = await Promise.all(this.services.map((s) => this.sdk[s] || this.servicesLoader[s]().then((i) => i.default(t))));
-    for (const [s, i] of this.services.entries())
-      this.sdk[i] = n[s];
+    const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), s = [.../* @__PURE__ */ new Set([...this.services, ...e])];
+    this.services = s;
+    const n = await Promise.all(this.services.map((o) => this.sdk[o] || this.servicesLoader[o]().then((i) => i.default(t))));
+    for (const [o, i] of this.services.entries())
+      this.sdk[i] = n[o];
   }
   async getSDK(e) {
     let a = {};
@@ -202,19 +205,19 @@ class D {
     return this.sdk;
   }
   async createMap(e, a = {}) {
-    const t = new k(), o = () => {
+    const t = new k(), s = () => {
       for (const n of t.unwatchFn)
         n();
       t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
     };
-    return new Promise((n, s) => {
+    return new Promise((n, o) => {
       S(async () => {
         await this.loadMapbox();
         const i = () => {
           if (!e.value)
             throw new Error("Missing HTML element");
           const c = d(e, () => {
-            e.value || (o(), c());
+            e.value || (s(), c());
           });
           t.map = new this.mapboxgl.Map({
             container: e.value,
@@ -226,7 +229,7 @@ class D {
         };
         a.onMounted ? a.onMounted(i) : i();
       }), L(() => {
-        o();
+        s();
       });
     });
   }

package/lib/yappkit-map.js

@@ -51,8 +51,11 @@ class N {
     }
     this.watching.sources = !0;
     const t = d(() => (e.value || []).map((s) => {
-      const { data: r, ...o } = s;
-      return s.propsId = JSON.stringify(o), s;
+      if (!s.propsId) {
+        const { data: r, ...o } = s;
+        s.propsId = JSON.stringify(o);
+      }
+      return s;
     }), async (s, r) => {
       const o = r || [], n = s || [], i = n.filter((c, u) => {
         var m;
@@ -477,7 +480,7 @@ class S {
     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'?" : ""}`);
+        throw new Error(`${e} library is not loaded${e === "maps3d" ? ". Missing version: 'alpha' or apiKey not authorized?" : ""}`);
       return this.sdk[e];
     }
     return this.sdk;
@@ -675,7 +678,7 @@ function D(h) {
     return t - e > 180 ? t += -360 : e - t > 180 ? t += 360 : t += 0, e = t, [t, a[1]];
   });
 }
-function H({ origin: h, destination: e, step: a = 100 }) {
+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 = j(t, o);
@@ -683,22 +686,22 @@ function H({ origin: h, destination: e, step: a = 100 }) {
   }
   return r.push(e), t.geometry.coordinates = D(r), t;
 }
-async function U({ origin: h, destination: e, includeBoundaries: a = !1 }) {
+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 R = {
-  getAirRoute: H,
-  getWaterRoute: U,
+  getAirRoute: z,
+  getWaterRoute: H,
   normalizeRoute: D
-}, q = {
+}, U = {
   mapbox: A,
   google: S,
   "google-maps": S,
   deckgl: F,
   "deck-gl": F
 };
-class z {
+class q {
   constructor(e = {}) {
     this.options = { ...e };
   }
@@ -707,16 +710,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 = (h) => new z(h);
+const W = (h) => new q(h);
 export {
-  z as default,
+  q as default,
   W as loadMapModule,
-  q as mapProviders,
+  U as mapProviders,
   R as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yappkit/front-module-map",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "@yappkit/front module for map",
   "module": "./lib/yappkit-map.js",
   "main": "./lib/yappkit-map.js",
@@ -33,14 +33,14 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@deck.gl/google-maps": "^8.9.34",
-    "@deck.gl/mapbox": "^8.9.34",
-    "@googlemaps/js-api-loader": "^1.16.2",
+    "@deck.gl/google-maps": "^8.9.35",
+    "@deck.gl/mapbox": "^8.9.35",
+    "@googlemaps/js-api-loader": "^1.16.6",
     "@mapbox/mapbox-sdk": "^0.15.3",
     "@turf/turf": "^6.5.0",
-    "deck.gl": "^8.9.34",
+    "deck.gl": "^8.9.35",
     "geojson-path-finder": "2.0.2",
-    "maplibre-gl": "^4.0.0",
-    "vue": "^3.4.18"
+    "maplibre-gl": "^4.1.0",
+    "vue": "^3.4.21"
   }
 }