feat: Implement StopMapModal component for displaying bus stop locations with live tracking; enhance styles and add interaction features

10 files changed, 559 insertions, 17 deletions

diff --git a/src/Costasdev.Busurbano.Backend/Controllers/VigoController.cs b/src/Costasdev.Busurbano.Backend/Controllers/VigoController.cs
index cd75f90..0591230 100644
--- a/src/Costasdev.Busurbano.Backend/Controllers/VigoController.cs
+++ b/src/Costasdev.Busurbano.Backend/Controllers/VigoController.cs
@@ -272,6 +272,7 @@ public class VigoController : ControllerBase
             {
                 Line = estimate.Line,
                 Route = estimate.Route,
+                NextStreets = [.. closestCirculation.NextStreets],
                 Schedule = new ScheduleData
                 {
                     Running = isRunning,
diff --git a/src/Costasdev.Busurbano.Backend/Types/ConsolidatedCirculation.cs b/src/Costasdev.Busurbano.Backend/Types/ConsolidatedCirculation.cs
index 3806241..a21aa60 100644
--- a/src/Costasdev.Busurbano.Backend/Types/ConsolidatedCirculation.cs
+++ b/src/Costasdev.Busurbano.Backend/Types/ConsolidatedCirculation.cs
@@ -8,6 +8,7 @@ public class ConsolidatedCirculation
     public ScheduleData? Schedule { get; set; }
     public RealTimeData? RealTime { get; set; }
     public Position? CurrentPosition { get; set; }
+    public string[] NextStreets { get; set; } = [];
 }
 
 public class RealTimeData
diff --git a/src/frontend/app/components/StopMapModal.css b/src/frontend/app/components/StopMapModal.css
new file mode 100644
index 0000000..f024b38
--- /dev/null
+++ b/src/frontend/app/components/StopMapModal.css
@@ -0,0 +1,58 @@
+/* Stop map modal container */
+.stop-map-modal {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--background-color);
+}
+
+.stop-map-modal__map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* Map floating controls */
+.map-modal-controls {
+  position: absolute;
+  left: 8px;
+  top: 8px;
+  display: flex;
+  gap: 8px;
+  z-index: 2;
+}
+
+.center-btn {
+  appearance: none;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  background: color-mix(
+    in oklab,
+    var(--background-color, #fff) 85%,
+    transparent
+  );
+  color: var(--text-primary, #111);
+  padding: 6px;
+  border-radius: 6px;
+  font-size: 12px;
+  line-height: 1;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.center-btn:hover {
+  background: color-mix(
+    in oklab,
+    var(--background-color, #fff) 75%,
+    transparent
+  );
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.center-btn:active {
+  transform: scale(0.95);
+}
diff --git a/src/frontend/app/components/StopMapModal.tsx b/src/frontend/app/components/StopMapModal.tsx
new file mode 100644
index 0000000..1799f74
--- /dev/null
+++ b/src/frontend/app/components/StopMapModal.tsx
@@ -0,0 +1,344 @@
+import maplibregl from "maplibre-gl";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import Map, {
+    Marker,
+    type MapRef
+} from "react-map-gl/maplibre";
+import { Sheet } from "react-modal-sheet";
+import { useApp } from "~/AppContext";
+import type { RegionId } from "~/config/RegionConfig";
+import { getLineColor } from "~/data/LineColors";
+import type { Stop } from "~/data/StopDataProvider";
+import { loadStyle } from "~/maps/styleloader";
+import "./StopMapModal.css";
+
+export interface Position {
+  latitude: number;
+  longitude: number;
+  orientationDegrees: number;
+}
+
+export interface ConsolidatedCirculationForMap {
+  line: string;
+  route: string;
+  currentPosition?: Position;
+}
+
+interface StopMapModalProps {
+  stop: Stop;
+  circulations: ConsolidatedCirculationForMap[];
+  region: RegionId;
+  isOpen: boolean;
+  onClose: () => void;
+  selectedCirculationIndex?: number;
+}
+
+export const StopMapModal: React.FC<StopMapModalProps> = ({
+  stop,
+  circulations,
+  region,
+  isOpen,
+  onClose,
+  selectedCirculationIndex,
+}) => {
+  const { theme } = useApp();
+  const [styleSpec, setStyleSpec] = useState<any | null>(null);
+  const mapRef = useRef<MapRef | null>(null);
+  const hasFitBounds = useRef(false);
+
+  // Filter circulations that have GPS coordinates
+  const busesWithPosition = useMemo(
+    () => circulations.filter((c) => !!c.currentPosition),
+    [circulations]
+  );
+
+  // Use selectedCirculationIndex if provided, otherwise use first bus with position
+  const selectedBus = useMemo(() => {
+    if (selectedCirculationIndex !== undefined) {
+      const circulation = circulations[selectedCirculationIndex];
+      if (circulation?.currentPosition) {
+        return circulation;
+      }
+    }
+    // Fallback to first bus with position
+    return busesWithPosition.length > 0 ? busesWithPosition[0] : null;
+  }, [selectedCirculationIndex, circulations, busesWithPosition]);
+
+  const center = useMemo(() => {
+    if (selectedBus?.currentPosition) {
+      return {
+        latitude: selectedBus.currentPosition.latitude,
+        longitude: selectedBus.currentPosition.longitude,
+      };
+    }
+    if (stop.latitude && stop.longitude) {
+      return { latitude: stop.latitude, longitude: stop.longitude };
+    }
+    return { latitude: 42.2406, longitude: -8.7207 }; // Vigo approx fallback
+  }, [selectedBus, stop.latitude, stop.longitude]);
+
+  const handleCenter = useCallback(() => {
+    if (!mapRef.current) return;
+    const points: { lat: number; lon: number }[] = [];
+
+    if (stop.latitude && stop.longitude) {
+      points.push({ lat: stop.latitude, lon: stop.longitude });
+    }
+
+    if (selectedBus?.currentPosition) {
+      points.push({
+        lat: selectedBus.currentPosition.latitude,
+        lon: selectedBus.currentPosition.longitude,
+      });
+    }
+
+    if (points.length === 0) return;
+
+    let minLat = points[0].lat,
+      maxLat = points[0].lat,
+      minLon = points[0].lon,
+      maxLon = points[0].lon;
+    for (const p of points) {
+      if (p.lat < minLat) minLat = p.lat;
+      if (p.lat > maxLat) maxLat = p.lat;
+      if (p.lon < minLon) minLon = p.lon;
+      if (p.lon > maxLon) maxLon = p.lon;
+    }
+
+    const sw = [minLon, minLat] as [number, number];
+    const ne = [maxLon, maxLat] as [number, number];
+    const bounds = new maplibregl.LngLatBounds(sw, ne);
+
+    try {
+      if (points.length === 1) {
+        const only = points[0];
+        mapRef.current
+          .getMap()
+          .easeTo({ center: [only.lon, only.lat], zoom: 16, duration: 450 });
+      } else {
+        mapRef.current.fitBounds(bounds, {
+          padding: 24,
+          duration: 500,
+          maxZoom: 17,
+        } as any);
+      }
+    } catch {}
+  }, [stop, selectedBus]);
+
+  // Load style without traffic layers for the stop map
+  useEffect(() => {
+    let mounted = true;
+    loadStyle("openfreemap", theme, { includeTraffic: false })
+      .then((style) => {
+        if (mounted) setStyleSpec(style);
+      })
+      .catch((err) => console.error("Failed to load map style", err));
+    return () => {
+      mounted = false;
+    };
+  }, [theme]);
+
+  // Resize map and fit bounds when modal opens
+  useEffect(() => {
+    if (isOpen && mapRef.current) {
+      const timer = setTimeout(() => {
+        const map = mapRef.current?.getMap();
+        if (map) {
+          map.resize();
+          // Trigger fit bounds logic again
+          hasFitBounds.current = false;
+          handleCenter();
+        }
+      }, 300); // Wait for sheet animation
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen, handleCenter]);
+
+  // Fit bounds on initial load
+  useEffect(() => {
+    if (!styleSpec || !mapRef.current || hasFitBounds.current || !isOpen)
+      return;
+
+    const map = mapRef.current.getMap();
+
+    // Handle missing sprite images to suppress console warnings
+    const handleStyleImageMissing = (e: any) => {
+      if (!map || map.hasImage(e.id)) return;
+      map.addImage(e.id, {
+        width: 1,
+        height: 1,
+        data: new Uint8Array(4),
+      });
+    };
+
+    map.on("styleimagemissing", handleStyleImageMissing);
+
+    handleCenter();
+    hasFitBounds.current = true;
+
+    return () => {
+      if (mapRef.current) {
+        const map = mapRef.current.getMap();
+        if (map) {
+          map.off("styleimagemissing", handleStyleImageMissing);
+        }
+      }
+    };
+  }, [styleSpec, stop, selectedBus, isOpen, handleCenter]);
+
+  // Reset bounds when modal opens/closes
+  useEffect(() => {
+    if (!isOpen) {
+      hasFitBounds.current = false;
+    }
+  }, [isOpen]);
+
+  if (busesWithPosition.length === 0) {
+    return null; // Don't render if no buses with GPS coordinates
+  }
+
+  return (
+    <Sheet
+      isOpen={isOpen}
+      onClose={onClose}
+      detent="content"
+    >
+      <Sheet.Container style={{ backgroundColor: "var(--background-color)" }}>
+        <Sheet.Header />
+        <Sheet.Content disableDrag={true}>
+          <div className="stop-map-modal">
+            {/* Map Container */}
+            <div className="stop-map-modal__map-container">
+              {styleSpec && (
+                <Map
+                  mapLib={maplibregl as any}
+                  initialViewState={{
+                    latitude: center.latitude,
+                    longitude: center.longitude,
+                    zoom: 16,
+                  }}
+                  style={{ width: "100%", height: "320px" }}
+                  mapStyle={styleSpec}
+                  attributionControl={false}
+                  ref={mapRef}
+                  interactive={true}
+                >
+                  {/* Stop marker */}
+                  {stop.latitude && stop.longitude && (
+                    <Marker
+                      longitude={stop.longitude}
+                      latitude={stop.latitude}
+                      anchor="bottom"
+                    >
+                      <div title={`Stop ${stop.stopId}`}>
+                        <svg width="28" height="36" viewBox="0 0 28 36">
+                          <defs>
+                            <filter
+                              id="drop-stop"
+                              x="-20%"
+                              y="-20%"
+                              width="140%"
+                              height="140%"
+                            >
+                              <feDropShadow
+                                dx="0"
+                                dy="1"
+                                stdDeviation="1"
+                                floodOpacity={0.35}
+                              />
+                            </filter>
+                          </defs>
+                          <path
+                            d="M14 0C6.82 0 1 5.82 1 13c0 8.5 11 23 13 23s13-14.5 13-23C27 5.82 21.18 0 14 0z"
+                            fill="#1976d2"
+                            stroke="#fff"
+                            strokeWidth="2"
+                            filter="url(#drop-stop)"
+                          />
+                          <circle cx="14" cy="13" r="5" fill="#fff" />
+                          <circle cx="14" cy="13" r="3" fill="#1976d2" />
+                        </svg>
+                      </div>
+                    </Marker>
+                  )}
+
+                  {/* Selected bus marker */}
+                  {selectedBus?.currentPosition && (
+                    <Marker
+                      longitude={selectedBus.currentPosition.longitude}
+                      latitude={selectedBus.currentPosition.latitude}
+                      anchor="center"
+                    >
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          gap: 6,
+                          transform: `rotate(${selectedBus.currentPosition.orientationDegrees}deg)`,
+                          transformOrigin: "center center",
+                        }}
+                      >
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          style={{
+                            filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))",
+                          }}
+                        >
+                          <path
+                            d="M12 2 L22 22 L12 17 L2 22 Z"
+                            fill={getLineColor(region, selectedBus.line).background}
+                            stroke="#fff"
+                            strokeWidth="2"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </div>
+                    </Marker>
+                  )}
+                </Map>
+              )}
+
+              {/* Floating controls */}
+              <div className="map-modal-controls">
+                <button
+                  type="button"
+                  aria-label="Center"
+                  className="center-btn"
+                  onClick={handleCenter}
+                  title="Center view"
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                  >
+                    <circle cx="12" cy="12" r="3" fill="currentColor" />
+                    <path
+                      d="M12 2v3M12 19v3M2 12h3M19 12h3"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                    />
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="8"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop onClick={onClose} />
+    </Sheet>
+  );
+};
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
index f725b8c..47fa56b 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
@@ -9,6 +9,7 @@ import "./ConsolidatedCirculationList.css";
 interface ConsolidatedCirculationCardProps {
   estimate: ConsolidatedCirculation;
   regionConfig: RegionConfig;
+  onMapClick?: () => void;
 }
 
 // Utility function to parse service ID and get the turn number
@@ -70,7 +71,7 @@ const parseServiceId = (serviceId: string): string => {
 
 export const ConsolidatedCirculationCard: React.FC<
   ConsolidatedCirculationCardProps
-> = ({ estimate, regionConfig }) => {
+> = ({ estimate, regionConfig, onMapClick }) => {
   const { t } = useTranslation();
 
   const absoluteArrivalTime = (minutes: number) => {
@@ -168,8 +169,19 @@ export const ConsolidatedCirculationCard: React.FC<
     return chips;
   }, [delayChip, estimate.schedule, estimate.realTime]);
 
+  // Check if bus has GPS position (live tracking)
+  const hasGpsPosition = !!estimate.currentPosition;
+
   return (
-    <div className="consolidated-circulation-card">
+    <button
+      className={`consolidated-circulation-card ${
+        hasGpsPosition ? "has-gps" : "no-gps"
+      }`}
+      onClick={onMapClick}
+      type="button"
+      disabled={!hasGpsPosition}
+      aria-label={`${hasGpsPosition ? "View" : "No GPS data for"} ${estimate.line} to ${estimate.route}${hasGpsPosition ? " on map" : ""}`}
+    >
       <div className="card-row main">
         <div className="line-info">
           <LineIcon line={estimate.line} region={regionConfig.id} rounded />
@@ -183,6 +195,11 @@ export const ConsolidatedCirculationCard: React.FC<
             <span className="eta-unit">{etaUnit}</span>
           </div>
         </div>
+        {hasGpsPosition && (
+          <div className="gps-indicator" title="Live GPS tracking">
+            <span className="gps-pulse" />
+          </div>
+        )}
       </div>
       {metaChips.length > 0 && (
         <div className="card-row meta">
@@ -196,6 +213,6 @@ export const ConsolidatedCirculationCard: React.FC<
           ))}
         </div>
       )}
-    </div>
+    </button>
   );
 };
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.css b/src/frontend/app/components/Stops/ConsolidatedCirculationList.css
index 7e757fb..680a511 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.css
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.css
@@ -13,6 +13,7 @@
 }
 
 .consolidated-circulation-card {
+  all: unset;
   flex: 0 0 auto;
   display: flex;
   flex-direction: column;
@@ -21,11 +22,34 @@
   border-radius: 12px;
   border: 1px solid var(--border-color);
   padding: 0.65rem 0.85rem;
-  transition: box-shadow 0.2s ease;
+  transition: all 0.2s ease;
 }
 
-.consolidated-circulation-card:hover {
+.consolidated-circulation-card.has-gps {
+  cursor: pointer;
+}
+
+.consolidated-circulation-card.no-gps {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.consolidated-circulation-card.has-gps:hover {
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
+  border-color: var(--button-background-color);
+  background-color: color-mix(
+    in oklab,
+    var(--button-background-color) 5%,
+    var(--message-background-color)
+  );
+}
+
+.consolidated-circulation-card.has-gps:active {
+  transform: scale(0.98);
+}
+
+.consolidated-circulation-card:disabled {
+  pointer-events: none;
 }
 
 
@@ -149,6 +173,39 @@
   color: #1d4ed8;
 }
 
+/* GPS Indicator */
+.gps-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.gps-pulse {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: #22c55e;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  animation: gpsPulse 2s ease-in-out infinite;
+}
+
+@keyframes gpsPulse {
+  0% {
+    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  }
+  50% {
+    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.1);
+  }
+  100% {
+    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+  }
+}
+
 @media (max-width: 480px) {
   .consolidated-circulation-card {
     padding: 0.65rem 0.75rem;
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
index 047dfd4..4c2916a 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationList.tsx
@@ -9,12 +9,14 @@ interface RegularTableProps {
   data: ConsolidatedCirculation[];
   dataDate: Date | null;
   regionConfig: RegionConfig;
+  onCirculationClick?: (estimate: ConsolidatedCirculation, index: number) => void;
 }
 
 export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
   data,
   dataDate,
   regionConfig,
+  onCirculationClick,
 }) => {
   const { t } = useTranslation();
 
@@ -43,6 +45,7 @@ export const ConsolidatedCirculationList: React.FC<RegularTableProps> = ({
               key={idx}
               estimate={estimate}
               regionConfig={regionConfig}
+              onMapClick={() => onCirculationClick?.(estimate, idx)}
             />
           ))}
         </>
diff --git a/src/frontend/app/maps/styleloader.ts b/src/frontend/app/maps/styleloader.ts
index 43118a0..8109e0b 100644
--- a/src/frontend/app/maps/styleloader.ts
+++ b/src/frontend/app/maps/styleloader.ts
@@ -1,10 +1,17 @@
 import type { StyleSpecification } from "react-map-gl/maplibre";
 import type { Theme } from "~/AppContext";
 
+export interface StyleLoaderOptions {
+  includeTraffic?: boolean;
+}
+
 export async function loadStyle(
   styleName: string,
-  colorScheme: Theme
+  colorScheme: Theme,
+  options?: StyleLoaderOptions
 ): Promise<StyleSpecification> {
+  const { includeTraffic = true } = options || {};
+
   if (colorScheme == "system") {
     const isDarkMode = window.matchMedia(
       "(prefers-color-scheme: dark)"
@@ -21,6 +28,15 @@ export async function loadStyle(
     }
 
     const style = await resp.json();
+
+    // Remove traffic layers if not requested
+    if (!includeTraffic) {
+      style.layers = (style.layers || []).filter(
+        (layer: any) => !layer.id?.startsWith("vigo_traffic")
+      );
+      delete style.sources?.vigo_traffic;
+    }
+
     return style as StyleSpecification;
   }
 
@@ -33,6 +49,14 @@ export async function loadStyle(
 
   const style = await resp.json();
 
+  // Remove traffic layers if not requested
+  if (!includeTraffic) {
+    style.layers = (style.layers || []).filter(
+      (layer: any) => !layer.id?.startsWith("vigo_traffic")
+    );
+    delete style.sources?.vigo_traffic;
+  }
+
   const baseUrl = window.location.origin;
   const spritePath = style.sprite;
 
diff --git a/src/frontend/app/routes/stops-$id.css b/src/frontend/app/routes/stops-$id.css
index 9ecac16..782d9a1 100644
--- a/src/frontend/app/routes/stops-$id.css
+++ b/src/frontend/app/routes/stops-$id.css
@@ -63,6 +63,30 @@
   flex-shrink: 0;
 }
 
+.stops-header > div:first-child {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.star-icon,
+.edit-icon {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--text-secondary);
+}
+
+.star-icon:hover,
+.edit-icon:hover {
+  color: var(--text-primary);
+  transform: scale(1.1);
+}
+
+.star-icon.active {
+  color: #fbbf24;
+  fill: #fbbf24;
+}
+
 .manual-refresh-button {
   display: flex;
   align-items: center;
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index f340009..a2b2da3 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -5,7 +5,7 @@ import { useParams } from "react-router";
 import { ErrorDisplay } from "~/components/ErrorDisplay";
 import LineIcon from "~/components/LineIcon";
 import { StopAlert } from "~/components/StopAlert";
-import { StopMap } from "~/components/StopMapSheet";
+import { StopMapModal } from "~/components/StopMapModal";
 import { ConsolidatedCirculationList } from "~/components/Stops/ConsolidatedCirculationList";
 import { ConsolidatedCirculationListSkeleton } from "~/components/Stops/ConsolidatedCirculationListSkeleton";
 import { type RegionId, getRegionConfig } from "~/config/RegionConfig";
@@ -77,6 +77,10 @@ export default function Estimates() {
 
   const [favourited, setFavourited] = useState(false);
   const [isManualRefreshing, setIsManualRefreshing] = useState(false);
+  const [isMapModalOpen, setIsMapModalOpen] = useState(false);
+  const [selectedCirculationIdx, setSelectedCirculationIdx] = useState<
+    number | undefined
+  >(undefined);
   const { region } = useApp();
   const regionConfig = getRegionConfig(region);
 
@@ -195,15 +199,16 @@ export default function Estimates() {
       <div className="page-container stops-page">
         <div className="stops-header">
           <div>
-          <Star
-            className={`star-icon ${favourited ? "active" : ""}`}
-            onClick={toggleFavourite}
-            width={20}
-          />
-          <Edit2
-            className="edit-icon"
-            onClick={handleRename}
-            width={20} />
+            <Star
+              className={`star-icon ${favourited ? "active" : ""}`}
+              onClick={toggleFavourite}
+              width={20}
+            />
+            <Edit2
+              className="edit-icon"
+              onClick={handleRename}
+              width={20}
+            />
           </div>
 
           <button
@@ -247,12 +252,17 @@ export default function Estimates() {
               data={data}
               dataDate={dataDate}
               regionConfig={regionConfig}
+              onCirculationClick={(estimate, idx) => {
+                setSelectedCirculationIdx(idx);
+                setIsMapModalOpen(true);
+              }}
             />
           ) : null}
         </div>
 
+        {/* Map Modal - only render if we have stop data */}
         {stopData && (
-          <StopMap
+          <StopMapModal
             stop={stopData}
             region={region}
             circulations={(data ?? []).map((c) => ({
@@ -260,6 +270,9 @@ export default function Estimates() {
               route: c.route,
               currentPosition: c.currentPosition,
             }))}
+            isOpen={isMapModalOpen}
+            onClose={() => setIsMapModalOpen(false)}
+            selectedCirculationIndex={selectedCirculationIdx}
           />
         )}
       </div>