steven/tarc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First public release

Browse source
This commit is contained in:
Steven 2025-03-06 00:59:38 -05:00
parent 16691e8211
commit 2f7d67aa5a
4 changed files with 145 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
templates/index.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>TARC Routes</title>
<meta charset="UTF-8">
<meta content="Realtime TARC bus maps" property="og:title">
<meta content='https://tarc.stevenalexander.org/bus.svg' property='og:image'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/bus.svg">
<style>
body {
font-family: monospace;
font-size: 1cm;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
Find <a href="https://www.ridetarc.org/about-us/news/">news</a> and <a href="https://www.ridetarc.org/alerts/">alerts</a> at ridetarc.org<br>
Some busses don't provide location data.<br>
This service is provided without warranty.<br>
{%- for route in routes %}
<a href="{{route}}">{{'%02d'%route}} {{routes[route]["name"]}}</a><br>
{%- endfor %}
</body>
</html>

67
templates/map.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Route {{route}}</title>
<meta charset="UTF-8">
<meta content="Route {{route}}" property="og:title">
<meta content='https://tarc.stevenalexander.org/bus.svg' property='og:image'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="/bus.svg">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<style>
html, body {
height: 100%;
margin: 0;
}
#map {
height: 100vh;
}
#clock {
background-color: #000;
color: #FFF;
font: 16px monospace;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map=L.map("map",{center:[38.21,-85.75],zoom:13,layers:[L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")]});
L.control.scale({"position":"topright"}).addTo(map);
document.querySelector(".leaflet-top.leaflet-right").addEventListener("click",function() {
map.getContainer().requestFullscreen()
})
let s={{stops|safe}};
for (i in s) {
L.circle([s[i][0],s[i][1]],{radius:20,color:"#0092da"}).bindPopup(`<b>${s[i][2]} (#${i})</b><br>Sequence #${s[i].slice(3)}`).addTo(map)
}
let busMarkers=L.layerGroup().addTo(map);
function updateMap() {
fetch("{{route}}.csv").then(response=>response.text()).then(data=>{
if (data == "") return;
busMarkers.clearLayers();
data.split("\n").forEach(line=>{
var [n,t,lat,lng]=line.split(",");
L.marker([lat,lng]).bindPopup("<b>"+n+"</b> at<br>"+new Date(t*1000).toLocaleTimeString()).addTo(busMarkers)
})
})
}
document.querySelector(".leaflet-bottom.leaflet-right").innerHTML='<div id="clock"></div>';
let clockElement=document.querySelector("#clock");
function updateClock() {
clockElement.textContent=busMarkers.getLayers().length+" TARC(s) - "+new Date().toLocaleTimeString()
}
setInterval(updateMap,5000); // use websocket?
setInterval(updateClock,1000);
let locationMarker=L.marker([0,0]),locationRadius=L.circle([0,0]);
let locationLayer=L.layerGroup([locationMarker,locationRadius]).addTo(map);
map.locate({watch:true});
map.on("locationfound",e=>{
locationMarker.setLatLng(e.latlng).bindPopup("<b>You</b> at<br>"+new Date().toLocaleTimeString());
locationRadius.setLatLng(e.latlng).setRadius(e.accuracy/2).bringToBack()
});
</script>
</body>
</html>