@yappkit/front-module-map 0.1.0

package/lib/providers/deckgl.js

@@ -0,0 +1,79 @@
+import { defineComponent as y, ref as d, toRefs as f, shallowRef as u, provide as c, computed as k, h as L, onMounted as g, onUnmounted as v, watch as M } from "vue";
+class D {
+  constructor() {
+    this.deckgl = null, this.map = null, this.watching = { layers: !1 };
+  }
+  watchLayers(e, t = {}) {
+    if (!this.map)
+      throw new Error("map should be set");
+    if (this.watching.layers) {
+      console.warn("No need to call DeckGLMap.watchLayers(). layers are already being watched");
+      return;
+    }
+    this.watching.layers = !0, M(e, () => {
+      this.map.setProps({ layers: e.value });
+    }, t);
+  }
+}
+class P {
+  constructor(e) {
+    this.deckgl = null;
+  }
+  get Map() {
+    return y(
+      (e, { emit: t, attrs: a, slots: s }) => {
+        const l = d(null), { options: n, layers: m } = f(e), o = u(null);
+        c("deckGLMap", o);
+        const i = u([]);
+        c("deckGLPrependLayers", i);
+        const w = k(() => [
+          ...i.value,
+          ...m.value
+        ]);
+        this.createMap(l, n.value).then((r) => {
+          o.value = r, r.watchLayers(w, n.value.watchLayersOptions || { immediate: !0 }), t("loaded", r);
+        });
+        const p = d([]);
+        return c("deckGLAppendVNodeFn", p), () => [L("div", { ...a, ref: l }, o.value ? s : []), p.value.map((r) => r())];
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  async loadDeckGL() {
+    const { Deck: e } = await import("deck.gl");
+    this.deckgl = { Deck: e };
+  }
+  async createMap(e, t = {}) {
+    const a = new D();
+    return new Promise((s, l) => {
+      g(async () => {
+        await (this.deckgl ? Promise.resolve() : this.loadDeckGL());
+        const n = () => {
+          if (!e.value)
+            throw new Error("Missing HTML element");
+          a.deckgl = this.deckgl, a.map = new this.deckgl.Deck({
+            parent: e.value,
+            ...t
+          }), s(a);
+        };
+        t.onMounted ? t.onMounted(n) : n();
+      }), v(() => {
+        a.map && (a.map.finalize(), a.map = null);
+      });
+    });
+  }
+}
+export {
+  P as default
+};

package/lib/providers/google-maps.js

@@ -0,0 +1,170 @@
+import { defineComponent as l, ref as d, toRefs as n, shallowRef as u, provide as y, h as w, inject as p, onMounted as v, onUnmounted as L, watch as g } from "vue";
+class m {
+  constructor() {
+    this.overlay = null, this.watching = { layers: !1 };
+  }
+  watchLayers(e, a = {}) {
+    if (!this.overlay)
+      throw new Error("overlay should be set");
+    if (this.watching.layers) {
+      console.warn("No need to call GoogleMapsDeckGLOverlay.watchLayers(). layers are already being watched");
+      return;
+    }
+    this.watching.layers = !0, g(e, () => {
+      this.overlay.setProps({ layers: e.value });
+    }, a);
+  }
+}
+class k {
+  constructor() {
+    this.map = null;
+  }
+  async setDeckGLOverlay(e = {}) {
+    if (!this.map)
+      throw new Error("map should be set");
+    const { GoogleMapsOverlay: a } = await import("@deck.gl/google-maps"), t = new m();
+    return t.overlay = new a(e), t.overlay.setMap(this.map), t;
+  }
+}
+class G {
+  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;
+  }
+  get Map() {
+    return l(
+      (e, { emit: a, slots: t }) => {
+        const r = d(null), { options: o } = n(e), s = u(null);
+        return y("googleMapsMap", s), this.createMap(r, o.value).then((i) => {
+          s.value = i, a("loaded", i);
+        }), () => w("div", { ref: r }, s.value ? t : []);
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          }
+        }
+      }
+    );
+  }
+  get DeckGLOverlay() {
+    return l(
+      (e, { emit: a, slots: t }) => {
+        const { options: r, layers: o } = n(e), s = p("googleMapsMap");
+        if (!s || !s.value)
+          throw new Error("map should exist");
+        return s.value.setDeckGLOverlay(r.value).then((i) => {
+          i.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), a("loaded", i);
+        }), () => {
+        };
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  get DeckGL3DTileLayer() {
+    return l(
+      (e, { emit: a, slots: t }) => {
+        const { options: r } = n(e), o = p("deckGLPrependLayers");
+        if (!o || !o.value)
+          throw new Error("deckGLPrependLayers should exist");
+        const s = d("");
+        this.createDeckGL3DTileLayer(s, r).then((h) => {
+          o.value = [
+            ...o.value,
+            h
+          ];
+        });
+        const i = p("deckGLAppendVNodeFn");
+        if (!i)
+          throw new Error("deckGLAppendVNodeFn should exist");
+        return t.appendMap && i.value.push(() => t.appendMap({ credits: s.value })), () => {
+        };
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          }
+        }
+      }
+    );
+  }
+  async loadGoogleMaps() {
+    const { Loader: e } = await import("@googlemaps/js-api-loader");
+    this.loader = new e({
+      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, r] of this.libraries.entries())
+      this.sdk[r] = a[t];
+  }
+  async getSDK() {
+    return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadGoogleMaps()), this.sdk;
+  }
+  async createMap(e, a = {}) {
+    const t = new k();
+    return new Promise((r, o) => {
+      v(async () => {
+        await (this.sdk.maps ? Promise.resolve() : this.loadGoogleMaps());
+        const s = () => {
+          if (!e.value)
+            throw new Error("Missing HTML element");
+          t.map = new this.sdk.maps.Map(e.value, {
+            ...a
+          }), r(t);
+        };
+        a.onMounted ? a.onMounted(s) : s();
+      }), L(() => {
+        t.map && (t.map = null);
+      });
+    });
+  }
+  async loadDeckGL() {
+    const { Tile3DLayer: e } = await import("deck.gl");
+    this.deckgl = { Tile3DLayer: e };
+  }
+  async createDeckGL3DTileLayer(e, a = {}) {
+    return await (this.deckgl ? Promise.resolve() : this.loadDeckGL()), new this.deckgl.Tile3DLayer({
+      id: "google-3d-tiles",
+      data: "https://tile.googleapis.com/v1/3dtiles/root.json",
+      loadOptions: {
+        fetch: {
+          headers: {
+            "X-GOOG-API-KEY": this.apiKey
+          }
+        }
+      },
+      onTilesetLoad: (t) => {
+        e && (t.options.onTraversalComplete = (r) => {
+          const o = /* @__PURE__ */ new Set();
+          return r.forEach((s) => {
+            const { copyright: i } = s.content.gltf.asset;
+            i.split(";").forEach(o.add, o), e.value = [...o].join("; ");
+          }), r;
+        });
+      },
+      operation: "terrain+draw",
+      ...a
+    });
+  }
+}
+export {
+  G as default
+};

package/lib/providers/mapbox.js

@@ -0,0 +1,177 @@
+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";
+class S {
+  constructor() {
+    this.overlay = null, this.watching = { layers: !1 };
+  }
+  watchLayers(e, 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 });
+    }, s);
+  }
+}
+class k {
+  constructor() {
+    this.map = null, this.watching = { sources: !1, layers: !1 };
+  }
+  watchSources(e, 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)
+        w(() => {
+          this.map.removeSource(t.id);
+        });
+      for (const t of c) {
+        const u = { ...t };
+        delete u.id, this.map.addSource(t.id, u);
+      }
+    }, s);
+  }
+  watchLayers(e, 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)
+        w(() => {
+          this.map.addLayer(t);
+        });
+    }, s);
+  }
+  async setDeckGLOverlay(e = {}) {
+    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;
+  }
+}
+class D {
+  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();
+  }
+  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 : []);
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          },
+          sources: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  get DeckGLOverlay() {
+    return m(
+      (e, { emit: s, slots: a }) => {
+        const { options: o, layers: r } = y(e), 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);
+        }), () => {
+        };
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  async loadMapbox() {
+    const e = await import("../mapbox-gl.js").then((s) => s.m);
+    this.mapboxgl = e;
+  }
+  get servicesLoader() {
+    return {
+      datasets: () => import("../mapbox-sdk/datasets.js").then((e) => e.d),
+      directions: () => import("../mapbox-sdk/directions.js").then((e) => e.d),
+      geocoding: () => import("../mapbox-sdk/geocoding.js").then((e) => e.g),
+      geocodingV6: () => import("../mapbox-sdk/geocoding-v6.js").then((e) => e.g),
+      mapMatching: () => import("../mapbox-sdk/map-matching.js").then((e) => e.m),
+      matrix: () => import("../mapbox-sdk/matrix.js").then((e) => e.m),
+      optimization: () => import("../mapbox-sdk/optimization.js").then((e) => e.o),
+      static: () => import("../mapbox-sdk/static.js").then((e) => e._),
+      styles: () => import("../mapbox-sdk/styles.js").then((e) => e.s),
+      tilequery: () => import("../mapbox-sdk/tilequery.js").then((e) => e.t),
+      tilesets: () => import("../mapbox-sdk/tilesets.js").then((e) => e.t),
+      tokens: () => import("../mapbox-sdk/tokens.js").then((e) => e.t),
+      uploads: () => import("../mapbox-sdk/uploads.js").then((e) => e.u),
+      isochrone: () => import("../mapbox-sdk/isochrone.js").then((e) => e.i)
+    };
+  }
+  async loadMapboxSDK() {
+    const s = (await import("../mapbox-sdk.js").then((o) => o.i)).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];
+  }
+  async getSDK() {
+    return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
+  }
+  async createMap(e, s = {}) {
+    const a = new k();
+    return new Promise((o, r) => {
+      M(async () => {
+        await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
+        const i = () => {
+          if (!e.value)
+            throw new Error("Missing HTML element");
+          a.map = new this.mapboxgl.Map({
+            container: e.value,
+            accessToken: this.apiKey,
+            ...s
+          }), a.map.on("load", () => {
+            o(a);
+          });
+        };
+        s.onMounted ? s.onMounted(i) : i();
+      }), L(() => {
+        a.map && (a.map.remove(), a.map = null);
+      });
+    });
+  }
+}
+export {
+  D as default
+};

package/lib/providers/maplibre.js

@@ -0,0 +1,183 @@
+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 = {}) {
+    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 });
+    }, s);
+  }
+}
+class k {
+  constructor() {
+    this.map = null, this.watching = { sources: !1, layers: !1 };
+  }
+  watchSources(e, 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)
+        w(() => {
+          this.map.removeSource(t.id);
+        });
+      for (const t of c) {
+        const u = { ...t };
+        delete u.id, this.map.addSource(t.id, u);
+      }
+    }, s);
+  }
+  watchLayers(e, 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)
+        w(() => {
+          this.map.addLayer(t);
+        });
+    }, s);
+  }
+  async setDeckGLOverlay(e = {}) {
+    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;
+  }
+}
+class O {
+  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();
+  }
+  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 : []);
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          },
+          sources: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  get DeckGLOverlay() {
+    return m(
+      (e, { emit: s, slots: a }) => {
+        const { options: o, layers: r } = y(e), 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);
+        }), () => {
+        };
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  async loadMapbox() {
+    const e = await import("../mapbox-gl.js").then((s) => s.m);
+    this.mapboxgl = e;
+  }
+  get servicesLoader() {
+    return {
+      datasets: () => import("../mapbox-sdk/datasets.js").then((e) => e.d),
+      directions: () => import("../mapbox-sdk/directions.js").then((e) => e.d),
+      geocoding: () => import("../mapbox-sdk/geocoding.js").then((e) => e.g),
+      geocodingV6: () => import("../mapbox-sdk/geocoding-v6.js").then((e) => e.g),
+      mapMatching: () => import("../mapbox-sdk/map-matching.js").then((e) => e.m),
+      matrix: () => import("../mapbox-sdk/matrix.js").then((e) => e.m),
+      optimization: () => import("../mapbox-sdk/optimization.js").then((e) => e.o),
+      static: () => import("../mapbox-sdk/static.js").then((e) => e._),
+      styles: () => import("../mapbox-sdk/styles.js").then((e) => e.s),
+      tilequery: () => import("../mapbox-sdk/tilequery.js").then((e) => e.t),
+      tilesets: () => import("../mapbox-sdk/tilesets.js").then((e) => e.t),
+      tokens: () => import("../mapbox-sdk/tokens.js").then((e) => e.t),
+      uploads: () => import("../mapbox-sdk/uploads.js").then((e) => e.u),
+      isochrone: () => import("../mapbox-sdk/isochrone.js").then((e) => e.i)
+    };
+  }
+  async loadMapboxSDK() {
+    const s = (await import("../mapbox-sdk.js").then((o) => o.i)).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];
+  }
+  async getSDK() {
+    return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
+  }
+  async createMap(e, s = {}) {
+    const a = new k();
+    return new Promise((o, r) => {
+      M(async () => {
+        await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
+        const i = () => {
+          if (!e.value)
+            throw new Error("Missing HTML element");
+          a.map = new this.mapboxgl.Map({
+            container: e.value,
+            accessToken: this.apiKey,
+            ...s
+          }), a.map.on("load", () => {
+            o(a);
+          });
+        };
+        s.onMounted ? s.onMounted(i) : i();
+      }), L(() => {
+        a.map && (a.map.remove(), a.map = null);
+      });
+    });
+  }
+}
+class K extends O {
+  async loadMapbox() {
+    const e = await import("maplibre-gl");
+    this.mapboxgl = e;
+  }
+}
+export {
+  K as default
+};