From 6fa15f2ef3c0976a8e77ceca10ed2973104982df Mon Sep 17 00:00:00 2001
From: Legonzaur <legonzaur@live.fr>
Date: Sun, 5 Jul 2026 11:27:59 +0200
Subject: [PATCH] chfore: split map into components

---
 app/components/map.client.vue          | 165 -------------------------
 app/components/map/clusters.client.vue |  68 ++++++++++
 app/components/map/lines.client.vue    |  36 ++++++
 app/components/map/map.client.vue      | 162 ++++++++++++++++++++++++
 app/types.d.ts                         |  23 ++++
 5 files changed, 289 insertions(+), 165 deletions(-)
 delete mode 100644 app/components/map.client.vue
 create mode 100644 app/components/map/clusters.client.vue
 create mode 100644 app/components/map/lines.client.vue
 create mode 100644 app/components/map/map.client.vue
 create mode 100644 app/types.d.ts

diff --git a/app/components/map.client.vue b/app/components/map.client.vue
deleted file mode 100644
index 5acdfbc..0000000
--- a/app/components/map.client.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<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"
-                    @click="clusterClick"
-                    @mouseenter="clusterEnter"
-                    @mouseleave="clusterLeave"
-                />
-                <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 {
-    Feature,
-    FeatureCollection,
-    MultiLineString,
-    Point,
-} from "geojson";
-import { useMap } from "@indoorequal/vue-maplibre-gl";
-import { LngLat, LngLatBounds, Popup } from "maplibre-gl";
-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 map = useMap();
-
-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 selectedLine = computed(() =>
-    transport_lines.value.find(
-        (f) => f.properties?.id == selectedRoute.value.replace(":", "_"),
-    ),
-);
-const linesData = computed<FeatureCollection<MultiLineString>>(() => {
-    return {
-        type: "FeatureCollection",
-        features: !selectedLine.value ? [] : [selectedLine.value],
-    };
-});
-
-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;
-    console.log(data[0]);
-    const bounds = data.reduce(
-        (bounds, point) => {
-            return bounds.extend(new LngLat(point.lon, point.lat));
-        },
-        new LngLatBounds([data[0].lon, data[0].lat, data[0].lon, data[0].lat]),
-    );
-
-    map.map.fitBounds(bounds, {
-        padding: 20,
-    });
-}
-
-async function clusterClick(e) {
-    const feature: Feature = e.features[0];
-    const code = feature.properties?.code;
-    if (!code) {
-        return;
-    }
-    const coordinates = feature.geometry.coordinates.slice();
-    const data = await $fetch<FeatureCollection<Point>>(
-        `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
-    );
-    if (!map.map) {
-        return;
-    }
-    new Popup()
-        .setLngLat(coordinates)
-        .setHTML(`This cluster contains ${data.features.length} stops`)
-        .addTo(map.map);
-}
-
-function clusterEnter() {
-    map.map.getCanvas().style.cursor = "pointer";
-}
-function clusterLeave() {
-    map.map.getCanvas().style.cursor = "";
-}
-</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/components/map/clusters.client.vue b/app/components/map/clusters.client.vue
new file mode 100644
index 0000000..691ce33
--- /dev/null
+++ b/app/components/map/clusters.client.vue
@@ -0,0 +1,68 @@
+<template>
+    <ClientOnly>
+        <mgl-geo-json-source
+            v-if="clusters"
+            source-id="clusters"
+            :data="clusters"
+        >
+            <mgl-circle-layer
+                layer-id="clusters_dots"
+                :paint="cluster_paint"
+                @click="clusterClick"
+                @mouseenter="clusterEnter"
+                @mouseleave="clusterLeave"
+            />
+            <MglSymbolLayer
+                layer-id="clusters_labels"
+                :layout="cluster_label"
+            />
+        </mgl-geo-json-source>
+    </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import type { FeatureCollection, Point } from "geojson";
+import { useMap } from "@indoorequal/vue-maplibre-gl";
+import { Popup } from "maplibre-gl";
+const cluster_paint = {
+    "circle-radius": 5,
+    "circle-color": "#FF0000",
+};
+const cluster_label = {
+    "text-field": ["get", "id"],
+};
+const map = useMap();
+
+const { clusters } = defineProps<{
+    clusters: FeatureCollection<Point>;
+}>();
+
+async function clusterClick(e: FeatureCollection) {
+    const feature = e.features[0];
+    if (!feature || !feature.properties) {
+        return;
+    }
+    const code = feature.properties.code;
+    if (!code) {
+        return;
+    }
+    const coordinates = feature.geometry.coordinates.slice();
+    const data = await $fetch<FeatureCollection<Point>>(
+        `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
+    );
+    if (!map.map) {
+        return;
+    }
+    new Popup()
+        .setLngLat(coordinates)
+        .setHTML(`This cluster contains ${data.features.length} stops`)
+        .addTo(map.map);
+}
+
+function clusterEnter() {
+    map.map!.getCanvas().style.cursor = "pointer";
+}
+function clusterLeave() {
+    map.map!.getCanvas().style.cursor = "";
+}
+</script>
diff --git a/app/components/map/lines.client.vue b/app/components/map/lines.client.vue
new file mode 100644
index 0000000..3e54e72
--- /dev/null
+++ b/app/components/map/lines.client.vue
@@ -0,0 +1,36 @@
+<template>
+    <mgl-geo-json-source source-id="lines" :data="routeWithLine.line">
+        <mgl-line-layer layer-id="line" :paint="paint" :layout="layout" />
+    </mgl-geo-json-source>
+    <mgl-geo-json-source source-id="lines_border" :data="routeWithLine.line">
+        <mgl-line-layer
+            layer-id="line_border"
+            :paint="offset_paint"
+            :layout="layout"
+        />
+    </mgl-geo-json-source>
+</template>
+
+<script setup lang="ts">
+import type { Feature, MultiLineString } from "geojson";
+
+const { routeWithLine } = defineProps<{
+    routeWithLine: { route: Route; line: Feature<MultiLineString> };
+}>();
+
+const paint = computed(() => ({
+    "line-color": "#" + routeWithLine.route.color,
+    "line-width": 4,
+}));
+
+const layout = {
+    "line-join": "round",
+    "line-cap": "round",
+};
+
+const offset_paint = computed(() => ({
+    "line-color": "#000000",
+    "line-width": 2,
+    "line-gap-width": 2,
+}));
+</script>
diff --git a/app/components/map/map.client.vue b/app/components/map/map.client.vue
new file mode 100644
index 0000000..ceb0700
--- /dev/null
+++ b/app/components/map/map.client.vue
@@ -0,0 +1,162 @@
+<template>
+    <ClientOnly>
+        <MglMap :map-style="style" :center="center" :zoom="zoom" height="100%">
+            <MglNavigationControl />
+            <MapLines
+                v-for="r of routeWithLines"
+                :key="r.route.id"
+                :route-with-line="r"
+            />
+            <MapClusters
+                v-if="clustersData.features"
+                :clusters="clustersData"
+            />
+        </MglMap>
+    </ClientOnly>
+
+    <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>
+
+<script setup lang="ts">
+import type {
+    Feature,
+    FeatureCollection,
+    MultiLineString,
+    Point,
+} from "geojson";
+import { useMap } from "@indoorequal/vue-maplibre-gl";
+import { LngLat, LngLatBounds } from "maplibre-gl";
+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 selectedRoutes = 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 routesRequest = await useFetch<Route[]>("/routes.json");
+
+// Selected routes with lines
+const routeWithLines = computed(() => {
+    const shownLines: { route: Route; line: Feature<MultiLineString> }[] = [];
+    for (const routeId of selectedRoutes.value) {
+        const route = routesRequest.data.value?.find((r) => r.id == routeId);
+        if (!route) {
+            continue;
+        }
+        const line = transport_lines.value.find(
+            (f) => routeId == f.properties?.id.replace("_", ":"),
+        );
+        if (!line) {
+            continue;
+        }
+        shownLines.push({
+            route,
+            line,
+        });
+    }
+    return shownLines;
+});
+
+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`,
+        );
+
+        for (const stop of data) {
+            stops.push(stop.id);
+        }
+    }
+
+    selectedStops.value = stops;
+
+    const points = clusters.value.filter((c) =>
+        stops.includes(c.properties?.id),
+    );
+    const firstPoint = points[0];
+    if (!firstPoint) {
+        console.error("Data does not contains any points. Aborting");
+        return;
+    }
+    const bounds = clusters.value
+        .filter((c) => stops.includes(c.properties?.id))
+        .reduce(
+            (bounds, point) => {
+                return bounds.extend(
+                    new LngLat(
+                        point.geometry.coordinates[0]!,
+                        point.geometry.coordinates[1]!,
+                    ),
+                );
+            },
+            new LngLatBounds([
+                firstPoint.geometry.coordinates[0]!,
+                firstPoint.geometry.coordinates[1]!,
+                firstPoint.geometry.coordinates[0]!,
+                firstPoint.geometry.coordinates[1]!,
+            ]),
+        );
+
+    map.map.fitBounds(bounds, {
+        padding: 20,
+    });
+}
+</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>
diff --git a/app/types.d.ts b/app/types.d.ts
new file mode 100644
index 0000000..eda573a
--- /dev/null
+++ b/app/types.d.ts
@@ -0,0 +1,23 @@
+interface Route {
+  id: string;
+  gtfsId: string;
+  shortName: string;
+  longName: string;
+  color: string;
+  textColor: string;
+  mode: string;
+  type: string;
+  timeSheet: string;
+  pdfTimeSheet: boolean;
+  pdfMap: boolean;
+}
+
+interface Cluster {
+  city: string;
+  code: string;
+  id: string;
+  lat: number;
+  lon: number;
+  name: string;
+  visible: boolean;
+}