feat: add icon instead of red circle

app/components/map/clusters.client.vue

@@ -8,6 +8,19 @@
                 @mouseenter="clusterEnter"
                 @mouseleave="clusterLeave"
             />
+
+            <MglSymbolLayer
+                layer-id="cluster_icon"
+                :layout="{
+                    'icon-image': 'cluster',
+                    'icon-size': 0.1,
+                    'icon-overlap': 'always',
+                    'text-overlap': 'always',
+                }"
+                @click="clusterClick"
+                @mouseenter="clusterEnter"
+                @mouseleave="clusterLeave"
+            />
             <MglSymbolLayer
                 layer-id="clusters_labels"
                 :layout="cluster_label"
@@ -33,10 +46,7 @@
 import type { FeatureCollection, Point } from "geojson";
 import { useMap } from "@indoorequal/vue-maplibre-gl";
 import { Popup } from "maplibre-gl";
-const cluster_paint = {
-    "circle-radius": 5,
-    "circle-color": "#FF0000",
-};
+
 const cluster_label = {
     "text-field": ["get", "id"],
 };
@@ -48,6 +58,11 @@ const { clusters, route } = defineProps<{
     route: Route;
 }>();
 
+const cluster_paint = {
+    "circle-radius": 18,
+    "circle-color": "#" + route.color,
+};
+
 const popupData = ref<StopTimesPattern[]>([]);
 const popup = new Popup().setMaxWidth("500px").addTo(map.map!);
 
@@ -65,21 +80,23 @@ async function clusterClick(e: FeatureCollection) {
     if (!code) {
         return;
     }
-    let data;
+    // let data;
     const coordinates = feature.geometry.coordinates.slice();
-    [data, popupData.value] = await Promise.all([
-        $fetch<FeatureCollection<Point>>(
-            `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
-        ),
-        $fetch<StopTimesPattern[]>(
-            `https://data.mobilites-m.fr/api/routers/default/index/clusters/${feature.properties.code}/stoptimes?showCancelledTrips=false&route=${route.id}`,
-            {
-                headers: {
-                    origin: "PersonalProjectMreso",
-                },
+    // [data, popupData.value] = await Promise.all([
+    //     $fetch<FeatureCollection<Point>>(
+    //         `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
+    //     ),
+
+    // ]);
+
+    popupData.value = await $fetch<StopTimesPattern[]>(
+        `https://data.mobilites-m.fr/api/routers/default/index/clusters/${feature.properties.code}/stoptimes?showCancelledTrips=false&route=${route.id}`,
+        {
+            headers: {
+                origin: "PersonalProjectMreso",
             },
-        ),
-    ]);
+        },
+    );
     popup.setDOMContent(popupDiv.value).setLngLat(coordinates).addTo(map.map!);
 }
 

app/components/map/map.client.vue

@@ -2,6 +2,7 @@
     <ClientOnly>
         <MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
             <MglNavigationControl />
+            <MglImage id="cluster" :image="image" />
             <template v-for="r of shownLines" :key="r.route.id">
                 <MapLines :route-with-line="r" />
                 <MapClusters
@@ -20,6 +21,7 @@ import type {
     MultiLineString,
     Point,
 } from "geojson";
+
 import { useMap } from "@indoorequal/vue-maplibre-gl";
 import { LngLat, LngLatBounds } from "maplibre-gl";
 const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
@@ -29,7 +31,7 @@ const zoom = 12;
 const store = useMresoStore();
 await store.fetchData();
 const shownClusters = ref<FeatureCollection<Point> | null>(null);
-
+const image = useSvgImage();
 const map = useMap("main");
 watchEffect(async () => {
     const allClusters = [];
@@ -61,7 +63,7 @@ watchEffect(async () => {
         // .filter((c) => stops.includes(c.properties?.id))
         .reduce(
             (bounds, coords) => {
-                return bounds.extend(new LngLat(coords[0], coords[1]));
+                return bounds.extend(new LngLat(coords[0]!, coords[1]!));
             },
             new LngLatBounds([
                 firstPoint.geometry.coordinates[0]!,