Use pinia

app/app.vue

@@ -1,13 +1,14 @@
 <template>
     <div id="main">
         <NuxtRouteAnnouncer />
-        <NuxtPage />
+        <NuxtPage page-key="main" />
     </div>
 </template>
 
 <style lang="css">
 body,
-#main {
+#main,
+main {
     height: 100vh;
     margin: 0;
 }

app/components/map/clusters.client.vue

@@ -1,10 +1,6 @@
 <template>
     <ClientOnly>
-        <mgl-geo-json-source
-            v-if="clusters"
-            source-id="clusters"
-            :data="clusters"
-        >
+        <mgl-geo-json-source source-id="clusters" :data="clusters">
             <mgl-circle-layer
                 layer-id="clusters_dots"
                 :paint="cluster_paint"
@@ -31,12 +27,14 @@ const cluster_paint = {
 const cluster_label = {
     "text-field": ["get", "id"],
 };
-const map = useMap();
+const map = useMap("main");
 
 const { clusters } = defineProps<{
     clusters: FeatureCollection<Point>;
 }>();
 
+console.log(clusters);
+
 async function clusterClick(e: FeatureCollection) {
     const feature = e.features[0];
     if (!feature || !feature.properties) {
@@ -50,15 +48,12 @@ async function clusterClick(e: FeatureCollection) {
     const data = await $fetch<FeatureCollection<Point>>(
         `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
     );
-    if (!map.map) {
-        return;
-    }
     new Popup()
         .setLngLat(coordinates)
         .setHTML(
             `Cluster code : ${feature.properties.code}<br/>This cluster contains ${data.features.length} stops`,
         )
-        .addTo(map.map);
+        .addTo(map.map!);
 }
 
 function clusterEnter() {

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>

app/components/sidebar.vue/container.vue

@@ -1,19 +0,0 @@
-<template>
-    <div v-if="routesRequest.data.value" id="lineSelector">
-        <div
-            v-for="route of routesRequest.data.value"
-            :key="route.id"
-            :class="{
-                selected: selectedRoutes.includes(route.id),
-                lineLabel: true,
-            }"
-            :style="{
-                background: '#' + route.color,
-                color: '#' + route.textColor,
-            }"
-            @click="selectRoute(route.id)"
-        >
-            {{ route.type }} : {{ route.shortName }}
-        </div>
-    </div>
-</template>

app/components/sidebar/container.vue

@@ -0,0 +1,49 @@
+<template>
+    <div id="lineSelector">
+        <div
+            v-for="route of store.routes"
+            :key="route.id"
+            :class="{
+                selected: selectedRoutesId.includes(route.id),
+                lineLabel: true,
+            }"
+            :style="{
+                background: '#' + route.color,
+                color: '#' + route.textColor,
+            }"
+            @click="selectRoute(route.id)"
+        >
+            {{ route.type }} : {{ route.shortName }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const store = useMresoStore();
+
+const { selectedRoutesId } = defineProps<{
+    selectedRoutesId: string[];
+}>();
+
+function selectRoute(routeId: string) {
+    navigateTo(`/lines/${routeId}`);
+}
+</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>

app/pages/lines/[id].vue

@@ -0,0 +1,15 @@
+<template>
+    <main>
+        <Transition>
+            <KeepAlive>
+                <Map map-key="main" :selectedRoutesId="[router.params.id]" />
+            </KeepAlive>
+        </Transition>
+
+        <SidebarContainer :selectedRoutesId="[router.params.id]" />
+    </main>
+</template>
+
+<script setup lang="ts">
+const router = useRoute();
+</script>

app/pages/map.vue

@@ -1,6 +0,0 @@
-<template>
-    <main>
-        <SidebarContainer />
-        <Map />
-    </main>
-</template>

app/stores/mreso.ts

@@ -1,4 +1,9 @@
-import type { Feature, FeatureCollection, MultiLineString, Point } from "geojson";
+import type {
+  Feature,
+  FeatureCollection,
+  MultiLineString,
+  Point,
+} from "geojson";
 
 export const useMresoStore = defineStore("mresoStore", {
   state: () => ({
@@ -6,41 +11,34 @@ export const useMresoStore = defineStore("mresoStore", {
     lines: {} as FeatureCollection<MultiLineString>,
     clusters: {} as FeatureCollection<Point>,
     stops: {} as FeatureCollection<Point>,
-    selectedRoutesId: [] as string[]
   }),
   actions: {
-    async fetch() {
-      // const infos = await $fetch("https://api.nuxt.com/modules/pinia");
+    async fetchData(options: { signal?: AbortSignal } = {}) {
+      [this.routes, this.lines, this.clusters, this.stops] = await Promise.all([
+        $fetch<Route[]>("/routes.json", options),
+        $fetch<FeatureCollection<MultiLineString>>("/lines.json", options),
+        $fetch<FeatureCollection<Point>>("/clusters.json", options),
+        $fetch<FeatureCollection<Point>>("/stops.json", options),
+      ]);
 
-      // this.name = infos.name;
-      // this.description = infos.description;
+      this.lines = await $fetch("/lines.json", options);
+      this.clusters = await $fetch("/clusters.json", options);
+      this.stops = await $fetch("/stops.json", options);
     },
   },
   getters: {
-    routesById(state) {
-      return Object.fromEntries(state.routes.map((r)=>[r.id, r]))
+    routesById(state): { [id: string]: Route } {
+      return Object.fromEntries(state.routes.map((r) => [r.id, r]));
     },
-    linesById(state) {
-      return Object.fromEntries(state.lines.features.map((l)=>[l.properties!.id, l]))
+    linesById(state): { [id: string]: Feature<MultiLineString> } {
+      return Object.fromEntries(
+        state.lines.features.map((l) => [l.properties!.id, l]),
+      );
     },
-    shownLines() {
-      const shownLines: { route: Route; line: Feature<MultiLineString> }[] = [];
-      for (const routeId of this.selectedRoutesId) {
-        const route = this.routesById[routeId];
-        if (!route) {
-          continue;
-        }
-        const line = this.linesById[routeId.replace(":","_")]
-        if (!line) {
-          continue;
-        }
-        shownLines.push({
-          route,
-          line,
-        });
-      }
-      return shownLines;
+    clustersById(state): { [id: string]: Feature<Point> } {
+      return Object.fromEntries(
+        state.clusters.features.map((l) => [l.properties!.id, l]),
+      );
     },
-    }
-  }
+  },
 });

app/types.d.ts

@@ -7,7 +7,7 @@ interface Route {
   textColor: string;
   mode: string;
   type: string;
-  timeSheet: string;
+  timeSheet: boolean;
   pdfTimeSheet: boolean;
   pdfMap: boolean;
 }