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>