Skip to content

different map api and visual changes #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JanDavidElla wants to merge 2 commits into
base: master
Choose a base branch
from
Open

different map api and visual changes #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3df846
Removed button and changed map api
JanDavidElla Aug 15, 2026
91564ed
Changed padding and visuals
JanDavidElla Aug 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions frontend/src/Components/RouteCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && ', '}
Expand Down
62 changes: 16 additions & 46 deletions frontend/src/TransitPredictionsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -76,29 +71,6 @@ 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;
L.Icon.Default.mergeOptions({
iconRetinaUrl: markerIcon,
iconUrl: markerIcon,
shadowUrl: markerShadow,
});

if (error) {
return (
Expand Down Expand Up @@ -127,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}
Expand All @@ -138,24 +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>
{maybeRenderCallButton(stop.id)}
<div className="w-full">
{stop.predictions
.sort((a, b) => a.route.localeCompare(b.route))
.map((prediction, predictionIndex) => (
Expand All @@ -173,16 +144,15 @@ 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>
))}

Expand Down
18 changes: 17 additions & 1 deletion frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@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);
}
27 changes: 27 additions & 0 deletions server/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down