PRO150-Group/Project
3
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'backend' of https://git.nathanspackman.com/PRO150-Group/Project into backend
Some checks failed
Deploy Express API / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
thenatespack
2025-12-01 23:02:26 -07:00
parent 75581a9ddc 2771b5ea74
commit c5abf60bff
4 changed files with 31 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
public/app.js
View File

@@ -3,23 +3,10 @@ var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: '© OpenStreetMap contributors'
});
var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri'
});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
var map = L.map('map', {
center: [40.7608, -111.8910],
zoom: 13,
layers: [streets]
});
var baseMaps = { "Streets": streets, "Satellite": satellite };
L.control.layers(baseMaps).addTo(map);
const MJR_LINES = ["701", "703", "704", "720", "750"];
const LRT_LINES = ["701", "703", "704", "720"];
const FRONTRUNNER = ["750"];
const API_URL = "http://localhost:7653/api/v0/";
const ROUTE_STYLES = {
"701": { color: "#0074D9", train: "🔵", stop: "🔹" },
@@ -52,11 +39,11 @@ function buildIcon(emoji, bearing) {
function addMarker(lat, lon, content, icon) {
if (!isNaN(lat) && !isNaN(lon)) {
const marker = L.marker([lat, lon], { icon });
const marker = L.marker([lat, lon], { icon: icon }).addTo(map);
if (content) marker.bindPopup(content);
return marker;
} else {
console.warn("Invalid coordinates:", latitude, longitude);
}
console.warn("Invalid coordinates:", lat, lon);
}
@@ -68,26 +55,13 @@ function drawLine(route) {
fetch(API_URL + "routepaths/" + route)
.then(res => res.json())
.then(data => {
const points = data.data;
if (!points || points.length === 0) return;
const color = ROUTE_STYLES[route].color;
let polylinePoints = [];
let currentShape = points[0].shape_id;
points.forEach(p => {
if (p.shape_id === currentShape) {
polylinePoints.push([p.lat, p.lng]);
} else {
drawPolyLine(polylinePoints, color);
polylinePoints = [[p.lat, p.lng]];
currentShape = p.shape_id;
}
const trains = data.data;
const filtered = route ? trains.filter(t => t.routeId == route) : trains;
filtered.forEach(t => {
addMarker(t.location.latitude, t.location.longitude, t.routeName + ": Vehicle " + t.vehicleId, trainEmojiIcon);
});
if (polylinePoints.length > 0) drawPolyLine(polylinePoints, color);
})
.catch(err => console.error("Error drawing line:", err));
.catch(err => console.error("Error fetching trains:", err));
}
function drawLines() {
@@ -97,22 +71,14 @@ function drawLines() {
let stopMarkers = {};
function getStopsByRoute(route) {
if (stopMarkers[route]) return;
stopMarkers[route] = [];
const stopIcon = buildIcon(ROUTE_STYLES[route].stop);
fetch(API_URL + "stops/" + route)
fetch(API_URL + 'stops/' + route)
.then(res => res.json())
.then(data => {
data.data.forEach(s => {
const lat = parseFloat(s.location.latitude);
const lon = parseFloat(s.location.longitude);
const marker = addMarker(
lat, lon,
`${s.stop_name}<br>${s.stop_desc}`,
stopIcon
).addTo(map);
stopMarkers[route].push(marker);
const stops = data.data;
stops.forEach(s => {
const lat = parseFloat(s.stop_lat);
const lon = parseFloat(s.stop_lon);
addMarker(lat,lon, s.stop_name + " - " + s.stop_desc, stopsEmojiIcon);
});
})
.catch(err => console.error("Error fetching stops:", err));

30
public/index.html
View File

@@ -1,9 +1,9 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Traxer Transit Map</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traxer</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="stylesheet"
@@ -14,25 +14,11 @@
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
crossorigin=""
></script>
<!-- SlideTo plugin -->
<script src='https://unpkg.com/leaflet.marker.slideto@0.2.0/Leaflet.Marker.SlideTo.js'></script>
</head>
<body class="h-full">
<!-- Filter UI -->
<div class="p-4 bg-gray-100">
<label class="mr-2 font-semibold">Show Vehicles:</label>
<select id="filterSelect" class="border p-1 rounded">
<option value="all">All Routes</option>
<option value="lrt">LRT + FrontRunner</option>
</select>
</div>
<!-- Map -->
<div id="map" class="w-full h-[70vh]"></div>
<!-- App JS -->
<script src="app.js"></script>
<body>
<div id="map" class="w-full h-screen"></div>
</body>
<script src="app.js"></script>
</html>