cjdenio/uta-trax-api
1
0 Fork 0
mirror of https://github.com/cjdenio/uta-trax-api.git synced 2026-10-03 16:06:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

NEW FEATURE: display route when clicking vehicle

Browse Source
This commit is contained in:
cjdenio committed 2026-09-20 17:15:57 -06:00
1 parent 0831e523fa
commit b7321adbe4
2 files changed
+67 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

static/js/main.js
+35 -6
View File
@@ -91,11 +91,15 @@ const brtLayer = L.layerGroup().addTo(map);
const traxLayer = L.layerGroup().addTo(map);
const frontRunnerLayer = L.layerGroup().addTo(map);
L.polyline(shapes.blueLine, { color: "#004a97", zIndexOffset: 10 }).addTo(map);
L.polyline(shapes.redLine, { color: "#be2036", zIndexOffset: 10 }).addTo(map);
L.polyline(shapes.greenLine, { color: "#2eb566", zIndexOffset: 10 }).addTo(map);
L.polyline(shapes.sLine, { color: "#77777a", zIndexOffset: 10 }).addTo(map);
L.polyline(shapes.frontRunner, { color: "#c227b9", zIndexOffset: 10 }).addTo(map);
const railLayer = L.layerGroup().addTo(map);
const currentRouteLayer = L.layerGroup().addTo(map);
L.polyline(shapes.blueLine, { color: "#004a97", zIndexOffset: 10 }).addTo(railLayer);
L.polyline(shapes.redLine, { color: "#be2036", zIndexOffset: 10 }).addTo(railLayer);
L.polyline(shapes.greenLine, { color: "#2eb566", zIndexOffset: 10 }).addTo(railLayer);
L.polyline(shapes.sLine, { color: "#77777a", zIndexOffset: 10 }).addTo(railLayer);
L.polyline(shapes.frontRunner, { color: "#c227b9", zIndexOffset: 10 }).addTo(railLayer);
// render stations
for (const station of stations) {
@@ -240,6 +244,18 @@ function vehiclePopupContent(vehicle) {
return content
}
const tripShapeCache = new Map();
async function getTripShape(tripId) {
if (tripShapeCache.has(tripId)) {
return tripShapeCache.get(tripId);
} else {
const data = await fetch(`/api/trips/${tripId}`).then(r => r.json());
tripShapeCache.set(tripId, data.shape);
return data.shape;
}
}
function renderVehicle(vehicle) {
return L.marker([vehicle.lat, vehicle.lon], {
zIndexOffset:
@@ -248,7 +264,20 @@ function renderVehicle(vehicle) {
? 4000
: 3000,
icon: renderVehicleIcon(vehicle),
}).bindPopup(vehiclePopupContent(vehicle));
}).bindPopup(vehiclePopupContent(vehicle)).on("popupopen", () => {
getTripShape(vehicle.trip_id).then(shape => {
console.log(shape)
for (const layer of railLayer.getLayers()) {
layer.setStyle({ opacity: 0.2 });
}
L.polyline(shape, { color: `#${vehicle.route.color}`, zIndexOffset: 10 }).addTo(currentRouteLayer);
})
}).on("popupclose", () => {
for (const layer of railLayer.getLayers()) {
layer.setStyle({ opacity: 1.0 });
}
currentRouteLayer.clearLayers();
});
}
async function reload() {