From f3df846c549d85db203da42e131665e9dca0f8df Mon Sep 17 00:00:00 2001
From: Jan David Ella <jd.ella@yahoo.com>
Date: Fri, 14 Aug 2026 22:40:15 -0700
Subject: [PATCH 1/2] Removed button and changed map api

---
 frontend/src/TransitPredictionsPage.js | 34 ++++++--------------------
 server/app.py                          | 27 ++++++++++++++++++++
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/frontend/src/TransitPredictionsPage.js b/frontend/src/TransitPredictionsPage.js
index aadde15..99e00f6 100644
--- a/frontend/src/TransitPredictionsPage.js
+++ b/frontend/src/TransitPredictionsPage.js
@@ -76,21 +76,7 @@ export default function TransitPredictionsPage() {
     window.location.hash = encode(newStop)
   };
 
-  function maybeRenderCallButton(stopId) {
-    if (Number.isNaN(Number.parseInt(stopId))) {
-      return <></>
-    }
-    return (
-      <div className="flex justify-center">
-        <a
-          href={`tel:511p1p1,,${(stopId)}`}
-          className="inline-block px-2 py-1 ml-2 text-white text-sm lg:text-lg bg-blue-600 border border-blue-600 rounded hover:bg-blue-700"
-        >
-          CLICK TO CALL
-        </a>
-      </div>
-    );
-  }
+
 
   //set default marker icon
   delete L.Icon.Default.prototype._getIconUrl;
@@ -155,7 +141,6 @@ export default function TransitPredictionsPage() {
                 <span className="text-2xl">No predictions available at this time</span>
               ) : (
                 <div>
-                  {maybeRenderCallButton(stop.id)}
                   {stop.predictions
                     .sort((a, b) => a.route.localeCompare(b.route))
                     .map((prediction, predictionIndex) => (
@@ -173,16 +158,13 @@ export default function TransitPredictionsPage() {
           ))}
           {!!busData.length && busData.map((stop) => (
             stop.name === selectedStop &&
-            <div key={stop.name} className="overflow-visible xl:mr-10 mt-4 items-center">
-              <MapContainer center={[stop.latitude, stop.longitude]} zoom={16} className="mx-auto rounded-lg h-[30vh] xl:h-[29em] w-full">
-                <TileLayer
-                  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                  attribution="&copy; OpenStreetMap contributors"
-                />
-                <Marker position={[stop.latitude, stop.longitude]}>
-                  <Popup>{stop.name}</Popup>
-                </Marker>
-              </MapContainer>
+              <div key={stop.name} className="mt-4 h-[35vh] items-center overflow-visible xl:mt-2 xl:h-[38rem]">
+              <iframe
+                title="Stop map"
+                sandbox="allow-scripts"
+                className="mx-auto h-full w-full rounded-lg border-0"
+                src={`https://www.openstreetmap.org/export/embed.html?bbox=${stop.longitude - 0.003}%2C${stop.latitude - 0.003}%2C${stop.longitude + 0.003}%2C${stop.latitude + 0.003}&layer=transportmap&marker=${stop.latitude}%2C${stop.longitude}`}
+              />
             </div>
           ))}
 
diff --git a/server/app.py b/server/app.py
index 11a526a..4883039 100644
--- a/server/app.py
+++ b/server/app.py
@@ -125,6 +125,33 @@ def get_stop_predictions(stop_id, operator, stop_name, use_destination_as_name=F
 
     latitude = stop_coordinates.get(stop_id, {}).get('lat')
     longitude = stop_coordinates.get(stop_id, {}).get('lon')
+
+    # Fetch coordinates dynamically when this operator supports the StopPlaces
+    # lookup. Some operators (including BART for MLPT) will
+    coordinate_params = {
+        'api_key': API_KEY,
+        'operator_id': operator,
+        'format': 'json',
+        'stop_id': stop_id,
+    }
+    try:
+        location_response = requests.get(
+            'https://api.511.org/transit/stopplaces',
+            params=coordinate_params,
+            timeout=10,
+        )
+        location_response.raise_for_status()
+        location_data = location_response.json()
+        location = location_data["Siri"]["ServiceDelivery"]["DataObjectDelivery"]["dataObjects"]["SiteFrame"]["stopPlaces"]["StopPlace"]["Centroid"]["Location"]
+        latitude = float(location["Latitude"])
+        longitude = float(location["Longitude"])
+    except (requests.RequestException, KeyError, TypeError, ValueError):
+        logging.warning(
+            "Unable to fetch coordinates for operator %s stop %s; using fallback coordinates",
+            operator,
+            stop_id,
+        )
+
     params = {
         'api_key': API_KEY,
         'agency': operator,

From 91564edaa02ad7d99f7bd993718185ce170619ca Mon Sep 17 00:00:00 2001
From: Jan David Ella <jd.ella@yahoo.com>
Date: Sat, 15 Aug 2026 01:08:29 -0700
Subject: [PATCH 2/2] Changed padding and visuals

---
 frontend/src/Components/RouteCard.js   | 19 +++++++++------
 frontend/src/TransitPredictionsPage.js | 32 ++++++++------------------
 frontend/src/index.css                 | 18 ++++++++++++++-
 3 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/frontend/src/Components/RouteCard.js b/frontend/src/Components/RouteCard.js
index 9bc446e..fd1e2d6 100644
--- a/frontend/src/Components/RouteCard.js
+++ b/frontend/src/Components/RouteCard.js
@@ -10,14 +10,19 @@ export default function RouteCard({ route, destinations, useDestinationAsName })
       </div>
       {Object.entries(destinations).map(([destination, times ]) => (
         <div key={destination}>
-          <div className="md:grid md:gap-2 xl:grid-cols-[60%_40%] md:grid-cols-[45%_55%] text-xl md:text-2xl md:w-[60vw] w-[70vw]">
-            <div>
-              <b className=" mb-1 text-primary text-[1rem] md:text-3xl">{route}</b>
-              {useDestinationAsName ? null : (
-                <span className="mb-1 text-white text-[1rem] md:text-3xl"> to {destination}</span>
-              )}
+          <div className="grid gap-2 md:gap-2 xl:grid-cols-[60%_40%] md:grid-cols-[45%_55%] w-full min-w-0">
+            <div className="min-w-0 whitespace-nowrap">
+              <div className="inline-flex items-center gap-2">
+                <b className="route-card-label inline-flex items-center align-middle text-primary">{route}</b>
+                {useDestinationAsName ? null : (
+                  <>
+                    <span aria-hidden="true" className="route-card-label text-black dark:text-white">→</span>
+                    <span className="route-card-label text-black dark:text-white">{destination}</span>
+                  </>
+                )}
+              </div>
             </div>
-            <span className="text-[1rem] md:text-2xl md:text-right">
+            <span className="route-card-times whitespace-nowrap md:text-right">
               {times.map((time, timeIndex) => (
                 <span key={timeIndex}>
                   {formatDateToTime(time)} {timeIndex !== times.length - 1 && ', '}
diff --git a/frontend/src/TransitPredictionsPage.js b/frontend/src/TransitPredictionsPage.js
index 99e00f6..ce03b5a 100644
--- a/frontend/src/TransitPredictionsPage.js
+++ b/frontend/src/TransitPredictionsPage.js
@@ -2,11 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { getTransitPredictions } from './APIFunctions/SCEta';
 import { formatDateToTime } from './util/formatDateToTime';
 import RouteCard from './Components/RouteCard';
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
-import 'leaflet/dist/leaflet.css';
-import L from 'leaflet';
-import markerIcon from 'leaflet/dist/images/marker-icon.png';
-import markerShadow from 'leaflet/dist/images/marker-shadow.png';
 
 export default function TransitPredictionsPage() {
   const [error, setError] = useState();
@@ -77,15 +72,6 @@ export default function TransitPredictionsPage() {
   };
 
 
-
-  //set default marker icon
-  delete L.Icon.Default.prototype._getIconUrl;
-  L.Icon.Default.mergeOptions({
-    iconRetinaUrl: markerIcon,
-    iconUrl: markerIcon,
-    shadowUrl: markerShadow,
-  });
-
   if (error) {
     return (
       <section className="bg-white dark:bg-gray-900 min-h-[calc(100vh)] ">
@@ -113,7 +99,7 @@ export default function TransitPredictionsPage() {
         {/* Dropdown for smaller screens */}
         <div className="xl:hidden flex flex-col justify-center space-x-4 overflow-x-auto">
           <select value={selectedStop} onChange={(e) => changeTab(e.target.value)}
-            className="px-4 py-2 text-sm md:text-xl font-semibold border-b-2 outline-none bg-gray-800">
+            className="px-4 py-2 text-sm md:text-xl font-semibold border-b-2 outline-none bg-gray-200 dark:bg-gray-800 rounded-lg">
             {stopOptions.map((stopName) => (
               <option key={stopName} value={stopName}>
                 {stopName}
@@ -124,23 +110,23 @@ export default function TransitPredictionsPage() {
         {/* Tabs for larger screens */}
         <div className="hidden items-center xl:flex flex-row justify-center space-x-4 overflow-x-auto">
           {stopOptions.map((stopName) => (
-            <button key={stopName} className={`px-4 py-2 text-xl font-semibold border-b-2 
-            ${selectedStop === stopName ? 'border-blue-500 text-blue-500' : 'border-transparent text-gray-500 hover:border-gray-300'}`}
+            <button key={stopName} className={`px-4 py-2 text-xl font-semibold border-b-2
+            ${selectedStop === stopName ? 'border-blue-500 text-blue-500 bg-gray-200 rounded-lg' : 'border-transparent text-gray-500 hover:border-gray-300'}`}
               onClick={() => changeTab(stopName)}>
               {stopName}
             </button>
           ))}
         </div>
-        <div className="flex flex-col xl:grid xl:grid-cols-[70%_30%] gap-8">
+        <div className="flex flex-col gap-8 xl:grid xl:grid-cols-[5fr_7fr] xl:gap-7">
           {!!busData.length && busData.map((stop) => (
             stop.name === selectedStop &&
-            <div key={stop.name} className="items-center text-center md:text-left flex flex-col w-full xl:w-full mt-2 p-6 min-w-50 max-h-[65vh] text-xl
+            <div key={stop.name} className="route-predictions-card items-center text-center md:text-left flex flex-col w-full xl:w-full mt-2 p-6 xl:p-5 min-w-50 max-h-[65vh] xl:h-[38rem] xl:max-h-[38rem] text-xl
                 bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 overflow-y-auto">
-              <div className="flex justify-center xl:justify-start font-bold text-[1rem] md:text-4xl mb-5 xl:mb-10">{stop.name}</div>
+              <div className="stop-name flex justify-center xl:justify-start font-bold mb-5 xl:mb-10">{stop.name}</div>
               {stop.predictions.length === 0 ? (
                 <span className="text-2xl">No predictions available at this time</span>
               ) : (
-                <div>
+                <div className="w-full">
                   {stop.predictions
                     .sort((a, b) => a.route.localeCompare(b.route))
                     .map((prediction, predictionIndex) => (
@@ -158,13 +144,15 @@ export default function TransitPredictionsPage() {
           ))}
           {!!busData.length && busData.map((stop) => (
             stop.name === selectedStop &&
-              <div key={stop.name} className="mt-4 h-[35vh] items-center overflow-visible xl:mt-2 xl:h-[38rem]">
+            <div key={stop.name} className="mt-4 h-[35vh] items-center overflow-visible xl:mt-2 xl:h-[38rem]">
               <iframe
                 title="Stop map"
                 sandbox="allow-scripts"
                 className="mx-auto h-full w-full rounded-lg border-0"
                 src={`https://www.openstreetmap.org/export/embed.html?bbox=${stop.longitude - 0.003}%2C${stop.latitude - 0.003}%2C${stop.longitude + 0.003}%2C${stop.latitude + 0.003}&layer=transportmap&marker=${stop.latitude}%2C${stop.longitude}`}
               />
+
+
             </div>
           ))}
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index bd6213e..bdba66a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,19 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.route-predictions-card {
+  container-type: inline-size;
+}
+
+.stop-name {
+  font-size: clamp(1rem, 5cqw, 2.25rem);
+}
+
+.route-card-label {
+  font-size: clamp(0.9rem, 4cqw, 1.65rem);
+}
+
+.route-card-times {
+  font-size: clamp(0.8rem, 3cqw, 1.2rem);
+}