@yappkit/front-module-map 0.1.0

package/lib/yappkit-map.js

@@ -0,0 +1,469 @@
+import { defineComponent as h, ref as w, toRefs as u, shallowRef as f, provide as m, h as L, inject as v, onMounted as M, onUnmounted as k, watch as g, 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 };
+  }
+  watchLayers(e, a = {}) {
+    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, g(e, () => {
+      this.overlay.setProps({ layers: e.value });
+    }, a);
+  }
+}
+class T {
+  constructor() {
+    this.map = null, this.watching = { sources: !1, layers: !1 };
+  }
+  watchSources(e, a = {}) {
+    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, g(e, (t, s) => {
+      const r = [...s || []], o = [...t || []], i = o.map((n) => n.id), c = r.map((n) => n.id), p = o.filter((n) => !c.includes(n.id)), y = r.filter((n) => !i.includes(n.id));
+      for (const n of y)
+        G(() => {
+          this.map.removeSource(n.id);
+        });
+      for (const n of p) {
+        const d = { ...n };
+        delete d.id, this.map.addSource(n.id, d);
+      }
+    }, a);
+  }
+  watchLayers(e, a = {}) {
+    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, g(e, (t, s) => {
+      const r = [...s || []], o = [...t || []], i = o.map((n) => n.id), c = r.map((n) => n.id), p = o.filter((n) => !c.includes(n.id)), y = r.filter((n) => !i.includes(n.id));
+      for (const n of y)
+        this.map.removeLayer(n.id);
+      for (const n of p)
+        G(() => {
+          this.map.addLayer(n);
+        });
+    }, a);
+  }
+  async setDeckGLOverlay(e = {}) {
+    if (!this.map)
+      throw new Error("map should be set");
+    const { MapboxOverlay: a } = await import("@deck.gl/mapbox"), t = new j();
+    return t.overlay = new a(e), this.map.addControl(t.overlay), t;
+  }
+}
+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();
+  }
+  get Map() {
+    return h(
+      (e, { emit: a, slots: t }) => {
+        const s = w(null), { options: r, layers: o, sources: i } = u(e), c = f(null);
+        return m("mapboxMap", c), this.createMap(s, r.value).then((p) => {
+          c.value = p, p.watchSources(i, r.value.watchSourcesOptions || { immediate: !0 }), p.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), a("loaded", p);
+        }), () => L("div", { ref: s }, c.value ? t : []);
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          },
+          sources: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  get DeckGLOverlay() {
+    return h(
+      (e, { emit: a, slots: t }) => {
+        const { options: s, layers: r } = u(e), o = v("mapboxMap");
+        if (!o || !o.value)
+          throw new Error("map should exist");
+        return o.value.setDeckGLOverlay(s.value).then((i) => {
+          i.watchLayers(r, s.value.watchLayersOptions || { immediate: !0 }), a("loaded", i);
+        }), () => {
+        };
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  async loadMapbox() {
+    const e = await import("./mapbox-gl.js").then((a) => a.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 a = (await import("./mapbox-sdk.js").then((s) => s.i)).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 createMap(e, a = {}) {
+    const t = new T();
+    return new Promise((s, r) => {
+      M(async () => {
+        await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
+        const o = () => {
+          if (!e.value)
+            throw new Error("Missing HTML element");
+          t.map = new this.mapboxgl.Map({
+            container: e.value,
+            accessToken: this.apiKey,
+            ...a
+          }), t.map.on("load", () => {
+            s(t);
+          });
+        };
+        a.onMounted ? a.onMounted(o) : o();
+      }), k(() => {
+        t.map && (t.map.remove(), t.map = null);
+      });
+    });
+  }
+}
+class N {
+  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 R {
+  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 N();
+    return t.overlay = new a(e), t.overlay.setMap(this.map), t;
+  }
+}
+class O {
+  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 h(
+      (e, { emit: a, slots: t }) => {
+        const s = w(null), { options: r } = u(e), o = f(null);
+        return m("googleMapsMap", o), this.createMap(s, r.value).then((i) => {
+          o.value = i, a("loaded", i);
+        }), () => L("div", { ref: s }, o.value ? t : []);
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          }
+        }
+      }
+    );
+  }
+  get DeckGLOverlay() {
+    return h(
+      (e, { emit: a, slots: t }) => {
+        const { options: s, layers: r } = u(e), o = v("googleMapsMap");
+        if (!o || !o.value)
+          throw new Error("map should exist");
+        return o.value.setDeckGLOverlay(s.value).then((i) => {
+          i.watchLayers(r, s.value.watchLayersOptions || { immediate: !0 }), a("loaded", i);
+        }), () => {
+        };
+      },
+      {
+        props: {
+          options: {
+            type: Object,
+            default: () => ({})
+          },
+          layers: {
+            type: Array,
+            default: () => []
+          }
+        }
+      }
+    );
+  }
+  get DeckGL3DTileLayer() {
+    return h(
+      (e, { emit: a, slots: t }) => {
+        const { options: s } = u(e), r = v("deckGLPrependLayers");
+        if (!r || !r.value)
+          throw new Error("deckGLPrependLayers should exist");
+        const o = w("");
+        this.createDeckGL3DTileLayer(o, s).then((c) => {
+          r.value = [
+            ...r.value,
+            c
+          ];
+        });
+        const i = v("deckGLAppendVNodeFn");
+        if (!i)
+          throw new Error("deckGLAppendVNodeFn should exist");
+        return t.appendMap && i.value.push(() => t.appendMap({ credits: o.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, 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;
+  }
+  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 = () => {
+          if (!e.value)
+            throw new Error("Missing HTML element");
+          t.map = new this.sdk.maps.Map(e.value, {
+            ...a
+          }), s(t);
+        };
+        a.onMounted ? a.onMounted(o) : o();
+      }), k(() => {
+        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 = (s) => {
+          const r = /* @__PURE__ */ new Set();
+          return s.forEach((o) => {
+            const { copyright: i } = o.content.gltf.asset;
+            i.split(";").forEach(r.add, r), e.value = [...r].join("; ");
+          }), s;
+        });
+      },
+      operation: "terrain+draw",
+      ...a
+    });
+  }
+}
+class V {
+  constructor() {
+    this.deckgl = null, this.map = null, this.watching = { layers: !1 };
+  }
+  watchLayers(e, a = {}) {
+    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, g(e, () => {
+      this.map.setProps({ layers: e.value });
+    }, a);
+  }
+}
+class x {
+  constructor(e) {
+    this.deckgl = null;
+  }
+  get Map() {
+    return h(
+      (e, { emit: a, attrs: t, slots: s }) => {
+        const r = w(null), { options: o, layers: i } = u(e), c = f(null);
+        m("deckGLMap", c);
+        const p = f([]);
+        m("deckGLPrependLayers", p);
+        const y = S(() => [
+          ...p.value,
+          ...i.value
+        ]);
+        this.createMap(r, o.value).then((d) => {
+          c.value = d, d.watchLayers(y, o.value.watchLayersOptions || { immediate: !0 }), a("loaded", d);
+        });
+        const n = w([]);
+        return m("deckGLAppendVNodeFn", n), () => [L("div", { ...t, ref: r }, c.value ? s : []), n.value.map((d) => d())];
+      },
+      {
+        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, a = {}) {
+    const t = new V();
+    return new Promise((s, r) => {
+      M(async () => {
+        await (this.deckgl ? Promise.resolve() : this.loadDeckGL());
+        const o = () => {
+          if (!e.value)
+            throw new Error("Missing HTML element");
+          t.deckgl = this.deckgl, t.map = new this.deckgl.Deck({
+            parent: e.value,
+            ...a
+          }), s(t);
+        };
+        a.onMounted ? a.onMounted(o) : o();
+      }), k(() => {
+        t.map && (t.map.finalize(), t.map = null);
+      });
+    });
+  }
+}
+function b(l) {
+  let e = 0;
+  return l.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 = [];
+  for (let o = 0; o < s; o += s / a) {
+    const i = E(t, o);
+    r.push(i.geometry.coordinates);
+  }
+  return r.push(e), t.geometry.coordinates = b(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;
+}
+const U = {
+  searoute: async (...l) => (await import("./searoute.js")).default(...l),
+  getAirRoute: F,
+  getWaterRoute: I,
+  normalizeRoute: b
+}, q = {
+  mapbox: A,
+  google: O,
+  "google-maps": O,
+  deckgl: x,
+  "deck-gl": x
+};
+class z {
+  constructor(e = {}) {
+    this.options = { ...e };
+  }
+  install(e) {
+    const a = {};
+    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];
+      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);
+export {
+  z as default,
+  W as loadMapModule,
+  q as mapProviders,
+  U as utils
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@yappkit/front-module-map",
+  "version": "0.1.0",
+  "description": "@yappkit/front module for map",
+  "module": "./lib/yappkit-map.js",
+  "main": "./lib/yappkit-map.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./lib/yappkit-map.js"
+    },
+    "./mapboxgl": {
+      "import": "./lib/mapbox-gl.js"
+    },
+    "./mapboxgl.css": {
+      "import": "./lib/mapbox-gl.css"
+    },
+    "./mapboxsdk": {
+      "import": "./lib/mapbox-sdk.js"
+    },
+    "./deckgl": {
+      "import": "./lib/providers/deckgl.js"
+    },
+    "./google-maps": {
+      "import": "./lib/providers/google-maps.js"
+    },
+    "./mapbox": {
+      "import": "./lib/providers/mapbox.js"
+    },
+    "./maplibre": {
+      "import": "./lib/providers/maplibre.js"
+    }
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@deck.gl/google-maps": "^8.9.34",
+    "@deck.gl/mapbox": "^8.9.34",
+    "@googlemaps/js-api-loader": "^1.16.2",
+    "@turf/turf": "^6.5.0",
+    "deck.gl": "^8.9.34",
+    "geojson-path-finder": "2.0.2",
+    "maplibre-gl": "^4.0.0",
+    "vue": "^3.4.15"
+  }
+}