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() {

app/components/map/map.client.vue

@@ -2,12 +2,13 @@
     <ClientOnly>
         <MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
             <MglNavigationControl />
-            <MapLines
-                v-for="r of shownLines"
-                :key="r.route.id"
-                :route-with-line="r"
-            />
-            <MapClusters v-if="shownClusters" :clusters="shownClusters" />
+            <template v-for="r of shownLines" :key="r.route.id">
+                <MapLines :route-with-line="r" />
+                <MapClusters
+                    v-if="shownClusters"
+                    :clusters="shownClusters"
+                    :route="r.route"
+            /></template>
         </MglMap>
     </ClientOnly>
 </template>
@@ -29,14 +30,10 @@ const store = useMresoStore();
 await store.fetchData();
 const shownClusters = ref<FeatureCollection<Point> | null>(null);
 
-const { selectedRoutesId } = defineProps<{
-    selectedRoutesId: string[];
-}>();
-
 const map = useMap("main");
 watchEffect(async () => {
     const allClusters = [];
-    for (const routeId of selectedRoutesId) {
+    for (const routeId of store.selectedRouteIds) {
         const apiClusters = await $fetch<Cluster[]>(
             `https://data.mobilites-m.fr/api/routers/default/index/routes/${routeId}/clusters`,
         );
@@ -80,7 +77,7 @@ watchEffect(async () => {
 
 const shownLines = computed(() => {
     const l: { route: Route; line: Feature<MultiLineString> }[] = [];
-    for (const routeId of selectedRoutesId) {
+    for (const routeId of store.selectedRouteIds) {
         const route = store.routesById[routeId];
         if (!route) {
             continue;

app/components/sidebar/container.vue

@@ -4,7 +4,7 @@
             v-for="route of store.routes"
             :key="route.id"
             :class="{
-                selected: selectedRoutesId.includes(route.id),
+                selected: store.selectedRouteIds.includes(route.id),
                 lineLabel: true,
             }"
             :style="{
@@ -21,10 +21,6 @@
 <script setup lang="ts">
 const store = useMresoStore();
 
-const { selectedRoutesId } = defineProps<{
-    selectedRoutesId: string[];
-}>();
-
 function selectRoute(routeId: string) {
     navigateTo(`/lines/${routeId}`);
 }