[Feature] Add MapboxMap, MapboxMarker, MapboxPopup components

packages/ui/organisms/MapboxMap/MapboxMap.ts

@@ -0,0 +1,76 @@
+import { Base, BaseProps } from '@studiometa/js-toolkit';
+import mapbox from 'mapbox-gl';
+import { MapboxMarker } from './MapboxMarker.js';
+import { MapboxPopup } from './MapboxPopup.js';
+
+export interface MapboxMapProps extends BaseProps {
+  $children: {
+    MapboxMarker: MapboxMarker[];
+  };
+  $options: {
+    accessToken: string;
+    zoom: number;
+    center: [number, number];
+  };
+}
+
+export class MapboxMap <T extends BaseProps = BaseProps> extends Base<T & MapboxMapProps> {
+  static config = {
+    name: 'MapboxMap',
+    emits: ['map-load'],
+    options: {
+      accessToken: String,
+      zoom: Number,
+      center: { type: Array, default: () => [0, 0] },
+    },
+    components: {
+      MapboxMarker: (mapboxMap) => {
+        return new Promise((resolve) => {
+          if (mapboxMap.isLoaded) {
+            resolve(MapboxMarker);
+          } else {
+            mapboxMap.$on('map-load', () => {
+              resolve(MapboxMarker);
+            });
+          }
+        });
+      },
+      MapboxPopup: (mapboxMap) => {
+        return new Promise((resolve) => {
+          if (mapboxMap.isLoaded) {
+            resolve(MapboxPopup);
+          } else {
+            mapboxMap.$on('map-load', () => {
+              resolve(MapboxPopup);
+            });
+          }
+        });
+      },
+    },
+  };
+
+  map: mapbox.Map | null = null;
+
+  isLoaded = false;
+
+  get mapboxOptions() {
+    return {
+      container: this.$el,
+      center: this.$options.center,
+      accessToken: this.$options.accessToken,
+      zoom: this.$options.zoom,
+    };
+  }
+
+  async mounted() {
+    this.map = new mapbox.Map(this.mapboxOptions);
+    this.map.on('load', () => {
+      this.isLoaded = true;
+      this.$emit('map-load');
+    });
+  }
+
+  destroyed() {
+    this.map?.remove();
+  }
+}

packages/ui/organisms/MapboxMap/MapboxMarker.ts

@@ -0,0 +1,41 @@
+import { Base, getClosestParent } from '@studiometa/js-toolkit';
+import mapbox from 'mapbox-gl';
+import { MapboxMap } from './MapboxMap.js';
+
+export class MapboxMarker extends Base {
+  static config = {
+    name: 'MapboxMarker',
+    options: {
+      lng: Number,
+      lat: Number,
+      // Marker options. (https://docs.mapbox.com/mapbox-gl-js/api/markers#marker)
+      markerOptions: Object,
+    },
+  };
+
+  marker: mapbox.Marker | null = null;
+
+  get map() {
+    return getClosestParent(this, MapboxMap)?.map;
+  }
+
+  get markerOptions() {
+    if (this.$options.markerOptions) {
+      return this.$options.markerOptions;
+    }
+
+    return {};
+  }
+
+  get lngLat() {
+    return [this.$options.lng, this.$options.lat];
+  }
+
+  mounted() {
+    this.marker = new mapbox.Marker(this.markerOptions).setLngLat(this.lngLat).addTo(this.map);
+  }
+
+  destroyed() {
+    this.marker?.remove();
+  }
+}

packages/ui/organisms/MapboxMap/MapboxPopup.ts

@@ -0,0 +1,45 @@
+import { Base, getClosestParent } from '@studiometa/js-toolkit';
+import mapbox from 'mapbox-gl';
+import { MapboxMap } from './MapboxMap.js';
+
+export class MapboxPopup extends Base {
+  static config = {
+    name: 'MapboxPopup',
+    options: {
+      lng: Number,
+      lat: Number,
+      // Marker options. (https://docs.mapbox.com/mapbox-gl-js/api/markers#popup)
+      popupOptions: Object,
+    },
+  };
+
+  popup: mapbox.Popup | null = null;
+
+  get map() {
+    return getClosestParent(this, MapboxMap)?.map;
+  }
+
+  get popupOptions() {
+    if (this.$options.markerOptions) {
+      return this.$options.markerOptions;
+    }
+
+    return {};
+  }
+
+  get lngLat() {
+    return [this.$options.lng, this.$options.lat];
+  }
+
+  mounted() {
+    this.popup = new mapbox.Popup()
+      .setLngLat(this.lngLat)
+      .setHTML('<h1>Hello World!</h1>')
+      .setMaxWidth('300px')
+      .addTo(this.map);
+  }
+
+  destroyed() {
+    this.popup?.remove();
+  }
+}

packages/ui/organisms/MapboxMap/index.ts

@@ -0,0 +1,3 @@
+export * from './MapboxMap.js';
+export * from './MapboxMarker.js';
+export * from './MapboxPopup.js';

packages/ui/organisms/MapboxMap/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@studiometa/ui-mapbox-map",
+  "type": "module",
+  "version": "0.0.1"
+}

packages/ui/organisms/index.ts

@@ -1 +1,2 @@
 export * from './Frame/index.js';
+export * from './MapboxMap/index.js';

packages/ui/package.json

@@ -30,6 +30,8 @@
   "homepage": "https://github.com/studiometa/ui#readme",
   "dependencies": {
     "@studiometa/js-toolkit": "^2.10.2",
-    "deepmerge": "^4.2.2"
+    "@types/mapbox-gl": "^3.1.0",
+    "deepmerge": "^4.2.2",
+    "mapbox-gl": "^3.2.0"
   }
 }