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

adapt to (tarc.)rideralerts.com api

Browse source
This commit is contained in:
steven 2025-03-22 20:12:49 -04:00
parent 2f7d67aa5a
commit 0db90601d9
3 changed files with 17 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

41
templates/map.html
View file

@ -1,59 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Route {{route}}</title>
<title>TARC Routes</title>
<meta charset="UTF-8">
<meta content="Route {{route}}" property="og:title">
<meta content="TARC Routes" 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;
}
html,body{height:100%;margin:0;}
#map{height:100vh;}
#clock{background-color:black;color:white;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=>{
fetch("tarc.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)
var [lat,lng,r,id,p,d,s]=line.split(",");
L.marker([lat,lng]).bindPopup(`<b>Route ${r}</b><br>#${id}<br>${p} on board<br>${d}<br>@${s}mph`).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);
setInterval(updateMap,5000); // use websocket
let locationMarker=L.marker([0,0]),locationRadius=L.circle([0,0]);
let locationLayer=L.layerGroup([locationMarker,locationRadius]).addTo(map);