From 44ce3b40c5eca1c44c4db5ed5b6cd35bd57ec967 Mon Sep 17 00:00:00 2001
From: Legonzaur <legonzaur@live.fr>
Date: Sat, 4 Jul 2026 23:18:17 +0200
Subject: [PATCH] feat: select route

---
 .gitattributes                |   3 +
 app/components/map.client.vue | 114 ++++++++++++++++++++++++++++++++++
 app/pages/map.vue             |  60 +-----------------
 nuxt.config.ts                |   4 +-
 package-lock.json             |   1 +
 package.json                  |   1 +
 public/clusters.json          |   3 +
 public/lignes.json            |   3 +
 public/routes.json            |   3 +
 9 files changed, 131 insertions(+), 61 deletions(-)
 create mode 100644 .gitattributes
 create mode 100644 app/components/map.client.vue
 create mode 100644 public/clusters.json
 create mode 100644 public/lignes.json
 create mode 100644 public/routes.json

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..5bfa5d2
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,3 @@
+clusters.json filter=lfs diff=lfs merge=lfs -text
+lignes.json filter=lfs diff=lfs merge=lfs -text
+routes.json filter=lfs diff=lfs merge=lfs -text
diff --git a/app/components/map.client.vue b/app/components/map.client.vue
new file mode 100644
index 0000000..753df88
--- /dev/null
+++ b/app/components/map.client.vue
@@ -0,0 +1,114 @@
+<template>
+    <ClientOnly>
+        <MglMap :map-style="style" :center="center" :zoom="zoom" height="100%">
+            <MglNavigationControl />
+            <mgl-geo-json-source
+                v-if="clustersData.features"
+                source-id="clusters"
+                :data="clustersData"
+            >
+                <mgl-circle-layer
+                    layer-id="clusters_dots"
+                    :paint="cluster_paint"
+                />
+                <MglSymbolLayer
+                    layer-id="clusters_labels"
+                    :layout="cluster_label"
+                />
+            </mgl-geo-json-source>
+
+            <mgl-geo-json-source
+                v-if="linesData.features"
+                source-id="lines"
+                :data="linesData"
+            >
+                <mgl-line-layer layer-id="lines_drawn" />
+            </mgl-geo-json-source>
+        </MglMap>
+    </ClientOnly>
+
+    <div v-if="routesRequest.data.value" id="lineSelector">
+        <div
+            v-for="route of routesRequest.data.value"
+            :key="route.id"
+            :class="{
+                selected: selectedRoute === route.id,
+                lineLabel: true,
+            }"
+            @click="selectRoute(route.id)"
+        >
+            {{ route.type }} : {{ route.shortName }}
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { FeatureCollection, MultiLineString, Point } from "geojson";
+const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
+const center = [5.735, 45.185];
+const zoom = 12;
+const cluster_paint = {
+    "circle-radius": 5,
+    "circle-color": "#FF0000",
+};
+
+const cluster_label = {
+    "text-field": ["get", "id"],
+};
+
+const selectedRoute = ref<string>("");
+const selectedStops = ref<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 linesData = computed<FeatureCollection<MultiLineString>>(() => {
+    return {
+        type: "FeatureCollection",
+        features: transport_lines.value.filter(
+            (f) => f.properties?.id == selectedRoute.value.replace(":", "_"),
+        ),
+    };
+});
+
+const routesRequest = await useFetch("/routes.json");
+console.log(routesRequest.data.value);
+async function selectRoute(lineId: string) {
+    selectedRoute.value = lineId;
+    const data = await $fetch<object[]>(
+        `https://data.mobilites-m.fr/api/routers/default/index/routes/${selectedRoute.value.replace("_", ":")}/clusters`,
+    );
+    const stops = [];
+    for (const stop of data) {
+        stops.push(stop.id);
+    }
+    selectedStops.value = stops;
+}
+</script>
+
+<style scoped lang="css">
+#lineSelector {
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100vh;
+    overflow: auto;
+    background: white;
+}
+
+.lineLabel.selected {
+    color: red;
+}
+</style>
diff --git a/app/pages/map.vue b/app/pages/map.vue
index 076c886..84629ab 100644
--- a/app/pages/map.vue
+++ b/app/pages/map.vue
@@ -1,61 +1,3 @@
 <template>
-    <ClientOnly>
-        <MglMap :map-style="style" :center="center" :zoom="zoom" height="100%">
-            <MglNavigationControl />
-            <mgl-geo-json-source source-id="geojson" :data="geojsonSource.data">
-                <mgl-circle-layer
-                    layer-id="bigCircle"
-                    :layout="layout"
-                    :paint="paint"
-                />
-                <MglSymbolLayer layer-id="text" :layout="symbolLayout" />
-                <MglImage
-                    id="image_test"
-                    url="https://maplibre.org/maplibre-gl-js/docs/assets/osgeo-logo.png"
-                />
-            </mgl-geo-json-source>
-        </MglMap>
-    </ClientOnly>
+    <Map />
 </template>
-
-<script setup>
-const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
-const center = [5.735, 45.185];
-const zoom = 12;
-
-const geojsonSource = ref({
-    data: "https://data.mobilites-m.fr/api/points/json?types=stops",
-});
-
-// const geojsonSource = ref({
-//     data: {
-//         type: "FeatureCollection",
-//         features: [
-//             {
-//                 type: "Feature",
-//                 geometry: {
-//                     type: "Point",
-//                     coordinates: [5.735, 45.185],
-//                 },
-//                 properties: { year: "2004" },
-//             },
-//         ],
-//     },
-// });
-const layout = {
-    // "icon-image": "image_test",
-    // "line-join": "round",
-    // "line-cap": "round",
-};
-
-const paint = {
-    "circle-radius": 5,
-    "circle-color": "#FF0000",
-    // "line-color": "#FF0000",
-    // "line-width": 8,
-};
-
-const symbolLayout = {
-    "text-field": ["get", "name"],
-};
-</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index fa4affe..eb97715 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,8 +5,8 @@ export default defineNuxtConfig({
   modules: ["@nuxt/eslint", "nuxt-maplibre"],
   vite: {
     optimizeDeps: {
-      noDiscovery: true,
-      include: ["maplibre-gl"],
+      // noDiscovery: true,
+      // include: ["maplibre-gl"],
     },
   },
 });
diff --git a/package-lock.json b/package-lock.json
index be02618..973d902 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@nuxt/eslint": "^1.16.0",
+        "@types/geojson": "^7946.0.16",
         "eslint": "^10.6.0",
         "nuxt": "^4.4.8",
         "nuxt-maplibre": "^1.2.2",
diff --git a/package.json b/package.json
index 33ff960..a2e80ff 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@nuxt/eslint": "^1.16.0",
+    "@types/geojson": "^7946.0.16",
     "eslint": "^10.6.0",
     "nuxt": "^4.4.8",
     "nuxt-maplibre": "^1.2.2",
diff --git a/public/clusters.json b/public/clusters.json
new file mode 100644
index 0000000..13af1ce
--- /dev/null
+++ b/public/clusters.json
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5dafff3005dd0a723844601139929e4b300956bc314b69e9d23f4ab28e25824b
+size 970030
diff --git a/public/lignes.json b/public/lignes.json
new file mode 100644
index 0000000..0e40ae5
--- /dev/null
+++ b/public/lignes.json
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1c6a9205240875459aab20524b1d730756c60dee0d9968ac389bd420d068196d
+size 4145742
diff --git a/public/routes.json b/public/routes.json
new file mode 100644
index 0000000..5c269f3
--- /dev/null
+++ b/public/routes.json
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ce75f8eeb9285a9e3cfe703e5c0557cb50de116ebafe2e6afc1577ce3637396a
+size 107688