wip: working on trips

app/app.vue

@@ -5,24 +5,6 @@
     </NuxtLayout>
 </template>
 
-<script setup lang="ts">
-const router = useRoute();
-const store = useMresoStore();
-watch(
-    () => router.params.line_id,
-    () => {
-        if (router.params.line_id === undefined) {
-            store.selectedRouteIds = [];
-        }
-        if (typeof router.params.line_id !== "string") {
-            store.selectedRouteIds = [];
-        }
-        store.selectedRouteIds = [router.params.line_id];
-    },
-    { immediate: true },
-);
-</script>
-
 <style lang="css">
 body,
 #main,

app/components/map/lines.client.vue

@@ -1,8 +1,8 @@
 <template>
-    <mgl-geo-json-source source-id="lines" :data="routeWithLine.line">
+    <mgl-geo-json-source source-id="lines" :data="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-geo-json-source source-id="lines_border" :data="line">
         <mgl-line-layer
             layer-id="line_border"
             :paint="offset_paint"
@@ -12,14 +12,14 @@
 </template>
 
 <script setup lang="ts">
-import type { Feature, MultiLineString } from "geojson";
+import type { Feature, LineString, MultiLineString } from "geojson";
 
-const { routeWithLine } = defineProps<{
-    routeWithLine: { route: Route; line: Feature<MultiLineString> };
+const { line } = defineProps<{
+    line: Feature<MultiLineString | LineString, LineProperties>;
 }>();
 
 const paint = computed(() => ({
-    "line-color": "#" + routeWithLine.route.color,
+    "line-color": "#" + line.properties?.route?.color,
     "line-width": 4,
 }));
 

app/components/map/map.client.vue

@@ -3,45 +3,70 @@
         <MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
             <MglNavigationControl />
             <MglImage id="cluster" :image="image" />
-            <template v-for="r of shownLines" :key="r.route.id">
-                <MapLines :route-with-line="r" />
+            <template v-for="r of store.selectedLines">
+                <MapLines :line="r" />
                 <MapClusters
-                    v-if="shownClusters"
+                    v-if="shownClusters && r.properties?.route"
                     :clusters="shownClusters"
-                    :route="r.route"
+                    :route="r.properties.route"
             /></template>
+
+            <mgl-geo-json-source
+                :source-id="`trip_leg_${index}`"
+                :data="line"
+                v-for="(line, index) in store.selectedLines"
+            >
+                <mgl-line-layer
+                    :layer-id="`trip_line_leg_${index}`"
+                    :paint="{
+                        'line-width': 4,
+                        'line-color':
+                            '#' + (line.properties?.route?.color || '000000'),
+                        'line-dasharray': [
+                            2,
+                            line.properties?.mode == 'WALK' ? 1 : 0,
+                        ],
+                    }"
+                />
+            </mgl-geo-json-source>
         </MglMap>
     </ClientOnly>
 </template>
 
 <script setup lang="ts">
-import type {
-    Feature,
-    FeatureCollection,
-    MultiLineString,
-    Point,
-} from "geojson";
+import type { FeatureCollection, 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 style =
+//     "https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json";
 const center = new LngLat(5.735, 45.185);
 const zoom = 12;
 
+const emit = defineEmits<{
+    loaded: [];
+}>();
+
 const store = useMresoStore();
 await store.fetchData();
 const shownClusters = ref<FeatureCollection<Point> | null>(null);
 const image = useSvgImage();
 const map = useMap("main");
 
+watch(map, () => {
+    if (map.isLoaded) {
+        emit("loaded");
+    }
+});
 watchEffect(async () => {
     const allClusters = [];
-    for (const routeId of store.selectedRouteIds) {
-        if (routeId === undefined) {
+    for (const line of store.selectedLines) {
+        if (line.properties.route === undefined) {
             continue;
         }
         const apiClusters = await $fetch<Cluster[]>(
-            `https://data.mobilites-m.fr/api/routers/default/index/routes/${routeId}/clusters`,
+            `https://data.mobilites-m.fr/api/routers/default/index/routes/${line.properties.route.id}/clusters`,
         );
         allClusters.push(...apiClusters);
     }
@@ -61,15 +86,13 @@ watchEffect(async () => {
         ...shownClusters.value.features.map(
             (point) => point.geometry.coordinates,
         ),
-        ...shownLines.value
-            .map((line) => line.line.geometry.coordinates)
-            .flat(2),
+        ...store.selectedLines.map((line) => line.geometry.coordinates).flat(2),
     ];
     const bounds = coordinates
         // .filter((c) => stops.includes(c.properties?.id))
         .reduce(
             (bounds, coords) => {
-                return bounds.extend(new LngLat(coords[0]!, coords[1]!));
+                return bounds.extend(new LngLat(coords[0], coords[1]));
             },
             new LngLatBounds([
                 firstPoint.geometry.coordinates[0]!,
@@ -82,23 +105,16 @@ watchEffect(async () => {
         padding: 20,
     });
 });
-
-const shownLines = computed(() => {
-    const l: { route: Route; line: Feature<MultiLineString> }[] = [];
-    for (const routeId of store.selectedRouteIds) {
-        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">
+.maplibregl-map {
+    grid-area: "map";
+}
+</style>
+
+<style lang="css">
+.maplibregl-map {
+    grid-area: map;
+}
+</style>

app/components/sidebar/lines.vue

@@ -1,10 +1,12 @@
 <template>
-    <div id="lineSelector">
+    <div id="sidebar">
         <div
             v-for="route of store.routes"
             :key="route.id"
             :class="{
-                selected: store.selectedRouteIds.includes(route.id),
+                selected: store.selectedLines.find(
+                    (l) => l.properties?.route?.id == route.id,
+                ),
                 lineLabel: true,
             }"
             :style="{
@@ -27,19 +29,15 @@ function selectRoute(routeId: string) {
 </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;
 }
+#sidebar {
+    hewight: 100%;
+    overflow: auto;
+    grid-area: sidebar;
+}
 </style>

app/components/sidebar/trip.vue

@@ -0,0 +1,17 @@
+<template>
+    <div id="sidebar">
+        <input type="text" placeholder="from" value="SEM:GENBIBLIUNI" />
+        <input type="text" placeholder="to" value="SEM:GENPERE" />
+        <button @click="$emit('plan')">request</button>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+#sidebar {
+    height: 100%;
+    overflow: auto;
+    grid-area: sidebar;
+}
+</style>

app/layouts/default.vue

@@ -1,6 +1,51 @@
 <template>
     <main>
-        <Map map-key="main" />
+        <div id="map-container">
+            <Map map-key="main" @loaded="loaded" />
+            <Transition>
+                <div id="map-loading" v-if="!mapReady">Loading</div>
+            </Transition>
+        </div>
         <slot />
     </main>
 </template>
+
+<style scoped lang="css">
+main {
+    display: grid;
+    grid-template-columns: 400px 1fr;
+    grid-template-areas: "sidebar map";
+    height: 100%;
+}
+#map-container {
+    position: relative;
+    height: 100%;
+}
+
+#map-loading {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+}
+</style>
+
+<script setup lang="ts">
+const mapReady = ref(false);
+function loaded() {
+    mapReady.value = true;
+}
+</script>

app/pages/index.vue

@@ -1,9 +1,43 @@
 <template>
-    <main>
-        <SidebarContainer />
-    </main>
+    <SidebarLines />
 </template>
 
 <script lang="ts">
 definePageMeta({ key: "lines" });
 </script>
+
+<script setup lang="ts">
+const router = useRoute();
+const store = useMresoStore();
+watch(
+    [
+        () => router.params.line_id,
+        () => store.linesById,
+        () => store.routesById,
+    ],
+    () => {
+        const lineId = router.params.line_id;
+        console.log(lineId);
+        if (lineId === undefined) {
+            store.selectedLines = [];
+
+            return;
+        }
+        if (typeof lineId !== "string") {
+            store.selectedLines = [];
+            return;
+        }
+        const lineClone = structuredClone(
+            toRaw(store.linesById[lineId.replace(":", "_")]),
+        );
+        if (!lineClone) {
+            console.log(store.linesById, lineId.replace(":", "_"));
+            return;
+        }
+        lineClone.properties = { route: store.routesById[lineId] };
+        store.selectedLines = [lineClone];
+        console.log(store.selectedLines);
+    },
+    { immediate: true },
+);
+</script>

app/pages/trip.vue

@@ -0,0 +1,57 @@
+<template>
+    <SidebarTrip @plan="plan" />
+</template>
+
+<script setup lang="ts">
+import { LngLat } from "maplibre-gl";
+import { decode } from "@googlemaps/polyline-codec";
+import type { Feature, LineString } from "geojson";
+definePageMeta({ key: "trip" });
+
+const from = "SEM:GENBIBLIUNI";
+const to = "SEM:GENALSACELO";
+const store = useMresoStore();
+
+function plan() {
+    const fromCoord = store.clustersByCode[from]?.geometry.coordinates;
+    const toCoord = store.clustersByCode[to]?.geometry.coordinates;
+    if (!fromCoord || !toCoord) {
+        return;
+    }
+    const planner = new TransitRoutePlanner(
+        new LngLat(fromCoord[1]!, fromCoord[0]!),
+        new LngLat(toCoord[1]!, toCoord[0]!),
+    );
+    planner.request().then((data) => {
+        const GeoLines: Feature<LineString, LineProperties>[] = [];
+        const itinerary = data.plan.itineraries[0];
+        if (!itinerary) {
+            console.log("No Itineraries found");
+            return;
+        }
+        for (const leg of itinerary.legs) {
+            console.log(leg);
+            const points = leg.legGeometry.points;
+            if (!points) {
+                return;
+            }
+            const lines = decode(points).map(([lat, lng]) => [lng, lat]);
+            const lineString: Feature<LineString, LineProperties> = {
+                type: "Feature",
+                properties: {
+                    mode: leg.mode,
+                },
+                geometry: {
+                    type: "LineString",
+                    coordinates: lines,
+                },
+            };
+            if (leg.routeId) {
+                lineString.properties!.route = store.routesById[leg.routeId];
+            }
+            GeoLines.push(lineString);
+        }
+        store.selectedLines = GeoLines;
+    });
+}
+</script>

app/stores/mreso.ts

@@ -1,6 +1,7 @@
 import type {
   Feature,
   FeatureCollection,
+  LineString,
   MultiLineString,
   Point,
 } from "geojson";
@@ -11,13 +12,20 @@ export const useMresoStore = defineStore("mresoStore", {
     lines: {} as FeatureCollection<MultiLineString>,
     clusters: {} as FeatureCollection<Point>,
     stops: {} as FeatureCollection<Point>,
-    selectedRouteIds: [] as string[],
+    selectedLines: [] as Feature<
+      LineString | MultiLineString,
+      LineProperties
+    >[],
   }),
   actions: {
     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<MultiLineString>>(
+        //   "/trajets presque clean.geojson",
+        //   options,
+        // ),
         $fetch<FeatureCollection<Point>>("/clusters.json", options),
         $fetch<FeatureCollection<Point>>("/stops.json", options),
       ]);

app/types.d.ts

@@ -12,6 +12,13 @@ interface Route {
   pdfMap: boolean;
 }
 
+interface _LineProperties extends GeoJsonProperties {
+  route?: Route;
+  mode?: PlannerModes;
+}
+
+type LineProperties = _LineProperties | null;
+
 interface Cluster {
   city: string;
   code: string;
@@ -52,3 +59,105 @@ interface StopTimes {
   occupancy: string;
   occupancyId: number;
 }
+
+interface PlannerResource extends Record<string, string> {
+  routerId: string;
+  fromPlace: string;
+  toPlace: string;
+  arriveBy: string;
+  time: string;
+  date: string;
+  routerId: string;
+  optimize: OptimizeType;
+  walkSpeed: string;
+  walkReluctance: string;
+  locale: string;
+  mode: string;
+  showIntermediateStops?: string;
+  minTransferTime?: string;
+  transferPenalty?: string;
+  numItineraries?: string;
+  walkBoardCost?: string;
+  bannedAgencies?: string;
+}
+
+type OptimizeType =
+  "FLAT" | "GREENWAYS" | "QUICK" | "SAFE" | "TRANSFERS" | "TRIANGLE";
+
+type PlannerModes = "WALK" | "TRANSIT";
+
+interface OTPPlace {
+  name: string;
+  lon: number;
+  lat: number;
+  vertedType: "NORMAL";
+}
+
+interface OTPItineraries {
+  duration: number;
+  startTime: number;
+  endTime: number;
+  walkTime: number;
+  transitTime: number;
+  waitingTime: number;
+  walkDistance: number;
+  walkLimitExceeded: boolean;
+  generalizedCost: number;
+  elevationLost: number;
+  elevationGained: number;
+  transfers: number;
+  legs: OTPLegs[];
+}
+
+interface OTPLegs {
+  startTime: number;
+  endTime: number;
+  departureDelay: number;
+  arrivalDelay: number;
+  realTime: boolean;
+  distance: number;
+  generalizedCost: number;
+  pathway: boolean;
+  mode: PlannerModes;
+  transitLeg: boolean;
+  route: string;
+  routeColor?: string;
+  routeId?: string;
+  routeLongName?: string;
+  routeShortName?: string;
+  routeTextColor?: string;
+  routeType?: number;
+  agencyTimeZoneOffset: number;
+  interlineWithPreviousLeg: boolean;
+  from: OTPPlace;
+  to: OTPPlace;
+  legGeometry: {
+    points: "string";
+  };
+  legElevation: string;
+  steps: OTPStep[];
+  duration: number;
+}
+
+interface OTPStep {
+  distance: number;
+  relativeDirection: string;
+  streetName: string;
+  absoluteDirection: string;
+  stayOn: boolean;
+  area: boolean;
+  bogusName: boolean;
+  lon: numbeer;
+  lat: numbeer;
+  elevation: string;
+  walkingBike: boolean;
+}
+
+interface OTPPlanOutput {
+  plan: {
+    date: number;
+    from: OTPPlace;
+    to: OTPPlace;
+    itineraries: OTPItineraries[];
+  };
+}

app/utils/trip.ts

@@ -0,0 +1,81 @@
+import type { LngLat } from "maplibre-gl";
+
+class RoutePlanner {
+  fromPlace: LngLat;
+  toPlace: LngLat;
+  date: Date;
+
+  arriveBy = false;
+  routerId = "default";
+  optimize: OptimizeType = "QUICK";
+  walkSpeed = 1.1112;
+  walkReluctance = 10;
+  locale: string = "fr";
+  mode: Set<PlannerModes> = new Set(["WALK"]);
+  otpUrl = new URL("https://data.mobilites-m.fr/api/routers/default/plan");
+
+  showIntermediateStops?: boolean;
+  minTransferTime?: number;
+  transferPenalty?: number;
+  numItineraries?: number;
+  walkBoardCost?: number;
+  bannedAgencies?: string;
+
+  constructor(from: LngLat, to: LngLat) {
+    this.fromPlace = from;
+    this.toPlace = to;
+    this.date = new Date();
+  }
+
+  toURLSearchParams() {
+    const params: PlannerResource = {
+      fromPlace: `${this.fromPlace.lng},${this.fromPlace.lat}`,
+      toPlace: `${this.toPlace.lng},${this.toPlace.lat}`,
+      arriveBy: this.arriveBy.toString(),
+      date: this.date.toISOString().substring(0, 10),
+      time: this.date.toISOString().substring(11, 16),
+      routerId: this.routerId,
+      optimize: this.optimize,
+      walkSpeed: this.walkSpeed.toString(),
+      walkReluctance: this.walkReluctance.toString(),
+      locale: this.locale,
+      mode: Array.from(this.mode.values()).join(","),
+    };
+    if (this.showIntermediateStops) {
+      params["showIntermediateStops"] = this.showIntermediateStops.toString();
+    }
+    if (this.minTransferTime) {
+      params["minTransferTime"] = this.minTransferTime.toString();
+    }
+    if (this.transferPenalty) {
+      params["transferPenalty"] = this.transferPenalty.toString();
+    }
+    if (this.numItineraries) {
+      params["numItineraries"] = this.numItineraries.toString();
+    }
+    if (this.walkBoardCost) {
+      params["walkBoardCost"] = this.walkBoardCost.toString();
+    }
+    if (this.bannedAgencies) {
+      params["bannedAgencies"] = this.bannedAgencies.toString();
+    }
+    return new URLSearchParams(params);
+  }
+
+  async request() {
+    this.otpUrl.search = this.toURLSearchParams().toString();
+    return await $fetch<OTPPlanOutput>(this.otpUrl.toString());
+  }
+}
+
+class TransitRoutePlanner extends RoutePlanner {
+  override mode = new Set<PlannerModes>(["WALK", "TRANSIT"]);
+  override showIntermediateStops = true;
+  override minTransferTime = 60;
+  override transferPenalty = 60;
+  override numItineraries = 2;
+  override walkBoardCost = 300;
+  override bannedAgencies = "MCO:MCO";
+}
+
+export { RoutePlanner, TransitRoutePlanner };

package-lock.json

@@ -7,6 +7,7 @@
       "name": "better-mrso",
       "hasInstallScript": true,
       "dependencies": {
+        "@googlemaps/polyline-codec": "^1.0.28",
         "@nuxt/eslint": "^1.16.0",
         "@pinia/nuxt": "^0.11.3",
         "@types/geojson": "^7946.0.16",
@@ -1188,6 +1189,12 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@googlemaps/polyline-codec": {
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/@googlemaps/polyline-codec/-/polyline-codec-1.0.28.tgz",
+      "integrity": "sha512-m7rh8sbxlrHvebXEweBHX8r1uPtToPRYxWDD6p6k2YG8hyhBe0Wi6xRUVFpxpEseMNgF+OBotFQC5senj8K7TQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",

package.json

@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@googlemaps/polyline-codec": "^1.0.28",
     "@nuxt/eslint": "^1.16.0",
     "@pinia/nuxt": "^0.11.3",
     "@types/geojson": "^7946.0.16",