handle null headsign

static/index.html

@@ -300,6 +300,6 @@
       </div>
     </div>
 
-    <script type="module" src="/js/main.js?v=5"></script>
+    <script type="module" src="/js/main.js?v=7"></script>
   </body>
 </html>

static/js/main.js

@@ -165,6 +165,24 @@ function renderVehicleIcon(vehicle) {
   })
 }
 
+function vehiclePopupContent(vehicle) {
+  let content = `<b>${routeDesignator(vehicle.route)}</b>`
+  if (vehicle.headsign) {
+    content += ` to <b>${vehicle.headsign.replace(
+              /^to /i,
+              ""
+            )}</b>`
+  }
+
+  if (vehicle.nearest_station) {
+    content += `<br />@ ${vehicle.nearest_station.name}`
+  }
+
+  content += `<br /><br /><small>vehicle #: ${vehicle.id}</small>`
+
+  return content
+}
+
 function renderVehicle(vehicle) {
   return L.marker([vehicle.lat, vehicle.lon], {
           zIndexOffset:
@@ -173,13 +191,7 @@ function renderVehicle(vehicle) {
               ? 4000
               : 3000,
           icon: renderVehicleIcon(vehicle),
-        })
+        }).bindPopup(vehiclePopupContent(vehicle));
-          .bindPopup(
-            `<b>${routeDesignator(vehicle.route)}</b> to <b>${vehicle.headsign?.replace(
-              /^to /i,
-              ""
-            )}</b>${vehicle.nearest_station ? `<br />@ ${vehicle.nearest_station?.name}` : ""}<br /><br /><small>vehicle #: ${vehicle.id}</small>`
-          );
 }
 
 async function reload() {
@@ -211,6 +223,7 @@ async function reload() {
     if (currentVehicles.has(vehicle.id)) { // if this vehicle is already on the map, update its location
       currentVehicles.get(vehicle.id).marker.setLatLng([vehicle.lat, vehicle.lon])
       currentVehicles.get(vehicle.id).marker.setIcon(renderVehicleIcon(vehicle))
+      currentVehicles.get(vehicle.id).marker.setPopupContent(vehiclePopupContent(vehicle))
     } else {
       const marker = renderVehicle(vehicle)
       marker.addTo(