@yappkit/front-module-map 0.1.5 → 0.1.6

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 (4) hide show
  1. package/lib/providers/mapbox.js +29 -26
  2. package/lib/providers/maplibre.js +29 -26
  3. package/lib/yappkit-map.js +5 -2
  4. package/package.json +1 -1
package/lib/providers/mapbox.js CHANGED
@@ -49,14 +49,17 @@ class k {
49
49
  return;
50
50
  }
51
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) => {
52
+ const t = d(() => (e.value || []).map((s) => {
53
+ if (!s.propsId) {
54
+ const { data: n, ...o } = s;
55
+ s.propsId = JSON.stringify(o);
56
+ }
57
+ return s;
58
+ }), async (s, n) => {
59
+ const o = n || [], i = s || [], c = i.filter((r, h) => {
57
60
  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));
61
+ return r !== o[h] && r.propsId === ((u = o[h]) == null ? void 0 : u.propsId);
62
+ }), 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));
60
63
  for (const r of c)
61
64
  this.map.getSource(r.id).setData(r.data);
62
65
  await f();
@@ -80,8 +83,8 @@ class k {
80
83
  return;
81
84
  }
82
85
  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]);
86
+ const t = d(e, async (s, n) => {
87
+ const o = n || [], i = s || [], c = i.filter((l, r) => l !== o[r]), p = o.filter((l, r) => l !== i[r]);
85
88
  for (const l of p)
86
89
  this.map.removeLayer(l.id), this.map.getSource(l.id) && this.map.removeSource(l.id);
87
90
  await f();
@@ -109,12 +112,12 @@ class K {
109
112
  get Map() {
110
113
  return m(
111
114
  (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) => {
115
+ const s = v(null), { options: n, layers: o, sources: i } = y(e), c = g(null);
116
+ return b("mapboxMap", c), this.createMap(s, n.value).then((p) => {
114
117
  c.value = p, d(n, () => {
115
118
  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 : []);
119
+ }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(o, n.value.watchLayersOptions), a("loaded", p);
120
+ }), () => M("div", { ref: s }, c.value ? t : []);
118
121
  },
119
122
  {
120
123
  props: {
@@ -138,11 +141,11 @@ class K {
138
141
  get DeckGLOverlay() {
139
142
  return m(
140
143
  (e, { emit: a, slots: t }) => {
141
- const { options: o, layers: n } = y(e), s = x("mapboxMap");
142
- if (!s || !s.value)
144
+ const { options: s, layers: n } = y(e), o = x("mapboxMap");
145
+ if (!o || !o.value)
143
146
  throw new Error("map should exist");
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);
147
+ return o.value.setDeckGLOverlay(s.value).then((i) => {
148
+ i.watchOptions(s, s.value.watchOptionsOptions), i.watchLayers(n, s.value.watchLayersOptions), a("loaded", i);
146
149
  }), () => {
147
150
  };
148
151
  },
@@ -186,11 +189,11 @@ class K {
186
189
  };
187
190
  }
188
191
  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];
192
+ const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), s = [.../* @__PURE__ */ new Set([...this.services, ...e])];
193
+ this.services = s;
194
+ const n = await Promise.all(this.services.map((o) => this.sdk[o] || this.servicesLoader[o]().then((i) => i.default(t))));
195
+ for (const [o, i] of this.services.entries())
196
+ this.sdk[i] = n[o];
194
197
  }
195
198
  async getSDK(e) {
196
199
  let a = {};
@@ -202,19 +205,19 @@ class K {
202
205
  return this.sdk;
203
206
  }
204
207
  async createMap(e, a = {}) {
205
- const t = new k(), o = () => {
208
+ const t = new k(), s = () => {
206
209
  for (const n of t.unwatchFn)
207
210
  n();
208
211
  t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
209
212
  };
210
- return new Promise((n, s) => {
213
+ return new Promise((n, o) => {
211
214
  S(async () => {
212
215
  await this.loadMapbox();
213
216
  const i = () => {
214
217
  if (!e.value)
215
218
  throw new Error("Missing HTML element");
216
219
  const c = d(e, () => {
217
- e.value || (o(), c());
220
+ e.value || (s(), c());
218
221
  });
219
222
  t.map = new this.mapboxgl.Map({
220
223
  container: e.value,
@@ -226,7 +229,7 @@ class K {
226
229
  };
227
230
  a.onMounted ? a.onMounted(i) : i();
228
231
  }), L(() => {
229
- o();
232
+ s();
230
233
  });
231
234
  });
232
235
  }
package/lib/providers/maplibre.js CHANGED
@@ -49,14 +49,17 @@ class k {
49
49
  return;
50
50
  }
51
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) => {
52
+ const t = d(() => (e.value || []).map((s) => {
53
+ if (!s.propsId) {
54
+ const { data: n, ...o } = s;
55
+ s.propsId = JSON.stringify(o);
56
+ }
57
+ return s;
58
+ }), async (s, n) => {
59
+ const o = n || [], i = s || [], c = i.filter((r, h) => {
57
60
  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));
61
+ return r !== o[h] && r.propsId === ((u = o[h]) == null ? void 0 : u.propsId);
62
+ }), 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));
60
63
  for (const r of c)
61
64
  this.map.getSource(r.id).setData(r.data);
62
65
  await f();
@@ -80,8 +83,8 @@ class k {
80
83
  return;
81
84
  }
82
85
  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]);
86
+ const t = d(e, async (s, n) => {
87
+ const o = n || [], i = s || [], c = i.filter((l, r) => l !== o[r]), p = o.filter((l, r) => l !== i[r]);
85
88
  for (const l of p)
86
89
  this.map.removeLayer(l.id), this.map.getSource(l.id) && this.map.removeSource(l.id);
87
90
  await f();
@@ -109,12 +112,12 @@ class D {
109
112
  get Map() {
110
113
  return m(
111
114
  (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) => {
115
+ const s = v(null), { options: n, layers: o, sources: i } = y(e), c = b(null);
116
+ return g("mapboxMap", c), this.createMap(s, n.value).then((p) => {
114
117
  c.value = p, d(n, () => {
115
118
  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 : []);
119
+ }, { once: !0 }), p.watchSources(i, n.value.watchSourcesOptions), p.watchLayers(o, n.value.watchLayersOptions), a("loaded", p);
120
+ }), () => x("div", { ref: s }, c.value ? t : []);
118
121
  },
119
122
  {
120
123
  props: {
@@ -138,11 +141,11 @@ class D {
138
141
  get DeckGLOverlay() {
139
142
  return m(
140
143
  (e, { emit: a, slots: t }) => {
141
- const { options: o, layers: n } = y(e), s = M("mapboxMap");
142
- if (!s || !s.value)
144
+ const { options: s, layers: n } = y(e), o = M("mapboxMap");
145
+ if (!o || !o.value)
143
146
  throw new Error("map should exist");
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);
147
+ return o.value.setDeckGLOverlay(s.value).then((i) => {
148
+ i.watchOptions(s, s.value.watchOptionsOptions), i.watchLayers(n, s.value.watchLayersOptions), a("loaded", i);
146
149
  }), () => {
147
150
  };
148
151
  },
@@ -186,11 +189,11 @@ class D {
186
189
  };
187
190
  }
188
191
  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];
192
+ const t = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), s = [.../* @__PURE__ */ new Set([...this.services, ...e])];
193
+ this.services = s;
194
+ const n = await Promise.all(this.services.map((o) => this.sdk[o] || this.servicesLoader[o]().then((i) => i.default(t))));
195
+ for (const [o, i] of this.services.entries())
196
+ this.sdk[i] = n[o];
194
197
  }
195
198
  async getSDK(e) {
196
199
  let a = {};
@@ -202,19 +205,19 @@ class D {
202
205
  return this.sdk;
203
206
  }
204
207
  async createMap(e, a = {}) {
205
- const t = new k(), o = () => {
208
+ const t = new k(), s = () => {
206
209
  for (const n of t.unwatchFn)
207
210
  n();
208
211
  t.unwatchFn = [], t.map && (t.map.remove(), t.map = null);
209
212
  };
210
- return new Promise((n, s) => {
213
+ return new Promise((n, o) => {
211
214
  S(async () => {
212
215
  await this.loadMapbox();
213
216
  const i = () => {
214
217
  if (!e.value)
215
218
  throw new Error("Missing HTML element");
216
219
  const c = d(e, () => {
217
- e.value || (o(), c());
220
+ e.value || (s(), c());
218
221
  });
219
222
  t.map = new this.mapboxgl.Map({
220
223
  container: e.value,
@@ -226,7 +229,7 @@ class D {
226
229
  };
227
230
  a.onMounted ? a.onMounted(i) : i();
228
231
  }), L(() => {
229
- o();
232
+ s();
230
233
  });
231
234
  });
232
235
  }
package/lib/yappkit-map.js CHANGED
@@ -51,8 +51,11 @@ class N {
51
51
  }
52
52
  this.watching.sources = !0;
53
53
  const t = d(() => (e.value || []).map((s) => {
54
- const { data: r, ...o } = s;
55
- return s.propsId = JSON.stringify(o), s;
54
+ if (!s.propsId) {
55
+ const { data: r, ...o } = s;
56
+ s.propsId = JSON.stringify(o);
57
+ }
58
+ return s;
56
59
  }), async (s, r) => {
57
60
  const o = r || [], n = s || [], i = n.filter((c, u) => {
58
61
  var m;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yappkit/front-module-map",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "description": "@yappkit/front module for map",
5
5
  "module": "./lib/yappkit-map.js",
6
6
  "main": "./lib/yappkit-map.js",