gtfs-to-html 2.9.11 → 2.9.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtfs-to-html",
-  "version": "2.9.11",
+  "version": "2.9.13",
   "private": false,
   "description": "Build human readable transit timetables as HTML, PDF or CSV from GTFS",
   "keywords": [
@@ -53,7 +53,7 @@
     "cli-table": "^0.3.11",
     "csv-stringify": "^6.5.1",
     "express": "^4.21.0",
-    "gtfs": "^4.14.4",
+    "gtfs": "^4.14.5",
     "gtfs-realtime-pbf-js-module": "^1.0.0",
     "insane": "^2.6.2",
     "js-beautify": "^1.15.1",
@@ -64,7 +64,7 @@
     "pbf": "^4.0.1",
     "pretty-error": "^4.0.0",
     "pug": "^3.0.3",
-    "puppeteer": "^23.3.1",
+    "puppeteer": "^23.4.1",
     "sanitize-filename": "^1.6.3",
     "sqlstring": "^2.3.3",
     "timer-machine": "^1.1.0",
@@ -77,7 +77,7 @@
     "@types/express": "^4.17.21",
     "@types/lodash-es": "^4.17.12",
     "@types/morgan": "^1.9.9",
-    "@types/node": "^20.16.5",
+    "@types/node": "^20.16.10",
     "@types/timer-machine": "^1.1.3",
     "@types/yargs": "^17.0.33",
     "husky": "^9.1.6",

package/views/default/css/timetable_styles.css

@@ -247,7 +247,7 @@ a:hover {
 .timetable-page .timetable .table-vertical .stop-header {
   text-align: center;
   line-height: 1.15;
-  font-size: 14px;
+  font-size: 0.875rem;
 }
 
 .timetable-page .timetable .run-header {
@@ -265,6 +265,7 @@ a:hover {
 
 .timetable-page .timetable .stop-code {
   font-weight: normal;
+  padding-top: 0.25rem;
 }
 
 .timetable-page .timetable .stop-time {
@@ -287,12 +288,12 @@ a:hover {
 }
 
 .timetable-page .timetable .city-row {
-  font-size: 1.5em;
+  font-size: 1.5rem;
   color: #415d86;
 }
 
 .timetable-page .timetable th.city-column {
-  font-size: 1.5em;
+  font-size: 1.5rem;
   text-align: center;
 }
 
@@ -412,7 +413,7 @@ a:hover {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 0.75rem;
   letter-spacing: -0.5px;
   padding: 0 2px;
   flex-shrink: 0;
@@ -427,7 +428,7 @@ a:hover {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-weight: bold;
   letter-spacing: -1px;
   padding: 0 6px;
@@ -497,6 +498,27 @@ a:hover {
   grid-template-columns: auto 1fr;
   gap: 0.5rem;
   line-height: 1;
+  padding-top: 5px;
+}
+
+.timetable-page
+  .map
+  .mapboxgl-popup-content
+  .upcoming-stops div:nth-child(1) {
+  font-weight: bold;
+  border-bottom: 1px solid #dddddd;
+  padding-bottom: 3px;
+  margin-bottom: -3px;
+}
+
+.timetable-page
+  .map
+  .mapboxgl-popup-content
+  .upcoming-stops div:nth-child(2) {
+  font-weight: bold;
+  border-bottom: 1px solid #dddddd;
+  padding-bottom: 3px;
+  margin-bottom: -3px;
 }
 
 .timetable-page
@@ -508,6 +530,16 @@ a:hover {
   font-weight: bold;
 }
 
+.timetable-page .map .mapboxgl-popup-content .vehicle-updated {
+  padding-top: 5px;
+  font-size: 10px;
+  text-align: right;
+}
+
+.timetable-page .map .vehicle-popup .mapboxgl-popup-content {
+  padding-bottom: 5px;
+}
+
 .timetable-page .map-legend {
   max-width: 30%;
   background-color: #fff;
@@ -559,6 +591,7 @@ a:hover {
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .timetable-page .vehicle-marker .vehicle-marker-arrow {
@@ -569,6 +602,12 @@ a:hover {
   height: 14px;
 }
 
+.timetable-page .vehicle-marker .vehicle-marker-arrow.no-bearing {
+  background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7.8 10a2.2 2.2 0 0 0 4.4 0 2.2 2.2 0 0 0-4.4 0z"/></svg>');
+  width: 20px;
+  height: 20px;
+}
+
 .timetable-page .timetable-alerts {
   margin-bottom: 1.5rem;
 }
@@ -613,7 +652,7 @@ a:hover {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 0.75rem;
   letter-spacing: -0.5px;
   padding: 0 2px;
   flex-shrink: 0;

package/views/default/formatting_functions.pug

@@ -53,8 +53,14 @@
             routeData[route.route_id] = route
           }
 
-          const stop = _.pick(feature.properties, ['stop_id', 'stop_code', 'stop_name', 'parent_station'])
-          stopData[stop.stop_id] = stop
+          stopData[feature.properties.stop_id] = {
+            stop_id: feature.properties.stop_id,
+            stop_code: feature.properties.stop_code,
+            stop_name: feature.properties.stop_name,
+            parent_station: feature.properties.parent_station,
+            stop_lat: feature.geometry.coordinates[1],
+            stop_lon: feature.geometry.coordinates[0],
+          }
 
           feature.properties = {
             route_ids: feature.properties.routes.map(route => route.route_id),

package/views/default/js/timetable-map.js

@@ -187,7 +187,9 @@ function formatMovingText(vehiclePosition) {
 }
 
 function getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate) {
-  const html = jQuery('<div>');
+  const html = jQuery('<div>', {
+    id: `vehicle-popup-${vehiclePosition.vehicle.vehicle.id}`,
+  });
 
   const lastUpdated = new Date(vehiclePosition.vehicle.timestamp * 1000);
   const directionName = jQuery(
@@ -209,12 +211,7 @@ function getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate) {
     jQuery('<div>').text(movingText).appendTo(html);
   }
 
-  jQuery('<div>')
-    .append(
-      jQuery('<small>').text(`Updated: ${lastUpdated.toLocaleTimeString()}`),
-    )
-    .appendTo(html);
-
+  const numberOfArrivalsToShow = 5;
   const nextArrivals = [];
   if (vehicleTripUpdate && vehicleTripUpdate.trip_update.stop_time_update) {
     for (const stoptimeUpdate of vehicleTripUpdate.trip_update
@@ -233,7 +230,7 @@ function getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate) {
           });
         }
 
-        if (nextArrivals.length >= 3) {
+        if (nextArrivals.length >= numberOfArrivalsToShow) {
           break;
         }
       }
@@ -241,12 +238,12 @@ function getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate) {
   }
 
   if (nextArrivals.length > 0) {
-    jQuery('<div>')
-      .append(jQuery('<small>').text('Upcoming Stops:'))
-      .appendTo(html);
-
     jQuery('<div>')
       .addClass('upcoming-stops')
+      .append([
+        jQuery('<div>').text('Time'),
+        jQuery('<div>').text('Upcoming Stop'),
+      ])
       .append(
         nextArrivals.flatMap((arrival) => {
           let delay = '';
@@ -266,9 +263,104 @@ function getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate) {
       .appendTo(html);
   }
 
+  jQuery('<div>')
+    .addClass('vehicle-updated')
+    .text(`Updated: ${lastUpdated.toLocaleTimeString()}`)
+    .appendTo(html);
+
   return html.prop('outerHTML');
 }
 
+function getVehicleBearing(vehiclePosition, vehicleTripUpdate) {
+  // If vehicle position includes bearing, use that
+  if (
+    vehiclePosition.vehicle.position.bearing !== undefined &&
+    vehiclePosition.vehicle.position.bearing !== 0
+  ) {
+    return vehiclePosition.vehicle.position.bearing;
+  }
+
+  // Else try to calculate bearing from next stop
+  if (
+    vehicleTripUpdate &&
+    vehicleTripUpdate?.trip_update?.stop_time_update?.length > 0
+  ) {
+    const nextStopTimeUpdate =
+      vehicleTripUpdate.trip_update.stop_time_update[0];
+    const nextStop = stopData[nextStopTimeUpdate.stop_id];
+
+    if (nextStop && nextStop.stop_lat && nextStop.stop_lon) {
+      const vehicleLocation = vehiclePosition.vehicle.position;
+      const lat1 = vehicleLocation.latitude;
+      const lon1 = vehicleLocation.longitude;
+      const lat2 = nextStop.stop_lat;
+      const lon2 = nextStop.stop_lon;
+
+      const y = Math.sin(lon2 - lon1) * Math.cos(lat2);
+      const x =
+        Math.cos(lat1) * Math.sin(lat2) -
+        Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
+      let bearing = (Math.atan2(y, x) * 180) / Math.PI;
+      bearing = (bearing + 360) % 360;
+
+      return bearing;
+    }
+  }
+
+  return null;
+}
+
+function getVehicleDirectionArrow(vehiclePosition, vehicleTripUpdate) {
+  const bearing = getVehicleBearing(vehiclePosition, vehicleTripUpdate);
+
+  if (bearing !== null) {
+    return `<div class="vehicle-marker-arrow" aria-hidden="true" style="transform:rotate(${bearing}deg)"></div>`;
+  } else {
+    return `<div class="vehicle-marker-arrow no-bearing" aria-hidden="true"></div>`;
+  }
+}
+
+function attachVehicleMarkerClickHandler(
+  vehiclePosition,
+  vehicleTripUpdate,
+  map,
+) {
+  const coordinates = [
+    vehiclePosition.vehicle.position.longitude,
+    vehiclePosition.vehicle.position.latitude,
+  ];
+
+  const vehicleMarker = vehicleMarkers[vehiclePosition.vehicle.vehicle.id];
+
+  vehicleMarker
+    .getElement()
+    .removeEventListener(
+      'click',
+      vehicleMarkersEventListeners[vehiclePosition.vehicle.vehicle.id],
+    );
+
+  vehicleMarkersEventListeners[vehiclePosition.vehicle.vehicle.id] = (
+    event,
+  ) => {
+    event.stopPropagation();
+    if (vehiclePopup.isOpen()) {
+      vehiclePopup.remove();
+    }
+
+    vehiclePopup
+      .setLngLat(coordinates)
+      .setHTML(getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate))
+      .addTo(map);
+  };
+
+  vehicleMarker
+    .getElement()
+    .addEventListener(
+      'click',
+      vehicleMarkersEventListeners[vehiclePosition.vehicle.vehicle.id],
+    );
+}
+
 function addVehicleMarker(vehiclePosition, vehicleTripUpdate) {
   if (!vehiclePosition.vehicle || !vehiclePosition.vehicle.position) {
     return;
@@ -276,44 +368,40 @@ function addVehicleMarker(vehiclePosition, vehicleTripUpdate) {
 
   const visibleTimetableId = jQuery('.timetable:visible').data('timetable-id');
 
+  const vehicleDirectionArrow = getVehicleDirectionArrow(
+    vehiclePosition,
+    vehicleTripUpdate,
+  );
+
   // Create a DOM element for each marker
   const el = document.createElement('div');
   el.className = 'vehicle-marker';
   el.style.width = '20px';
   el.style.height = '20px';
-  el.innerHTML = `<div class="vehicle-marker-arrow" aria-hidden="true" style="transform:rotate(${vehiclePosition.vehicle.position.bearing}deg)"></div>`;
+
+  if (vehicleDirectionArrow) {
+    el.innerHTML = vehicleDirectionArrow;
+  }
 
   const coordinates = [
     vehiclePosition.vehicle.position.longitude,
     vehiclePosition.vehicle.position.latitude,
   ];
 
-  vehicleMarkersEventListeners[vehiclePosition.vehicle.vehicle.id] = () => {
-    vehiclePopup
-      .setLngLat(coordinates)
-      .setHTML(getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate))
-      .addTo(maps[visibleTimetableId]);
-  };
-
-  // Vehicle marker popups
-  el.addEventListener(
-    'mouseenter',
-    vehicleMarkersEventListeners[vehiclePosition.vehicle.vehicle.id],
-  );
-
-  el.addEventListener('mouseleave', () => {
-    vehiclePopup.remove();
-  });
-
   // Add marker to map
-  const marker = new mapboxgl.Marker(el)
+  const vehicleMarker = new mapboxgl.Marker(el)
     .setLngLat(coordinates)
     .addTo(maps[visibleTimetableId]);
 
-  return marker;
+  vehicleMarkers[vehiclePosition.vehicle.vehicle.id] = vehicleMarker;
 }
 
-function animateVehicleMarker(vehicleMarker, newCoordinates) {
+function animateVehicleMarker(vehicleMarker, vehiclePosition) {
+  const newCoordinates = [
+    vehiclePosition.vehicle.position.longitude,
+    vehiclePosition.vehicle.position.latitude,
+  ];
+
   let startTime;
   const duration = 5000;
   const previousCoordinates = vehicleMarker.getLngLat().toArray();
@@ -331,7 +419,18 @@ function animateVehicleMarker(vehicleMarker, newCoordinates) {
       previousCoordinates[1] + safeProgress * latitudeDifference;
 
     vehicleMarker.setLngLat([newLongitude, newLatitude]);
-    vehiclePopup.setLngLat([newLongitude, newLatitude]);
+
+    // Check if vehiclePopup element exists and is for this vehicle
+    const popupElement = vehiclePopup.getElement();
+    const vehiclePopupContentId = `vehicle-popup-${vehiclePosition.vehicle.vehicle.id}`;
+    const markerPopupIsOpenForThisVehicle =
+      popupElement && popupElement.querySelector(`#${vehiclePopupContentId}`);
+
+    // Check if the open vehicle popup is for this vehicle
+    if (vehiclePopup.isOpen() && markerPopupIsOpenForThisVehicle) {
+      // Animate the popup along with the vehicle marker
+      vehiclePopup.setLngLat([newLongitude, newLatitude]);
+    }
 
     if (safeProgress != 1) {
       requestAnimationFrame(animation);
@@ -346,36 +445,18 @@ function updateVehicleMarkerLocation(
   vehiclePosition,
   vehicleTripUpdate,
 ) {
-  const visibleTimetableId = jQuery('.timetable:visible').data('timetable-id');
-
-  const coordinates = [
-    vehiclePosition.vehicle.position.longitude,
-    vehiclePosition.vehicle.position.latitude,
-  ];
-  vehicleMarker.getElement().innerHTML = `<div class="vehicle-marker-arrow" aria-hidden="true" style="transform:rotate(${vehiclePosition.vehicle.position.bearing}deg)"></div>`;
-
-  vehicleMarker
-    .getElement()
-    .removeEventListener(
-      'mouseenter',
-      vehicleMarkersEventListeners[vehiclePosition.vehicle.vehicle.id],
-    );
-
-  vehicleMarkersEventListeners[vehiclePosition.vehicle.vehicle.id] = () => {
-    vehiclePopup
-      .setLngLat(coordinates)
-      .setHTML(getVehiclePopupHtml(vehiclePosition, vehicleTripUpdate))
-      .addTo(maps[visibleTimetableId]);
-  };
+  const vehicleDirectionArrow = getVehicleDirectionArrow(
+    vehiclePosition,
+    vehicleTripUpdate,
+  );
 
-  vehicleMarker
-    .getElement()
-    .addEventListener(
-      'mouseenter',
-      vehicleMarkersEventListeners[vehiclePosition.vehicle.vehicle.id],
-    );
+  if (vehicleDirectionArrow) {
+    vehicleMarker.getElement().innerHTML = vehicleDirectionArrow;
+  } else {
+    vehicleMarker.getElement().innerHTML = '';
+  }
 
-  animateVehicleMarker(vehicleMarker, coordinates);
+  animateVehicleMarker(vehicleMarker, vehiclePosition);
 }
 
 async function fetchGtfsRealtime(url, headers) {
@@ -470,12 +551,9 @@ async function updateArrivals() {
 
       let vehicleMarker = vehicleMarkers[vehicleId];
 
-      // If not on map, add it
       if (vehicleMarker === undefined) {
-        vehicleMarkers[vehicleId] = addVehicleMarker(
-          vehiclePosition,
-          vehicleTripUpdate,
-        );
+        // If not on map, add it
+        addVehicleMarker(vehiclePosition, vehicleTripUpdate);
       } else {
         // Otherwise update location
         updateVehicleMarkerLocation(
@@ -484,6 +562,14 @@ async function updateArrivals() {
           vehicleTripUpdate,
         );
       }
+
+      const visibleTimetableId =
+        jQuery('.timetable:visible').data('timetable-id');
+      attachVehicleMarkerClickHandler(
+        vehiclePosition,
+        vehicleTripUpdate,
+        maps[visibleTimetableId],
+      );
     }
 
     // Remove vehicles not in the feed
@@ -509,39 +595,19 @@ function toggleMap(id) {
 
     // Update vehicle markers to use the current visible map
     for (const [vehicleId, vehicleMarker] of Object.entries(vehicleMarkers)) {
-      const coordinates = vehicleMarker.getLngLat();
-
-      // Remove previous event listeners
-      vehicleMarker
-        .getElement()
-        .removeEventListener(
-          'mouseenter',
-          vehicleMarkersEventListeners[vehicleId],
-        );
-
       const vehiclePosition = vehiclePositions.find(
         (vehiclePosition) => vehiclePosition.vehicle.vehicle.id === vehicleId,
       );
 
-      const tripUpdate = tripUpdates.find(
+      const vehicleTripUpdate = tripUpdates.find(
         (tripUpdate) => tripUpdate.trip_update.vehicle.id === vehicleId,
       );
 
-      // Update event listener function to use the new map
-      vehicleMarkersEventListeners[vehicleId] = () => {
-        vehiclePopup
-          .setLngLat(coordinates)
-          .setHTML(getVehiclePopupHtml(vehiclePosition, tripUpdate))
-          .addTo(maps[id]);
-      };
-
-      // Add updated event listener to marker
-      vehicleMarker
-        .getElement()
-        .addEventListener(
-          'mouseenter',
-          vehicleMarkersEventListeners[vehicleId],
-        );
+      attachVehicleMarkerClickHandler(
+        vehiclePosition,
+        vehicleTripUpdate,
+        maps[id],
+      );
 
       // Move marker to the current visible map
       vehicleMarker.addTo(maps[id]);
@@ -891,10 +957,18 @@ function createMaps() {
   ) {
     // Popup for realtime vehicle locations
     vehiclePopup = new mapboxgl.Popup({
-      closeButton: false,
       closeOnClick: false,
       className: 'vehicle-popup',
-      offset: [0, -10],
+      offset: {
+        top: [0, 10],
+        bottom: [0, -10],
+        left: [10, 0],
+        right: [-10, 0],
+        'top-left': [10, 10],
+        'top-right': [-10, 10],
+        'bottom-left': [10, -10],
+        'bottom-right': [-10, -10],
+      },
     });
 
     const arrivalUpdateInterval = 10 * 1000; // 10 seconds