From 8c2a4ee19ba6daf1526f8e1a15ae4de1cb7a333e Mon Sep 17 00:00:00 2001
From: steven <steven@stevenalexander.org>
Date: Tue, 25 Mar 2025 17:18:11 -0400
Subject: [PATCH] keep popup when bus moves

---
 app.py             |  2 +-
 templates/map.html | 20 +++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app.py b/app.py
index ada8aa7..ceb3da0 100644
--- a/app.py
+++ b/app.py
@@ -22,7 +22,7 @@ def favicon():
 @cache.cached(timeout=5)
 def tarc():
 	d=requests.get("https://tarc.rideralerts.com/InfoPoint/rest/Vehicles/GetAllVehiclesForRoutes?routeIDs="+routes).json()
-	return "\n".join(f"{v['Latitude']},{v['Longitude']},{v['RouteId']},{v['Name']},{v['OnBoard']},{v['DirectionLong']},{v['Speed']}" for v in d)
+	return "\n".join(f"{v['Latitude']},{v['Longitude']},{v['RouteId']},{v['Name']},{v['OnBoard']},{v['DirectionLong']},{v['Speed']},{v['LastUpdated'][6:16]}" for v in d)
 
 if __name__ == '__main__':
 	app.run()
diff --git a/templates/map.html b/templates/map.html
index 9a4b3b2..311e934 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -15,25 +15,27 @@
 	<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")]});
-let busMarkers=L.layerGroup().addTo(map);
-function updateMap() {
+let busMarkers=new Map();
+function updateMap(){
 	fetch("tarc.csv").then(response=>response.text()).then(data=>{
-		if (data == "") return;
-		busMarkers.clearLayers();
+		if(data=="")return;
 		data.split("\n").forEach(line=>{
-			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)
+			const [lat,lng,r,id,p,d,s,t]=line.split(",");
+			const info=`<b>Route ${r}</b><br>#${id}<br>${p} riders<br>${d}<br>${s}mph<br>${new Date(t*1000).toLocaleTimeString('en-US',{hour12:false})}`
+			if(busMarkers.has(id)){busMarkers.get(id).setLatLng([lat,lng]).bindPopup(info)
+			}else{busMarkers.set(id,L.marker([lat,lng]).bindPopup(info).addTo(map))}
 		})
 	})
+	setTimeout(updateMap,5000);
 }
-setInterval(updateMap,5000);
+updateMap();
 
-let locationMarker=L.marker([0,0]),locationRadius=L.circle([0,0]);
+let locationMarker=L.marker([0,0]),locationRadius=L.circle([0,0]).bringToBack();
 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()
+	locationRadius.setLatLng(e.latlng).setRadius(e.accuracy/2)
 });
 	</script>
 </body>