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!);
 }