diff --git a/public/app.js b/public/app.js
index 2decd1d..dbe2a2b 100644
--- a/public/app.js
+++ b/public/app.js
@@ -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: '© OpenStreetMap',
+}).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}
${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));
diff --git a/public/index.html b/public/index.html
index 62de5ee..d9ce6b5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,9 +1,9 @@