update in realtime!

cmd/main.go

@@ -186,11 +186,15 @@ func feedifyVehicles(vehicles []*pb.VehiclePosition) pb.VehicleFeed {
 }
 
 func main() {
+	fmt.Println("Opening database...")
+
 	_db, err := sql.Open("sqlite3", "uta-gtfs.db")
 	if err != nil {
 		log.Fatal(err)
 	}
 
+	fmt.Println("Loading trip data...")
+
 	scheduleDb = _db
 	if err := loadTrips(); err != nil {
 		log.Fatalln(err)

static/index.html

@@ -35,6 +35,7 @@
         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", {
@@ -43,13 +44,25 @@
           '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
       }).addTo(map);
 
-      protobuf.load("/schema.proto").then(async (root) => {
+      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],
@@ -59,8 +72,10 @@
                 .addTo(map)
                 .bindPopup(
                   `${vehicle.headsign}<br />@ ${vehicle.nearestStation.name}`
+                )
             );
           });
+        }, 5000);
       });
     </script>
   </body>