wip

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;