@yappkit/front-module-map 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/lib/providers/deckgl.js +65 -33
  2. package/lib/providers/google-maps.js +230 -67
  3. package/lib/providers/mapbox.js +130 -71
  4. package/lib/providers/maplibre.js +134 -75
  5. package/lib/yappkit-map.js +400 -146
  6. package/package.json +1 -1
package/lib/providers/mapbox.js CHANGED
@@ -1,80 +1,120 @@
1
- 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";
2
- class S {
3
- constructor() {
4
- this.overlay = null, this.watching = { layers: !1 };
1
+ import { defineComponent as m, ref as v, toRefs as y, shallowRef as g, provide as b, watch as d, h as M, inject as x, onMounted as S, onUnmounted as L, nextTick as f } from "vue";
2
+ class O {
3
+ constructor({ unwatchFn: e }) {
4
+ this.overlay = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = e;
5
+ }
6
+ watchOptions(e, a = {}) {
7
+ if (!this.overlay)
8
+ throw new Error("overlay should be set");
9
+ if (this.watching.options) {
10
+ console.warn("No need to call MapboxDeckGLOverlay.watchOptions(). options are already being watched");
11
+ return;
12
+ }
13
+ this.watching.options = !0;
14
+ const t = d(e, () => {
15
+ this.overlay.setProps({ ...e.value });
16
+ }, {
17
+ immediate: !0,
18
+ deep: !0,
19
+ ...a
20
+ });
21
+ this.unwatchFn.push(t);
5
22
  }
6
- watchLayers(t, s = {}) {
23
+ watchLayers(e, a = {}) {
7
24
  if (!this.overlay)
8
25
  throw new Error("overlay should be set");
9
26
  if (this.watching.layers) {
10
27
  console.warn("No need to call MapboxDeckGLOverlay.watchLayers(). layers are already being watched");
11
28
  return;
12
29
  }
13
- this.watching.layers = !0, d(t, () => {
14
- this.overlay.setProps({ layers: t.value });
15
- }, s);
30
+ this.watching.layers = !0;
31
+ const t = d(e, () => {
32
+ this.overlay.setProps({ layers: e.value });
33
+ }, {
34
+ immediate: !0,
35
+ ...a
36
+ });
37
+ this.unwatchFn.push(t);
16
38
  }
17
39
  }
18
40
  class k {
19
41
  constructor() {
20
- this.map = null, this.watching = { sources: !1, layers: !1 };
42
+ this.map = null, this.watching = { sources: !1, layers: !1 }, this.unwatchFn = [];
21
43
  }
22
- watchSources(t, s = {}) {
44
+ watchSources(e, a = {}) {
23
45
  if (!this.map)
24
46
  throw new Error("map should be set");
25
47
  if (this.watching.sources) {
26
48
  console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
27
49
  return;
28
50
  }
29
- this.watching.sources = !0, d(t, (a, r) => {
30
- 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));
31
- for (const e of p)
32
- w(() => {
33
- this.map.removeSource(e.id);
34
- });
35
- for (const e of c) {
36
- const u = { ...e };
37
- delete u.id, this.map.addSource(e.id, u);
51
+ this.watching.sources = !0;
52
+ const t = d(() => (e.value || []).map((o) => {
53
+ const { data: n, ...s } = o;
54
+ return o.propsId = JSON.stringify(s), o;
55
+ }), async (o, n) => {
56
+ const s = n || [], i = o || [], c = i.filter((r, h) => {
57
+ var u;
58
+ return r !== s[h] && r.propsId === ((u = s[h]) == null ? void 0 : u.propsId);
59
+ }), 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));
60
+ for (const r of c)
61
+ this.map.getSource(r.id).setData(r.data);
62
+ await f();
63
+ for (const r of l)
64
+ this.map.removeSource(r.id);
65
+ for (const r of p) {
66
+ const h = { ...r };
67
+ delete h.id, delete h.propsId, this.map.addSource(r.id, h);
38
68
  }
39
- }, s);
69
+ }, {
70
+ immediate: !0,
71
+ ...a
72
+ });
73
+ this.unwatchFn.push(t);
40
74
  }
41
- watchLayers(t, s = {}) {
75
+ watchLayers(e, a = {}) {
42
76
  if (!this.map)
43
77
  throw new Error("map should be set");
44
78
  if (this.watching.layers) {
45
79
  console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
46
80
  return;
47
81
  }
48
- this.watching.layers = !0, d(t, (a, r) => {
49
- 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));
50
- for (const e of p)
51
- this.map.removeLayer(e.id);
52
- for (const e of c)
53
- w(() => {
54
- this.map.addLayer(e);
55
- });
56
- }, s);
82
+ this.watching.layers = !0;
83
+ const t = d(e, async (o, n) => {
84
+ const s = n || [], i = o || [], c = i.filter((l, r) => l !== s[r]), p = s.filter((l, r) => l !== i[r]);
85
+ for (const l of p)
86
+ this.map.removeLayer(l.id), this.map.getSource(l.id) && this.map.removeSource(l.id);
87
+ await f();
88
+ for (const l of c)
89
+ this.map.addLayer(l);
90
+ }, {
91
+ immediate: !0,
92
+ ...a
93
+ });
94
+ this.unwatchFn.push(t);
57
95
  }
58
- async setDeckGLOverlay(t = {}) {
96
+ async setDeckGLOverlay(e = {}) {
59
97
  if (!this.map)
60
98
  throw new Error("map should be set");
61
- const { MapboxOverlay: s } = await import("@deck.gl/mapbox"), a = new S();
62
- return a.overlay = new s(t), this.map.addControl(a.overlay), a;
99
+ const { MapboxOverlay: a } = await import("@deck.gl/mapbox"), t = new O({ unwatchFn: this.unwatchFn });
100
+ return t.overlay = new a(e), this.map.addControl(t.overlay), t;
63
101
  }
64
102
  }
65
- class D {
66
- constructor(t) {
67
- if (this.apiKey = t.apiKey, !this.apiKey)
103
+ class K {
104
+ constructor(e) {
105
+ if (this.apiKey = e.apiKey, !this.apiKey)
68
106
  throw new Error("apiKey is required");
69
- this.services = t.services || [], this.sdk = {}, this.mapboxgl = null, this.services.length && this.loadMapboxSDK();
107
+ this.services = [...e.services || []], this.sdk = {}, this.mapboxgl = null, this.getSDK();
70
108
  }
71
109
  get Map() {
72
110
  return m(
73
- (t, { emit: s, slots: a }) => {
74
- const r = f(null), { options: o, layers: i, sources: n } = y(t), l = v(null);
75
- return b("mapboxMap", l), this.createMap(r, o.value).then((c) => {
76
- l.value = c, c.watchSources(n, o.value.watchSourcesOptions || { immediate: !0 }), c.watchLayers(i, o.value.watchLayersOptions || { immediate: !0 }), s("loaded", c);
77
- }), () => g("div", { ref: r }, l.value ? a : []);
111
+ (e, { emit: a, slots: t }) => {
112
+ const o = v(null), { options: n, layers: s, sources: i } = y(e), c = g(null);
113
+ return b("mapboxMap", c), this.createMap(o, n.value).then((p) => {
114
+ c.value = p, d(n, () => {
115
+ console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
116
+ }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(s, n.value.watchLayersOptions), a("loaded", p);
117
+ }), () => M("div", { ref: o }, c.value ? t : []);
78
118
  },
79
119
  {
80
120
  props: {
@@ -90,18 +130,19 @@ class D {
90
130
  type: Array,
91
131
  default: () => []
92
132
  }
93
- }
133
+ },
134
+ emits: ["loaded"]
94
135
  }
95
136
  );
96
137
  }
97
138
  get DeckGLOverlay() {
98
139
  return m(
99
- (t, { emit: s, slots: a }) => {
100
- const { options: r, layers: o } = y(t), i = x("mapboxMap");
101
- if (!i || !i.value)
140
+ (e, { emit: a, slots: t }) => {
141
+ const { options: o, layers: n } = y(e), s = x("mapboxMap");
142
+ if (!s || !s.value)
102
143
  throw new Error("map should exist");
103
- return i.value.setDeckGLOverlay(r.value).then((n) => {
104
- n.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), s("loaded", n);
144
+ return s.value.setDeckGLOverlay(o.value).then((i) => {
145
+ i.watchOptions(o, o.value.watchOptionsOptions), i.watchLayers(n, o.value.watchLayersOptions), a("loaded", i);
105
146
  }), () => {
106
147
  };
107
148
  },
@@ -115,13 +156,16 @@ class D {
115
156
  type: Array,
116
157
  default: () => []
117
158
  }
118
- }
159
+ },
160
+ emits: ["loaded"]
119
161
  }
120
162
  );
121
163
  }
122
164
  async loadMapbox() {
123
- const t = await import("../mapbox-gl.js").then((s) => s.mapboxGl);
124
- this.mapboxgl = t;
165
+ if (!this.mapboxgl) {
166
+ const e = await import("../mapbox-gl.js").then((a) => a.mapboxGl);
167
+ this.mapboxgl = e;
168
+ }
125
169
  }
126
170
  get servicesLoader() {
127
171
  return {
@@ -141,37 +185,52 @@ class D {
141
185
  isochrone: () => import("@mapbox/mapbox-sdk/services/isochrone.js")
142
186
  };
143
187
  }
144
- async loadMapboxSDK() {
145
- 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))));
146
- for (const [r, o] of this.services.entries())
147
- this.sdk[o] = a[r];
188
+ async loadMapboxSDK({ services: e = [] } = {}) {
189
+ const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), o = [.../* @__PURE__ */ new Set([...this.services, ...e])];
190
+ this.services = o;
191
+ const n = await Promise.all(this.services.map((s) => this.sdk[s] || this.servicesLoader[s]().then((i) => i.default(t))));
192
+ for (const [s, i] of this.services.entries())
193
+ this.sdk[i] = n[s];
148
194
  }
149
- async getSDK() {
150
- return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
195
+ async getSDK(e) {
196
+ let a = {};
197
+ if (typeof e == "string" ? a.services = [e] : a = { ...e }, await this.loadMapboxSDK(a), typeof e == "string") {
198
+ if (!this.sdk[e])
199
+ throw new Error(e + " service is not loaded");
200
+ return this.sdk[e];
201
+ }
202
+ return this.sdk;
151
203
  }
152
- async createMap(t, s = {}) {
153
- const a = new k();
154
- return new Promise((r, o) => {
155
- M(async () => {
156
- await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
204
+ async createMap(e, a = {}) {
205
+ const t = new k(), o = () => {
206
+ for (const n of t.unwatchFn)
207
+ n();
208
+ t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
209
+ };
210
+ return new Promise((n, s) => {
211
+ S(async () => {
212
+ await this.loadMapbox();
157
213
  const i = () => {
158
- if (!t.value)
214
+ if (!e.value)
159
215
  throw new Error("Missing HTML element");
160
- a.map = new this.mapboxgl.Map({
161
- container: t.value,
216
+ const c = d(e, () => {
217
+ e.value || (o(), c());
218
+ });
219
+ t.map = new this.mapboxgl.Map({
220
+ container: e.value,
162
221
  accessToken: this.apiKey,
163
- ...s
164
- }), a.map.on("load", () => {
165
- r(a);
222
+ ...a
223
+ }), t.map.on("load", () => {
224
+ n(t);
166
225
  });
167
226
  };
168
- s.onMounted ? s.onMounted(i) : i();
227
+ a.onMounted ? a.onMounted(i) : i();
169
228
  }), L(() => {
170
- a.map && (a.map.remove(), a.map = null);
229
+ o();
171
230
  });
172
231
  });
173
232
  }
174
233
  }
175
234
  export {
176
- D as default
235
+ K as default
177
236
  };
package/lib/providers/maplibre.js CHANGED
@@ -1,80 +1,120 @@
1
- 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";
2
- class S {
3
- constructor() {
4
- this.overlay = null, this.watching = { layers: !1 };
1
+ 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";
2
+ class O {
3
+ constructor({ unwatchFn: e }) {
4
+ this.overlay = null, this.watching = { options: !1, layers: !1 }, this.unwatchFn = e;
5
5
  }
6
- watchLayers(t, s = {}) {
6
+ watchOptions(e, a = {}) {
7
+ if (!this.overlay)
8
+ throw new Error("overlay should be set");
9
+ if (this.watching.options) {
10
+ console.warn("No need to call MapboxDeckGLOverlay.watchOptions(). options are already being watched");
11
+ return;
12
+ }
13
+ this.watching.options = !0;
14
+ const t = d(e, () => {
15
+ this.overlay.setProps({ ...e.value });
16
+ }, {
17
+ immediate: !0,
18
+ deep: !0,
19
+ ...a
20
+ });
21
+ this.unwatchFn.push(t);
22
+ }
23
+ watchLayers(e, a = {}) {
7
24
  if (!this.overlay)
8
25
  throw new Error("overlay should be set");
9
26
  if (this.watching.layers) {
10
27
  console.warn("No need to call MapboxDeckGLOverlay.watchLayers(). layers are already being watched");
11
28
  return;
12
29
  }
13
- this.watching.layers = !0, h(t, () => {
14
- this.overlay.setProps({ layers: t.value });
15
- }, s);
30
+ this.watching.layers = !0;
31
+ const t = d(e, () => {
32
+ this.overlay.setProps({ layers: e.value });
33
+ }, {
34
+ immediate: !0,
35
+ ...a
36
+ });
37
+ this.unwatchFn.push(t);
16
38
  }
17
39
  }
18
40
  class k {
19
41
  constructor() {
20
- this.map = null, this.watching = { sources: !1, layers: !1 };
42
+ this.map = null, this.watching = { sources: !1, layers: !1 }, this.unwatchFn = [];
21
43
  }
22
- watchSources(t, s = {}) {
44
+ watchSources(e, a = {}) {
23
45
  if (!this.map)
24
46
  throw new Error("map should be set");
25
47
  if (this.watching.sources) {
26
48
  console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
27
49
  return;
28
50
  }
29
- this.watching.sources = !0, h(t, (a, r) => {
30
- 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));
31
- for (const e of d)
32
- w(() => {
33
- this.map.removeSource(e.id);
34
- });
35
- for (const e of c) {
36
- const u = { ...e };
37
- delete u.id, this.map.addSource(e.id, u);
51
+ this.watching.sources = !0;
52
+ const t = d(() => (e.value || []).map((o) => {
53
+ const { data: n, ...s } = o;
54
+ return o.propsId = JSON.stringify(s), o;
55
+ }), async (o, n) => {
56
+ const s = n || [], i = o || [], c = i.filter((r, h) => {
57
+ var u;
58
+ return r !== s[h] && r.propsId === ((u = s[h]) == null ? void 0 : u.propsId);
59
+ }), 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));
60
+ for (const r of c)
61
+ this.map.getSource(r.id).setData(r.data);
62
+ await f();
63
+ for (const r of l)
64
+ this.map.removeSource(r.id);
65
+ for (const r of p) {
66
+ const h = { ...r };
67
+ delete h.id, delete h.propsId, this.map.addSource(r.id, h);
38
68
  }
39
- }, s);
69
+ }, {
70
+ immediate: !0,
71
+ ...a
72
+ });
73
+ this.unwatchFn.push(t);
40
74
  }
41
- watchLayers(t, s = {}) {
75
+ watchLayers(e, a = {}) {
42
76
  if (!this.map)
43
77
  throw new Error("map should be set");
44
78
  if (this.watching.layers) {
45
79
  console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
46
80
  return;
47
81
  }
48
- this.watching.layers = !0, h(t, (a, r) => {
49
- 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));
50
- for (const e of d)
51
- this.map.removeLayer(e.id);
52
- for (const e of c)
53
- w(() => {
54
- this.map.addLayer(e);
55
- });
56
- }, s);
57
- }
58
- async setDeckGLOverlay(t = {}) {
82
+ this.watching.layers = !0;
83
+ const t = d(e, async (o, n) => {
84
+ const s = n || [], i = o || [], c = i.filter((l, r) => l !== s[r]), p = s.filter((l, r) => l !== i[r]);
85
+ for (const l of p)
86
+ this.map.removeLayer(l.id), this.map.getSource(l.id) && this.map.removeSource(l.id);
87
+ await f();
88
+ for (const l of c)
89
+ this.map.addLayer(l);
90
+ }, {
91
+ immediate: !0,
92
+ ...a
93
+ });
94
+ this.unwatchFn.push(t);
95
+ }
96
+ async setDeckGLOverlay(e = {}) {
59
97
  if (!this.map)
60
98
  throw new Error("map should be set");
61
- const { MapboxOverlay: s } = await import("@deck.gl/mapbox"), a = new S();
62
- return a.overlay = new s(t), this.map.addControl(a.overlay), a;
99
+ const { MapboxOverlay: a } = await import("@deck.gl/mapbox"), t = new O({ unwatchFn: this.unwatchFn });
100
+ return t.overlay = new a(e), this.map.addControl(t.overlay), t;
63
101
  }
64
102
  }
65
- class O {
66
- constructor(t) {
67
- if (this.apiKey = t.apiKey, !this.apiKey)
103
+ class D {
104
+ constructor(e) {
105
+ if (this.apiKey = e.apiKey, !this.apiKey)
68
106
  throw new Error("apiKey is required");
69
- this.services = t.services || [], this.sdk = {}, this.mapboxgl = null, this.services.length && this.loadMapboxSDK();
107
+ this.services = [...e.services || []], this.sdk = {}, this.mapboxgl = null, this.getSDK();
70
108
  }
71
109
  get Map() {
72
110
  return m(
73
- (t, { emit: s, slots: a }) => {
74
- const r = f(null), { options: o, layers: i, sources: n } = y(t), l = v(null);
75
- return b("mapboxMap", l), this.createMap(r, o.value).then((c) => {
76
- l.value = c, c.watchSources(n, o.value.watchSourcesOptions || { immediate: !0 }), c.watchLayers(i, o.value.watchLayersOptions || { immediate: !0 }), s("loaded", c);
77
- }), () => x("div", { ref: r }, l.value ? a : []);
111
+ (e, { emit: a, slots: t }) => {
112
+ const o = v(null), { options: n, layers: s, sources: i } = y(e), c = b(null);
113
+ return g("mapboxMap", c), this.createMap(o, n.value).then((p) => {
114
+ c.value = p, d(n, () => {
115
+ console.error("Cannot update options (missing function similar to deckglMap.setProps()). Use SDK dedicated functions instead");
116
+ }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(s, n.value.watchLayersOptions), a("loaded", p);
117
+ }), () => x("div", { ref: o }, c.value ? t : []);
78
118
  },
79
119
  {
80
120
  props: {
@@ -90,18 +130,19 @@ class O {
90
130
  type: Array,
91
131
  default: () => []
92
132
  }
93
- }
133
+ },
134
+ emits: ["loaded"]
94
135
  }
95
136
  );
96
137
  }
97
138
  get DeckGLOverlay() {
98
139
  return m(
99
- (t, { emit: s, slots: a }) => {
100
- const { options: r, layers: o } = y(t), i = g("mapboxMap");
101
- if (!i || !i.value)
140
+ (e, { emit: a, slots: t }) => {
141
+ const { options: o, layers: n } = y(e), s = M("mapboxMap");
142
+ if (!s || !s.value)
102
143
  throw new Error("map should exist");
103
- return i.value.setDeckGLOverlay(r.value).then((n) => {
104
- n.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), s("loaded", n);
144
+ return s.value.setDeckGLOverlay(o.value).then((i) => {
145
+ i.watchOptions(o, o.value.watchOptionsOptions), i.watchLayers(n, o.value.watchLayersOptions), a("loaded", i);
105
146
  }), () => {
106
147
  };
107
148
  },
@@ -115,13 +156,16 @@ class O {
115
156
  type: Array,
116
157
  default: () => []
117
158
  }
118
- }
159
+ },
160
+ emits: ["loaded"]
119
161
  }
120
162
  );
121
163
  }
122
164
  async loadMapbox() {
123
- const t = await import("../mapbox-gl.js").then((s) => s.mapboxGl);
124
- this.mapboxgl = t;
165
+ if (!this.mapboxgl) {
166
+ const e = await import("../mapbox-gl.js").then((a) => a.mapboxGl);
167
+ this.mapboxgl = e;
168
+ }
125
169
  }
126
170
  get servicesLoader() {
127
171
  return {
@@ -141,43 +185,58 @@ class O {
141
185
  isochrone: () => import("@mapbox/mapbox-sdk/services/isochrone.js")
142
186
  };
143
187
  }
144
- async loadMapboxSDK() {
145
- 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))));
146
- for (const [r, o] of this.services.entries())
147
- this.sdk[o] = a[r];
188
+ async loadMapboxSDK({ services: e = [] } = {}) {
189
+ const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), o = [.../* @__PURE__ */ new Set([...this.services, ...e])];
190
+ this.services = o;
191
+ const n = await Promise.all(this.services.map((s) => this.sdk[s] || this.servicesLoader[s]().then((i) => i.default(t))));
192
+ for (const [s, i] of this.services.entries())
193
+ this.sdk[i] = n[s];
148
194
  }
149
- async getSDK() {
150
- return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
195
+ async getSDK(e) {
196
+ let a = {};
197
+ if (typeof e == "string" ? a.services = [e] : a = { ...e }, await this.loadMapboxSDK(a), typeof e == "string") {
198
+ if (!this.sdk[e])
199
+ throw new Error(e + " service is not loaded");
200
+ return this.sdk[e];
201
+ }
202
+ return this.sdk;
151
203
  }
152
- async createMap(t, s = {}) {
153
- const a = new k();
154
- return new Promise((r, o) => {
155
- M(async () => {
156
- await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
204
+ async createMap(e, a = {}) {
205
+ const t = new k(), o = () => {
206
+ for (const n of t.unwatchFn)
207
+ n();
208
+ t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
209
+ };
210
+ return new Promise((n, s) => {
211
+ S(async () => {
212
+ await this.loadMapbox();
157
213
  const i = () => {
158
- if (!t.value)
214
+ if (!e.value)
159
215
  throw new Error("Missing HTML element");
160
- a.map = new this.mapboxgl.Map({
161
- container: t.value,
216
+ const c = d(e, () => {
217
+ e.value || (o(), c());
218
+ });
219
+ t.map = new this.mapboxgl.Map({
220
+ container: e.value,
162
221
  accessToken: this.apiKey,
163
- ...s
164
- }), a.map.on("load", () => {
165
- r(a);
222
+ ...a
223
+ }), t.map.on("load", () => {
224
+ n(t);
166
225
  });
167
226
  };
168
- s.onMounted ? s.onMounted(i) : i();
227
+ a.onMounted ? a.onMounted(i) : i();
169
228
  }), L(() => {
170
- a.map && (a.map.remove(), a.map = null);
229
+ o();
171
230
  });
172
231
  });
173
232
  }
174
233
  }
175
- class K extends O {
234
+ class F extends D {
176
235
  async loadMapbox() {
177
- const t = await import("maplibre-gl");
178
- this.mapboxgl = t;
236
+ const e = await import("maplibre-gl");
237
+ this.mapboxgl = e;
179
238
  }
180
239
  }
181
240
  export {
182
- K as default
241
+ F as default
183
242
  };