From 7061660e7d475fe3ed016858a49a0c9b7ba10c18 Mon Sep 17 00:00:00 2001 From: Ariel Costas Guerrero Date: Fri, 21 Nov 2025 10:53:03 +0100 Subject: Show path from bus position to terminus --- src/frontend/app/components/StopMapModal.tsx | 89 +++++++++++++++++++++++++--- src/frontend/app/components/StopMapSheet.css | 2 +- src/frontend/app/components/StopMapSheet.tsx | 76 +++++++++++++++++++++++- 3 files changed, 157 insertions(+), 10 deletions(-) (limited to 'src/frontend/app/components') diff --git a/src/frontend/app/components/StopMapModal.tsx b/src/frontend/app/components/StopMapModal.tsx index 1799f74..67435b4 100644 --- a/src/frontend/app/components/StopMapModal.tsx +++ b/src/frontend/app/components/StopMapModal.tsx @@ -1,12 +1,14 @@ import maplibregl from "maplibre-gl"; import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"; import Map, { - Marker, - type MapRef + Layer, + Marker, + Source, + type MapRef } from "react-map-gl/maplibre"; import { Sheet } from "react-modal-sheet"; import { useApp } from "~/AppContext"; -import type { RegionId } from "~/config/RegionConfig"; +import { getRegionConfig, type RegionId } from "~/config/RegionConfig"; import { getLineColor } from "~/data/LineColors"; import type { Stop } from "~/data/StopDataProvider"; import { loadStyle } from "~/maps/styleloader"; @@ -16,12 +18,16 @@ export interface Position { latitude: number; longitude: number; orientationDegrees: number; + shapeIndex?: number; } export interface ConsolidatedCirculationForMap { line: string; route: string; currentPosition?: Position; + schedule?: { + shapeId?: string; + }; } interface StopMapModalProps { @@ -45,6 +51,9 @@ export const StopMapModal: React.FC = ({ const [styleSpec, setStyleSpec] = useState(null); const mapRef = useRef(null); const hasFitBounds = useRef(false); + const [shapeData, setShapeData] = useState(null); + + const regionConfig = getRegionConfig(region); // Filter circulations that have GPS coordinates const busesWithPosition = useMemo( @@ -117,7 +126,7 @@ export const StopMapModal: React.FC = ({ .easeTo({ center: [only.lon, only.lat], zoom: 16, duration: 450 }); } else { mapRef.current.fitBounds(bounds, { - padding: 24, + padding: 80, duration: 500, maxZoom: 17, } as any); @@ -190,9 +199,42 @@ export const StopMapModal: React.FC = ({ useEffect(() => { if (!isOpen) { hasFitBounds.current = false; + setShapeData(null); } }, [isOpen]); + // Fetch shape for selected bus + useEffect(() => { + if ( + !isOpen || + !selectedBus || + !selectedBus.schedule?.shapeId || + selectedBus.currentPosition?.shapeIndex === undefined || + !regionConfig.shapeEndpoint + ) { + setShapeData(null); + return; + } + + const shapeId = selectedBus.schedule.shapeId; + const shapeIndex = selectedBus.currentPosition.shapeIndex; + + fetch( + `${regionConfig.shapeEndpoint}?shapeId=${shapeId}&startPointIndex=${shapeIndex}` + ) + .then((res) => { + if (res.ok) return res.json(); + return null; + }) + .then((data) => { + if (data) { + setShapeData(data); + handleCenter(); + } + }) + .catch((err) => console.error("Failed to load shape", err)); + }, [isOpen, selectedBus, regionConfig.shapeEndpoint]); + if (busesWithPosition.length === 0) { return null; // Don't render if no buses with GPS coordinates } @@ -217,12 +259,45 @@ export const StopMapModal: React.FC = ({ longitude: center.longitude, zoom: 16, }} - style={{ width: "100%", height: "320px" }} + style={{ width: "100%", height: "50vh" }} mapStyle={styleSpec} - attributionControl={false} + attributionControl={{compact: false, customAttribution: "Concello de Vigo & Viguesa de Transportes SL"}} ref={mapRef} interactive={true} > + {/* Shape Layer */} + {shapeData && selectedBus && ( + + + + + )} + {/* Stop marker */} {stop.latitude && stop.longitude && ( = ({ diff --git a/src/frontend/app/components/StopMapSheet.css b/src/frontend/app/components/StopMapSheet.css index 6b2e8ed..7c96c2b 100644 --- a/src/frontend/app/components/StopMapSheet.css +++ b/src/frontend/app/components/StopMapSheet.css @@ -1,7 +1,7 @@ /* Stop map container */ .stop-map-container { width: 100%; - height: 300px; + height: 50vh; overflow: hidden; border: 1px solid var(--border-color); margin-block-start: 0; diff --git a/src/frontend/app/components/StopMapSheet.tsx b/src/frontend/app/components/StopMapSheet.tsx index 71a1095..7dab82b 100644 --- a/src/frontend/app/components/StopMapSheet.tsx +++ b/src/frontend/app/components/StopMapSheet.tsx @@ -1,8 +1,8 @@ import maplibregl from "maplibre-gl"; import React, { useEffect, useMemo, useRef, useState } from "react"; -import Map, { Marker, type MapRef } from "react-map-gl/maplibre"; +import Map, { Layer, Marker, Source, type MapRef } from "react-map-gl/maplibre"; import { useApp } from "~/AppContext"; -import type { RegionId } from "~/config/RegionConfig"; +import { getRegionConfig, type RegionId } from "~/config/RegionConfig"; import { getLineColor } from "~/data/LineColors"; import type { Stop } from "~/data/StopDataProvider"; import { loadStyle } from "~/maps/styleloader"; @@ -12,12 +12,16 @@ export interface Position { latitude: number; longitude: number; orientationDegrees: number; + shapeIndex?: number; } export interface ConsolidatedCirculationForMap { line: string; route: string; currentPosition?: Position; + schedule?: { + shapeId?: string; + }; } interface StopMapProps { @@ -44,6 +48,36 @@ export const StopMap: React.FC = ({ const [zoom, setZoom] = useState(16); const [moveTick, setMoveTick] = useState(0); const [showAttribution, setShowAttribution] = useState(false); + const [shapes, setShapes] = useState>({}); + + const regionConfig = getRegionConfig(region); + + useEffect(() => { + circulations.forEach((c) => { + if ( + c.schedule?.shapeId && + c.currentPosition?.shapeIndex !== undefined && + regionConfig.shapeEndpoint + ) { + const key = `${c.schedule.shapeId}_${c.currentPosition.shapeIndex}`; + if (!shapes[key]) { + fetch( + `${regionConfig.shapeEndpoint}?shapeId=${c.schedule.shapeId}&startPointIndex=${c.currentPosition.shapeIndex}` + ) + .then((res) => { + if (res.ok) return res.json(); + return null; + }) + .then((data) => { + if (data) { + setShapes((prev) => ({ ...prev, [key]: data })); + } + }) + .catch((err) => console.error("Failed to load shape", err)); + } + } + }); + }, [circulations, regionConfig.shapeEndpoint, shapes]); type Pt = { lat: number; lon: number }; const haversineKm = (a: Pt, b: Pt) => { @@ -308,6 +342,44 @@ export const StopMap: React.FC = ({ setMoveTick((t) => (t + 1) % 1000000); }} > + {/* Shapes */} + {circulations.map((c, idx) => { + if ( + !c.schedule?.shapeId || + c.currentPosition?.shapeIndex === undefined + ) + return null; + const key = `${c.schedule.shapeId}_${c.currentPosition.shapeIndex}`; + const shapeData = shapes[key]; + if (!shapeData) return null; + const lineColor = getLineColor(region, c.line); + + return ( + + + + + ); + })} {/* Stop marker (center) */} {stop.latitude && stop.longitude && ( -- cgit v1.3