Use pinia

app/components/map/map.client.vue

@@ -1,16 +1,13 @@
 <template>
     <ClientOnly>
-        <MglMap :map-style="style" :center="center" :zoom="zoom" height="100%">
+        <MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
             <MglNavigationControl />
             <MapLines
-                v-for="r of routeWithLines"
+                v-for="r of shownLines"
                 :key="r.route.id"
                 :route-with-line="r"
             />
-            <MapClusters
-                v-if="clustersData.features"
-                :clusters="clustersData"
-            />
+            <MapClusters v-if="shownClusters" :clusters="shownClusters" />
         </MglMap>
     </ClientOnly>
 </template>
@@ -28,66 +25,47 @@ const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
 const center = new LngLat(5.735, 45.185);
 const zoom = 12;
 
-const map = useMap();
+const store = useMresoStore();
+await store.fetchData();
+const shownClusters = ref<FeatureCollection<Point> | null>(null);
 
-const selectedRoutes = ref<string[]>([]);
-const selectedStops = ref<string[]>([]);
+const { selectedRoutesId } = defineProps<{
+    selectedRoutesId: string[];
+}>();
 
-const clustersRequest =
-    await useFetch<FeatureCollection<Point>>("/clusters.json");
-const clusters = computed(() => clustersRequest.data.value?.features ?? []);
-const clustersData = computed<FeatureCollection<Point>>(() => {
-    return {
-        type: "FeatureCollection",
-        features: clusters.value.filter((f) =>
-            selectedStops.value.includes(f.properties?.id),
-        ),
-    };
-});
-
-const linesRequest =
-    await useFetch<FeatureCollection<MultiLineString>>("/lignes.json");
-const transport_lines = computed(() => linesRequest.data.value?.features ?? []);
-
-const routesRequest = await useFetch<Route[]>("/routes.json");
-
-async function selectRoute(routeId: string) {
-    if (!map.map) {
-        console.error("Map is not yet initialized ! aborting");
-        return;
-    }
-    selectedRoutes.value = [routeId];
-    const stops: string[] = [];
-    for (const route of selectedRoutes.value) {
-        const data = await $fetch<Cluster[]>(
-            `https://data.mobilites-m.fr/api/routers/default/index/routes/${route.replace("_", ":")}/clusters`,
+const map = useMap("main");
+watchEffect(async () => {
+    const allClusters = [];
+    for (const routeId of selectedRoutesId) {
+        const apiClusters = await $fetch<Cluster[]>(
+            `https://data.mobilites-m.fr/api/routers/default/index/routes/${routeId}/clusters`,
         );
-
-        for (const stop of data) {
-            stops.push(stop.id);
-        }
+        allClusters.push(...apiClusters);
     }
-
-    selectedStops.value = stops;
-
-    const points = clusters.value.filter((c) =>
-        stops.includes(c.properties?.id),
-    );
-    const firstPoint = points[0];
+    shownClusters.value = {
+        type: "FeatureCollection",
+        features: allClusters
+            .map((c) => store.clustersById[c.id])
+            .filter((c) => c !== undefined),
+    };
+    const firstPoint = shownClusters.value.features[0];
+    console.log(firstPoint);
     if (!firstPoint) {
-        console.error("Data does not contains any points. Aborting");
         return;
     }
-    const bounds = clusters.value
-        .filter((c) => stops.includes(c.properties?.id))
+    const coordinates = [
+        ...shownClusters.value.features.map(
+            (point) => point.geometry.coordinates,
+        ),
+        ...shownLines.value
+            .map((line) => line.line.geometry.coordinates)
+            .flat(2),
+    ];
+    const bounds = coordinates
+        // .filter((c) => stops.includes(c.properties?.id))
         .reduce(
-            (bounds, point) => {
-                return bounds.extend(
-                    new LngLat(
-                        point.geometry.coordinates[0]!,
-                        point.geometry.coordinates[1]!,
-                    ),
-                );
+            (bounds, coords) => {
+                return bounds.extend(new LngLat(coords[0], coords[1]));
             },
             new LngLatBounds([
                 firstPoint.geometry.coordinates[0]!,
@@ -96,27 +74,27 @@ async function selectRoute(routeId: string) {
                 firstPoint.geometry.coordinates[1]!,
             ]),
         );
-
-    map.map.fitBounds(bounds, {
+    map.map!.fitBounds(bounds, {
         padding: 20,
     });
-}
+});
+
+const shownLines = computed(() => {
+    const l: { route: Route; line: Feature<MultiLineString> }[] = [];
+    for (const routeId of selectedRoutesId) {
+        const route = store.routesById[routeId];
+        if (!route) {
+            continue;
+        }
+        const line = store.linesById[routeId.replace(":", "_")];
+        if (!line) {
+            continue;
+        }
+        l.push({
+            route,
+            line,
+        });
+    }
+    return l;
+});
 </script>
-
-<style scoped lang="css">
-#lineSelector {
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 100vh;
-    overflow: auto;
-    background: white;
-}
-
-.lineLabel {
-    cursor: pointer;
-}
-.lineLabel.selected {
-    color: red !important;
-}
-</style>