feat: select route

2026-07-04 23:18:17 +02:00
parent 55f052169c
commit 44ce3b40c5
9 changed files with 131 additions and 61 deletions
@@ -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>
@@ -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>