@yappkit/front-module-map 0.1.2 → 0.1.3

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/mapbox-gl.css +1 -0
  2. package/lib/mapbox-gl.js +30206 -0
  3. package/lib/providers/mapbox.js +28 -28
  4. package/lib/providers/maplibre.js +28 -28
  5. package/lib/yappkit-map.js +7 -7
  6. package/package.json +8 -3
package/lib/providers/mapbox.js CHANGED
@@ -3,7 +3,7 @@ class S {
3
3
  constructor() {
4
4
  this.overlay = null, this.watching = { layers: !1 };
5
5
  }
6
- watchLayers(t, a = {}) {
6
+ watchLayers(t, s = {}) {
7
7
  if (!this.overlay)
8
8
  throw new Error("overlay should be set");
9
9
  if (this.watching.layers) {
@@ -12,22 +12,22 @@ class S {
12
12
  }
13
13
  this.watching.layers = !0, d(t, () => {
14
14
  this.overlay.setProps({ layers: t.value });
15
- }, a);
15
+ }, s);
16
16
  }
17
17
  }
18
18
  class k {
19
19
  constructor() {
20
20
  this.map = null, this.watching = { sources: !1, layers: !1 };
21
21
  }
22
- watchSources(t, a = {}) {
22
+ watchSources(t, s = {}) {
23
23
  if (!this.map)
24
24
  throw new Error("map should be set");
25
25
  if (this.watching.sources) {
26
26
  console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
27
27
  return;
28
28
  }
29
- this.watching.sources = !0, d(t, (s, r) => {
30
- const o = [...r || []], i = [...s || []], 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));
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
31
  for (const e of p)
32
32
  w(() => {
33
33
  this.map.removeSource(e.id);
@@ -36,30 +36,30 @@ class k {
36
36
  const u = { ...e };
37
37
  delete u.id, this.map.addSource(e.id, u);
38
38
  }
39
- }, a);
39
+ }, s);
40
40
  }
41
- watchLayers(t, a = {}) {
41
+ watchLayers(t, s = {}) {
42
42
  if (!this.map)
43
43
  throw new Error("map should be set");
44
44
  if (this.watching.layers) {
45
45
  console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
46
46
  return;
47
47
  }
48
- this.watching.layers = !0, d(t, (s, r) => {
49
- const o = [...r || []], i = [...s || []], 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));
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
50
  for (const e of p)
51
51
  this.map.removeLayer(e.id);
52
52
  for (const e of c)
53
53
  w(() => {
54
54
  this.map.addLayer(e);
55
55
  });
56
- }, a);
56
+ }, s);
57
57
  }
58
58
  async setDeckGLOverlay(t = {}) {
59
59
  if (!this.map)
60
60
  throw new Error("map should be set");
61
- const { MapboxOverlay: a } = await import("@deck.gl/mapbox"), s = new S();
62
- return s.overlay = new a(t), this.map.addControl(s.overlay), s;
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;
63
63
  }
64
64
  }
65
65
  class D {
@@ -70,11 +70,11 @@ class D {
70
70
  }
71
71
  get Map() {
72
72
  return m(
73
- (t, { emit: a, slots: s }) => {
73
+ (t, { emit: s, slots: a }) => {
74
74
  const r = f(null), { options: o, layers: i, sources: n } = y(t), l = v(null);
75
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 }), a("loaded", c);
77
- }), () => g("div", { ref: r }, l.value ? s : []);
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 : []);
78
78
  },
79
79
  {
80
80
  props: {
@@ -96,12 +96,12 @@ class D {
96
96
  }
97
97
  get DeckGLOverlay() {
98
98
  return m(
99
- (t, { emit: a, slots: s }) => {
99
+ (t, { emit: s, slots: a }) => {
100
100
  const { options: r, layers: o } = y(t), i = x("mapboxMap");
101
101
  if (!i || !i.value)
102
102
  throw new Error("map should exist");
103
103
  return i.value.setDeckGLOverlay(r.value).then((n) => {
104
- n.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), a("loaded", n);
104
+ n.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), s("loaded", n);
105
105
  }), () => {
106
106
  };
107
107
  },
@@ -120,7 +120,7 @@ class D {
120
120
  );
121
121
  }
122
122
  async loadMapbox() {
123
- const t = await import("mapbox-gl");
123
+ const t = await import("../mapbox-gl.js").then((s) => s.mapboxGl);
124
124
  this.mapboxgl = t;
125
125
  }
126
126
  get servicesLoader() {
@@ -142,32 +142,32 @@ class D {
142
142
  };
143
143
  }
144
144
  async loadMapboxSDK() {
145
- const a = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), s = await Promise.all(this.services.map((r) => this.servicesLoader[r]().then((o) => o.default(a))));
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
146
  for (const [r, o] of this.services.entries())
147
- this.sdk[o] = s[r];
147
+ this.sdk[o] = a[r];
148
148
  }
149
149
  async getSDK() {
150
150
  return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
151
151
  }
152
- async createMap(t, a = {}) {
153
- const s = new k();
152
+ async createMap(t, s = {}) {
153
+ const a = new k();
154
154
  return new Promise((r, o) => {
155
155
  M(async () => {
156
156
  await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
157
157
  const i = () => {
158
158
  if (!t.value)
159
159
  throw new Error("Missing HTML element");
160
- s.map = new this.mapboxgl.Map({
160
+ a.map = new this.mapboxgl.Map({
161
161
  container: t.value,
162
162
  accessToken: this.apiKey,
163
- ...a
164
- }), s.map.on("load", () => {
165
- r(s);
163
+ ...s
164
+ }), a.map.on("load", () => {
165
+ r(a);
166
166
  });
167
167
  };
168
- a.onMounted ? a.onMounted(i) : i();
168
+ s.onMounted ? s.onMounted(i) : i();
169
169
  }), L(() => {
170
- s.map && (s.map.remove(), s.map = null);
170
+ a.map && (a.map.remove(), a.map = null);
171
171
  });
172
172
  });
173
173
  }
package/lib/providers/maplibre.js CHANGED
@@ -3,7 +3,7 @@ class S {
3
3
  constructor() {
4
4
  this.overlay = null, this.watching = { layers: !1 };
5
5
  }
6
- watchLayers(t, a = {}) {
6
+ watchLayers(t, s = {}) {
7
7
  if (!this.overlay)
8
8
  throw new Error("overlay should be set");
9
9
  if (this.watching.layers) {
@@ -12,22 +12,22 @@ class S {
12
12
  }
13
13
  this.watching.layers = !0, h(t, () => {
14
14
  this.overlay.setProps({ layers: t.value });
15
- }, a);
15
+ }, s);
16
16
  }
17
17
  }
18
18
  class k {
19
19
  constructor() {
20
20
  this.map = null, this.watching = { sources: !1, layers: !1 };
21
21
  }
22
- watchSources(t, a = {}) {
22
+ watchSources(t, s = {}) {
23
23
  if (!this.map)
24
24
  throw new Error("map should be set");
25
25
  if (this.watching.sources) {
26
26
  console.warn("No need to call MapboxMap.watchSources(). sources are already being watched");
27
27
  return;
28
28
  }
29
- this.watching.sources = !0, h(t, (s, r) => {
30
- const o = [...r || []], i = [...s || []], 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));
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
31
  for (const e of d)
32
32
  w(() => {
33
33
  this.map.removeSource(e.id);
@@ -36,30 +36,30 @@ class k {
36
36
  const u = { ...e };
37
37
  delete u.id, this.map.addSource(e.id, u);
38
38
  }
39
- }, a);
39
+ }, s);
40
40
  }
41
- watchLayers(t, a = {}) {
41
+ watchLayers(t, s = {}) {
42
42
  if (!this.map)
43
43
  throw new Error("map should be set");
44
44
  if (this.watching.layers) {
45
45
  console.warn("No need to call MapboxMap.watchLayers(). layers are already being watched");
46
46
  return;
47
47
  }
48
- this.watching.layers = !0, h(t, (s, r) => {
49
- const o = [...r || []], i = [...s || []], 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));
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
50
  for (const e of d)
51
51
  this.map.removeLayer(e.id);
52
52
  for (const e of c)
53
53
  w(() => {
54
54
  this.map.addLayer(e);
55
55
  });
56
- }, a);
56
+ }, s);
57
57
  }
58
58
  async setDeckGLOverlay(t = {}) {
59
59
  if (!this.map)
60
60
  throw new Error("map should be set");
61
- const { MapboxOverlay: a } = await import("@deck.gl/mapbox"), s = new S();
62
- return s.overlay = new a(t), this.map.addControl(s.overlay), s;
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;
63
63
  }
64
64
  }
65
65
  class O {
@@ -70,11 +70,11 @@ class O {
70
70
  }
71
71
  get Map() {
72
72
  return m(
73
- (t, { emit: a, slots: s }) => {
73
+ (t, { emit: s, slots: a }) => {
74
74
  const r = f(null), { options: o, layers: i, sources: n } = y(t), l = v(null);
75
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 }), a("loaded", c);
77
- }), () => x("div", { ref: r }, l.value ? s : []);
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 : []);
78
78
  },
79
79
  {
80
80
  props: {
@@ -96,12 +96,12 @@ class O {
96
96
  }
97
97
  get DeckGLOverlay() {
98
98
  return m(
99
- (t, { emit: a, slots: s }) => {
99
+ (t, { emit: s, slots: a }) => {
100
100
  const { options: r, layers: o } = y(t), i = g("mapboxMap");
101
101
  if (!i || !i.value)
102
102
  throw new Error("map should exist");
103
103
  return i.value.setDeckGLOverlay(r.value).then((n) => {
104
- n.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), a("loaded", n);
104
+ n.watchLayers(o, r.value.watchLayersOptions || { immediate: !0 }), s("loaded", n);
105
105
  }), () => {
106
106
  };
107
107
  },
@@ -120,7 +120,7 @@ class O {
120
120
  );
121
121
  }
122
122
  async loadMapbox() {
123
- const t = await import("mapbox-gl");
123
+ const t = await import("../mapbox-gl.js").then((s) => s.mapboxGl);
124
124
  this.mapboxgl = t;
125
125
  }
126
126
  get servicesLoader() {
@@ -142,32 +142,32 @@ class O {
142
142
  };
143
143
  }
144
144
  async loadMapboxSDK() {
145
- const a = (await import("@mapbox/mapbox-sdk")).default({ accessToken: this.apiKey }), s = await Promise.all(this.services.map((r) => this.servicesLoader[r]().then((o) => o.default(a))));
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
146
  for (const [r, o] of this.services.entries())
147
- this.sdk[o] = s[r];
147
+ this.sdk[o] = a[r];
148
148
  }
149
149
  async getSDK() {
150
150
  return await (Object.keys(this.sdk).length ? Promise.resolve() : this.loadMapboxSDK()), this.sdk;
151
151
  }
152
- async createMap(t, a = {}) {
153
- const s = new k();
152
+ async createMap(t, s = {}) {
153
+ const a = new k();
154
154
  return new Promise((r, o) => {
155
155
  M(async () => {
156
156
  await (this.mapboxgl ? Promise.resolve() : this.loadMapbox());
157
157
  const i = () => {
158
158
  if (!t.value)
159
159
  throw new Error("Missing HTML element");
160
- s.map = new this.mapboxgl.Map({
160
+ a.map = new this.mapboxgl.Map({
161
161
  container: t.value,
162
162
  accessToken: this.apiKey,
163
- ...a
164
- }), s.map.on("load", () => {
165
- r(s);
163
+ ...s
164
+ }), a.map.on("load", () => {
165
+ r(a);
166
166
  });
167
167
  };
168
- a.onMounted ? a.onMounted(i) : i();
168
+ s.onMounted ? s.onMounted(i) : i();
169
169
  }), L(() => {
170
- s.map && (s.map.remove(), s.map = null);
170
+ a.map && (a.map.remove(), a.map = null);
171
171
  });
172
172
  });
173
173
  }
package/lib/yappkit-map.js CHANGED
@@ -121,7 +121,7 @@ class A {
121
121
  );
122
122
  }
123
123
  async loadMapbox() {
124
- const e = await import("mapbox-gl");
124
+ const e = await import("./mapbox-gl.js").then((a) => a.mapboxGl);
125
125
  this.mapboxgl = e;
126
126
  }
127
127
  get servicesLoader() {
@@ -200,7 +200,7 @@ class R {
200
200
  return t.overlay = new a(e), t.overlay.setMap(this.map), t;
201
201
  }
202
202
  }
203
- class O {
203
+ class x {
204
204
  constructor(e) {
205
205
  if (this.apiKey = e.apiKey, !this.apiKey)
206
206
  throw new Error("apiKey is required");
@@ -355,7 +355,7 @@ class V {
355
355
  }, a);
356
356
  }
357
357
  }
358
- class x {
358
+ class O {
359
359
  constructor(e) {
360
360
  this.deckgl = null;
361
361
  }
@@ -439,10 +439,10 @@ const U = {
439
439
  normalizeRoute: b
440
440
  }, q = {
441
441
  mapbox: A,
442
- google: O,
443
- "google-maps": O,
444
- deckgl: x,
445
- "deck-gl": x
442
+ google: x,
443
+ "google-maps": x,
444
+ deckgl: O,
445
+ "deck-gl": O
446
446
  };
447
447
  class z {
448
448
  constructor(e = {}) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yappkit/front-module-map",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "@yappkit/front module for map",
5
5
  "module": "./lib/yappkit-map.js",
6
6
  "main": "./lib/yappkit-map.js",
@@ -9,6 +9,12 @@
9
9
  ".": {
10
10
  "import": "./lib/yappkit-map.js"
11
11
  },
12
+ "./mapboxgl": {
13
+ "import": "./lib/mapbox-gl.js"
14
+ },
15
+ "./mapboxgl.css": {
16
+ "import": "./lib/mapbox-gl.css"
17
+ },
12
18
  "./searoute": {
13
19
  "import": "./lib/searoute.js"
14
20
  },
@@ -34,8 +40,7 @@
34
40
  "@turf/turf": "^6.5.0",
35
41
  "deck.gl": "^8.9.34",
36
42
  "geojson-path-finder": "2.0.2",
37
- "mapbox-gl": "^3.1.2",
38
43
  "maplibre-gl": "^4.0.0",
39
- "vue": "^3.4.15"
44
+ "vue": "^3.4.18"
40
45
  }
41
46
  }