wip

app/components/map/clusters.client.vue

@@ -14,7 +14,7 @@
             />
         </mgl-geo-json-source>
 
-        <div ref="popup">
+        <div ref="popup-div">
             <div v-for="data in popupData" :key="data.pattern.id">
                 Direction {{ data.pattern.lastStopName }}
                 <div v-for="time in data.times" :key="time.tripId">
@@ -41,13 +41,19 @@ const cluster_label = {
     "text-field": ["get", "id"],
 };
 const map = useMap("main");
-const popup = useTemplateRef("popup");
+const popupDiv = useTemplateRef("popup-div");
 
-const { clusters } = defineProps<{
+const { clusters, route } = defineProps<{
     clusters: FeatureCollection<Point>;
+    route: Route;
 }>();
 
 const popupData = ref<StopTimesPattern[]>([]);
+const popup = new Popup().setMaxWidth("500px").addTo(map.map!);
+
+onUnmounted(() => {
+    popup.remove();
+});
 
 async function clusterClick(e: FeatureCollection) {
     popupData.value = [];
@@ -59,28 +65,22 @@ async function clusterClick(e: FeatureCollection) {
     if (!code) {
         return;
     }
+    let data;
     const coordinates = feature.geometry.coordinates.slice();
-    const data = await $fetch<FeatureCollection<Point>>(
-        `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
-    );
-    new Popup()
-        .setLngLat(coordinates)
-        .setHTML(
-            `Cluster code : ${feature.properties.code}<br/>This cluster contains ${data.features.length} stops`,
-        )
-        .setDOMContent(popup.value)
-        .setMaxWidth("500px")
-        .addTo(map.map!);
-
-    popupData.value = await $fetch<StopTimesPattern[]>(
-        `https://data.mobilites-m.fr/api/routers/default/index/clusters/${feature.properties.code}/stoptimes?showCancelledTrips=false`,
-        {
-            headers: {
-                origin: "PersonalProjectMreso",
+    [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",
+                },
             },
-        },
-    );
-    console.log(popupData.value);
+        ),
+    ]);
+    popup.setDOMContent(popupDiv.value).setLngLat(coordinates).addTo(map.map!);
 }
 
 function clusterEnter() {