add hover and click events on clusters

app/components/map.client.vue

@@ -10,6 +10,9 @@
                 <mgl-circle-layer
                     layer-id="clusters_dots"
                     :paint="cluster_paint"
+                    @click="clusterClick"
+                    @mouseenter="clusterEnter"
+                    @mouseleave="clusterLeave"
                 />
                 <MglSymbolLayer
                     layer-id="clusters_labels"
@@ -43,7 +46,14 @@
 </template>
 
 <script setup lang="ts">
-import type { FeatureCollection, MultiLineString, Point } from "geojson";
+import type {
+    Feature,
+    FeatureCollection,
+    MultiLineString,
+    Point,
+} from "geojson";
+import { useMap } from "@indoorequal/vue-maplibre-gl";
+import { LngLat, LngLatBounds, Popup } from "maplibre-gl";
 const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
 const center = [5.735, 45.185];
 const zoom = 12;
@@ -51,10 +61,10 @@ const cluster_paint = {
     "circle-radius": 5,
     "circle-color": "#FF0000",
 };
-
 const cluster_label = {
     "text-field": ["get", "id"],
 };
+const map = useMap();
 
 const selectedRoute = ref<string>("");
 const selectedStops = ref<string[]>([]);
@@ -74,12 +84,15 @@ const clustersData = computed<FeatureCollection<Point>>(() => {
 const linesRequest =
     await useFetch<FeatureCollection<MultiLineString>>("/lignes.json");
 const transport_lines = computed(() => linesRequest.data.value?.features ?? []);
+const selectedLine = computed(() =>
+    transport_lines.value.find(
+        (f) => f.properties?.id == selectedRoute.value.replace(":", "_"),
+    ),
+);
 const linesData = computed<FeatureCollection<MultiLineString>>(() => {
     return {
         type: "FeatureCollection",
-        features: transport_lines.value.filter(
-            (f) => f.properties?.id == selectedRoute.value.replace(":", "_"),
-        ),
+        features: !selectedLine.value ? [] : [selectedLine.value],
     };
 });
 
@@ -94,7 +107,45 @@ async function selectRoute(lineId: string) {
     for (const stop of data) {
         stops.push(stop.id);
     }
+
     selectedStops.value = stops;
+    console.log(data[0]);
+    const bounds = data.reduce(
+        (bounds, point) => {
+            return bounds.extend(new LngLat(point.lon, point.lat));
+        },
+        new LngLatBounds([data[0].lon, data[0].lat, data[0].lon, data[0].lat]),
+    );
+
+    map.map.fitBounds(bounds, {
+        padding: 20,
+    });
+}
+
+async function clusterClick(e) {
+    const feature: Feature = e.features[0];
+    const code = feature.properties?.code;
+    if (!code) {
+        return;
+    }
+    const coordinates = feature.geometry.coordinates.slice();
+    const data = await $fetch<FeatureCollection<Point>>(
+        `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
+    );
+    if (!map.map) {
+        return;
+    }
+    new Popup()
+        .setLngLat(coordinates)
+        .setHTML(`This cluster contains ${data.features.length} stops`)
+        .addTo(map.map);
+}
+
+function clusterEnter() {
+    map.map.getCanvas().style.cursor = "pointer";
+}
+function clusterLeave() {
+    map.map.getCanvas().style.cursor = "";
 }
 </script>