mirror of
https://github.com/cjdenio/uta-trax-api.git
synced 2026-08-04 22:06:34 +00:00
83 lines
2.0 KiB
HTML
83 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
|
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
|
crossorigin=""
|
|
/>
|
|
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="map" style="height: 100vh"></div>
|
|
|
|
<script src="//cdn.jsdelivr.net/npm/protobufjs@7.X.X/dist/protobuf.min.js"></script>
|
|
<script
|
|
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
|
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
|
crossorigin=""
|
|
></script>
|
|
|
|
<script>
|
|
const COLORS = {
|
|
1: "#2eb566",
|
|
2: "#be2036",
|
|
3: "#004a97",
|
|
4: "#77777a",
|
|
5: "#c227b9",
|
|
};
|
|
let markers = []
|
|
|
|
var map = L.map("map").setView([40.656734, -111.890818], 12);
|
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19,
|
|
attribution:
|
|
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
|
}).addTo(map);
|
|
|
|
function clearMap() {
|
|
for (const marker of markers) {
|
|
marker.remove();
|
|
}
|
|
|
|
markers = [];
|
|
}
|
|
|
|
protobuf.load("/schema.proto").then((root) => {
|
|
setInterval(async () => {
|
|
const bin = await fetch("/api").then((r) => r.arrayBuffer());
|
|
const { vehicles } = root
|
|
.lookupType("VehicleFeed")
|
|
.decode(new Uint8Array(bin));
|
|
|
|
clearMap();
|
|
|
|
vehicles.forEach((vehicle) => {
|
|
markers.push(
|
|
L.circleMarker([vehicle.lat, vehicle.lon], {
|
|
fillColor: COLORS[vehicle.line],
|
|
color: COLORS[vehicle.line],
|
|
fillOpacity: 0.5,
|
|
radius: 8,
|
|
})
|
|
.addTo(map)
|
|
.bindPopup(
|
|
`${vehicle.headsign}<br />@ ${vehicle.nearestStation.name}`
|
|
)
|
|
);
|
|
});
|
|
}, 5000);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|