@yappkit/front-module-map 0.1.8 → 0.2.0

package/lib/providers/maplibre.js

@@ -1,245 +1,28 @@
-import { defineComponent as m, ref as v, toRefs as y, shallowRef as b, provide as g, watch as d, h as x, inject as M, onMounted as S, onUnmounted as L, nextTick as f } from "vue";
-class O {
-  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)
-      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;
-    const t = d(e, () => {
-      this.overlay.setProps({ layers: e.value });
-    }, {
-      immediate: !0,
-      ...a
-    });
-    this.unwatchFn.push(t);
-  }
-}
-class k {
-  constructor() {
-    this.map = null, this.watching = { sources: !1, layers: !1 }, this.unwatchFn = [];
-  }
-  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;
-    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 !== 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();
-      for (const r of l)
-        this.map.removeSource(r.id);
-      for (const r of p) {
-        const h = { ...r };
-        delete h.id, delete h.propsId, this.map.addSource(r.id, h);
-      }
-    }, {
-      immediate: !0,
-      ...a
-    });
-    this.unwatchFn.push(t);
-  }
-  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;
-    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();
-      for (const l of c)
-        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 O({ unwatchFn: this.unwatchFn });
-    return t.overlay = new a(e), this.map.addControl(t.overlay), t;
-  }
-}
-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.getSDK();
-  }
-  get Map() {
-    return m(
-      (e, { emit: a, slots: t }) => {
-        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(o, n.value.watchLayersOptions), a("loaded", p);
-        }), () => x("div", { ref: s }, c.value ? t : []);
-      },
-      {
-        props: {
-          options: {
-            type: Object,
-            default: () => ({})
-          },
-          layers: {
-            type: Array,
-            default: () => []
-          },
-          sources: {
-            type: Array,
-            default: () => []
-          }
-        },
-        emits: ["loaded"]
-      }
-    );
-  }
-  get DeckGLOverlay() {
-    return m(
-      (e, { emit: a, slots: t }) => {
-        const { options: s, layers: n } = y(e), o = M("mapboxMap");
-        if (!o || !o.value)
-          throw new Error("map should exist");
-        return o.value.setDeckGLOverlay(s.value).then((i) => {
-          i.watchOptions(s, s.value.watchOptionsOptions), i.watchLayers(n, s.value.watchLayersOptions), a("loaded", i);
-        }), () => {
-        };
-      },
-      {
-        props: {
-          options: {
-            type: Object,
-            default: () => ({})
-          },
-          layers: {
-            type: Array,
-            default: () => []
-          }
-        },
-        emits: ["loaded"]
-      }
-    );
-  }
-  async loadMapbox() {
-    if (!this.mapboxgl) {
-      const e = await import("../mapbox-gl.js").then((a) => a.mapboxGl);
-      this.mapboxgl = e;
-    }
-  }
-  get servicesLoader() {
-    return {
-      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({ services: e = [] } = {}) {
-    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 = {};
-    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 k(), s = () => {
-      for (const n of t.unwatchFn)
-        n();
-      t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
-    };
-    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 || (s(), c());
-          });
-          t.map = new this.mapboxgl.Map({
-            container: e.value,
-            accessToken: this.apiKey,
-            ...a
-          }), t.map.on("load", () => {
-            n(t);
-          });
-        };
-        a.onMounted ? a.onMounted(i) : i();
-      }), L(() => {
-        s();
-      });
-    });
-  }
-}
-class F extends D {
-  async loadMapbox() {
-    const e = await import("maplibre-gl");
-    this.mapboxgl = e;
-  }
-}
-export {
-  F as default
+import e from "./mapbox.js";
+import { isString as t } from "lodash-es";
+var n = class extends e {
+	get requiresApiKey() {
+		return !1;
+	}
+	async loadMapbox() {
+		if (!this.mapboxgl) {
+			let [e, t] = await Promise.all([
+				import("maplibre-gl"),
+				import("maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url"),
+				import("maplibre-gl/dist/maplibre-gl.css")
+			]);
+			typeof t.default == "string" ? e.setWorkerUrl(t.default) : console.error("Maplibre worker url did not resolve to a string: no tile will be parsed. Pin it from the app with setWorkerUrl()"), this.mapboxgl = e;
+		}
+	}
+	async getSDK(e) {
+		if ((t(e) ? [e] : e?.services ?? []).length || this.services.length) throw Error("Mapbox REST services are not available on the maplibre provider");
+		return this.sdk;
+	}
+	_getMapOptions(e, t) {
+		return {
+			container: e,
+			...t
+		};
+	}
 };
+export { n as default };