gtfs-to-html 2.9.15 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtfs-to-html",
-  "version": "2.9.15",
+  "version": "2.10.0",
   "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": "^5.0.1",
-    "gtfs": "^4.15.2",
+    "gtfs": "^4.15.3",
     "gtfs-realtime-pbf-js-module": "^1.0.0",
     "insane": "^2.6.2",
     "js-beautify": "^1.15.1",
@@ -63,7 +63,7 @@
     "pbf": "^4.0.1",
     "pretty-error": "^4.0.0",
     "pug": "^3.0.3",
-    "puppeteer": "^23.5.3",
+    "puppeteer": "^23.6.0",
     "sanitize-filename": "^1.6.3",
     "sqlstring": "^2.3.3",
     "timer-machine": "^1.1.0",
@@ -79,7 +79,7 @@
     "@types/js-beautify": "^1.14.3",
     "@types/lodash-es": "^4.17.12",
     "@types/morgan": "^1.9.9",
-    "@types/node": "^20.16.11",
+    "@types/node": "^20.16.13",
     "@types/pug": "^2.0.10",
     "@types/puppeteer": "^7.0.4",
     "@types/sanitize-filename": "^1.6.3",

package/views/default/css/overview_styles.css

@@ -166,23 +166,23 @@ a:hover {
   width: 100%;
 }
 
-.overview-map .mapboxgl-popup-content .popup-title {
+.overview-map .maplibregl-popup-content .popup-title {
   margin: 0 20px 5px 0;
   font-size: 16px;
   font-weight: bold;
 }
 
-.overview-map .mapboxgl-popup-content .popup-label {
+.overview-map .maplibregl-popup-content .popup-label {
   border-bottom: 1px solid #e0e0e0;
   padding-top: 0.5rem;
 }
 
-.overview-map .mapboxgl-popup-content .route-list {
+.overview-map .maplibregl-popup-content .route-list {
   margin-bottom: 1rem;
   margin-top: 0.25rem;
 }
 
-.overview-map .mapboxgl-popup-content .map-route-item {
+.overview-map .maplibregl-popup-content .map-route-item {
   display: flex;
   align-items: center;
   font-size: 0.75rem;
@@ -191,14 +191,14 @@ a:hover {
   gap: 0.5rem;
 }
 
-.overview-map .mapboxgl-popup-content .map-route-item:hover {
+.overview-map .maplibregl-popup-content .map-route-item:hover {
   text-decoration: none;
 }
 
-.overview-map .mapboxgl-popup-content a.map-route-item .underline-hover:hover {
+.overview-map .maplibregl-popup-content a.map-route-item .underline-hover:hover {
   text-decoration: underline;
 }
 
-.overview-map .mapboxgl-popup-content .mapboxgl-popup-close-button {
+.overview-map .maplibregl-popup-content .maplibregl-popup-close-button {
   padding: 0 5px;
 }

package/views/default/css/timetable_styles.css

@@ -453,24 +453,24 @@ a:hover {
   }
 }
 
-.timetable-page .map .mapboxgl-popup-content .popup-title {
+.timetable-page .map .maplibregl-popup-content .popup-title {
   margin: 0 20px 5px 0;
   font-size: 1rem;
   font-weight: 700;
   line-height: 1;
 }
 
-.timetable-page .map .mapboxgl-popup-content .popup-label {
+.timetable-page .map .maplibregl-popup-content .popup-label {
   border-bottom: 1px solid #e0e0e0;
   padding-top: 0.5rem;
 }
 
-.timetable-page .map .mapboxgl-popup-content .route-list {
+.timetable-page .map .maplibregl-popup-content .route-list {
   margin-bottom: 1rem;
   margin-top: 0.25rem;
 }
 
-.timetable-page .map .mapboxgl-popup-content .map-route-item {
+.timetable-page .map .maplibregl-popup-content .map-route-item {
   display: flex;
   align-items: center;
   font-size: 0.75rem;
@@ -479,23 +479,23 @@ a:hover {
   gap: 0.5rem;
 }
 
-.timetable-page .map .mapboxgl-popup-content .map-route-item:hover {
+.timetable-page .map .maplibregl-popup-content .map-route-item:hover {
   text-decoration: none;
 }
 
 .timetable-page
   .map
-  .mapboxgl-popup-content
+  .maplibregl-popup-content
   a.map-route-item
   .underline-hover:hover {
   text-decoration: underline;
 }
 
-.timetable-page .map .mapboxgl-popup-content .mapboxgl-popup-close-button {
+.timetable-page .map .maplibregl-popup-content .maplibregl-popup-close-button {
   padding: 0 5px;
 }
 
-.timetable-page .map .mapboxgl-popup-content .upcoming-stops {
+.timetable-page .map .maplibregl-popup-content .upcoming-stops {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 0.5rem;
@@ -505,7 +505,7 @@ a:hover {
 
 .timetable-page
   .map
-  .mapboxgl-popup-content
+  .maplibregl-popup-content
   .upcoming-stops div:nth-child(1) {
   font-weight: bold;
   border-bottom: 1px solid #dddddd;
@@ -515,7 +515,7 @@ a:hover {
 
 .timetable-page
   .map
-  .mapboxgl-popup-content
+  .maplibregl-popup-content
   .upcoming-stops div:nth-child(2) {
   font-weight: bold;
   border-bottom: 1px solid #dddddd;
@@ -525,20 +525,20 @@ a:hover {
 
 .timetable-page
   .map
-  .mapboxgl-popup-content
+  .maplibregl-popup-content
   .upcoming-stops
   div:nth-child(2n-1) {
   text-align: right;
   font-weight: bold;
 }
 
-.timetable-page .map .mapboxgl-popup-content .vehicle-updated {
+.timetable-page .map .maplibregl-popup-content .vehicle-updated {
   padding-top: 5px;
   font-size: 10px;
   text-align: right;
 }
 
-.timetable-page .map .vehicle-popup .mapboxgl-popup-content {
+.timetable-page .map .vehicle-popup .maplibregl-popup-content {
   padding-bottom: 5px;
 }
 
@@ -550,7 +550,7 @@ a:hover {
   padding: 10px;
   position: absolute;
   left: 10px;
-  bottom: 35px;
+  bottom: 10px;
   z-index: 1;
 }
 

package/views/default/formatting_functions.pug

@@ -97,12 +97,13 @@
     }
 
     return {
+      gtfsRealtimeUrls,
+      mapStyleUrl: config.mapStyleUrl,
       pageData: {
         routeIds: _.uniq(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes.map(route => route.route_id))),
         tripIds: _.uniq(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.orderedTrips.map(trip => trip.trip_id))),
         stopIds: Object.keys(stopData),
         geojsons,
-        gtfsRealtimeUrls,
       },
       routeData,
       stopData,

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

@@ -1,8 +1,6 @@
-/* global window, document, _, $, mapboxgl */
+/* global document, jQuery, _, maplibregl, geojson, mapStyleUrl */
 /* eslint prefer-arrow-callback: "off", no-unused-vars: "off" */
 
-const maps = {};
-
 function formatRouteColor(route) {
   return route.route_color || '#000000';
 }
@@ -95,7 +93,7 @@ function formatStopPopup(feature) {
 }
 
 function getBounds(geojson) {
-  const bounds = new mapboxgl.LngLatBounds();
+  const bounds = new maplibregl.LngLatBounds();
   for (const feature of geojson.features) {
     if (feature.geometry.type.toLowerCase() === 'point') {
       bounds.extend(feature.geometry.coordinates);
@@ -115,7 +113,7 @@ function getBounds(geojson) {
   return bounds;
 }
 
-function createSystemMap(id, geojson) {
+function createSystemMap() {
   const defaultRouteColor = '#000000';
   const lineLayout = {
     'line-join': 'round',
@@ -128,9 +126,9 @@ function createSystemMap(id, geojson) {
   }
 
   const bounds = getBounds(geojson);
-  const map = new mapboxgl.Map({
-    container: id,
-    style: 'mapbox://styles/mapbox/light-v11',
+  const map = new maplibregl.Map({
+    container: 'system_map',
+    style: mapStyleUrl,
     center: bounds.getCenter(),
     zoom: 12,
   });
@@ -141,16 +139,67 @@ function createSystemMap(id, geojson) {
   }
 
   map.scrollZoom.disable();
-  map.addControl(new mapboxgl.NavigationControl());
+  map.addControl(new maplibregl.NavigationControl());
+  map.addControl(new maplibregl.FullscreenControl());
+
+  addGeocoder(map, bounds);
 
   map.on('load', () => {
     fitMapToBounds(map, bounds);
     disablePointsOfInterest(map);
     addMapLayers(map, geojson, defaultRouteColor, lineLayout);
-    setupEventListeners(map, id, routes);
+    setupEventListeners(map, routes);
   });
+}
 
-  maps[id] = map;
+function addGeocoder(map, bounds) {
+  map.addControl(
+    new MaplibreGeocoder(
+      {
+        forwardGeocode: async (config) => {
+          const features = [];
+          try {
+            const request = `https://nominatim.openstreetmap.org/search?q=${
+              config.query
+            }&format=geojson&polygon_geojson=1&addressdetails=1&viewbox=${bounds.getWest()},${bounds.getSouth()},${bounds.getEast()},${bounds.getNorth()}&bounded=1`;
+            const response = await fetch(request);
+            const geojson = await response.json();
+            for (const feature of geojson.features) {
+              const center = [
+                feature.bbox[0] + (feature.bbox[2] - feature.bbox[0]) / 2,
+                feature.bbox[1] + (feature.bbox[3] - feature.bbox[1]) / 2,
+              ];
+              const point = {
+                type: 'Feature',
+                geometry: {
+                  type: 'Point',
+                  coordinates: center,
+                },
+                place_name: feature.properties.display_name,
+                properties: feature.properties,
+                text: feature.properties.display_name,
+                place_type: ['place'],
+                center,
+              };
+              features.push(point);
+            }
+          } catch (e) {
+            console.error(`Failed to forwardGeocode with error: ${e}`);
+          }
+
+          return {
+            features,
+            type: 'FeatureCollection',
+          };
+        },
+      },
+      {
+        maplibregl,
+        zoom: 12,
+      },
+    ),
+    'top-left',
+  );
 }
 
 function fitMapToBounds(map, bounds) {
@@ -161,23 +210,32 @@ function fitMapToBounds(map, bounds) {
 }
 
 function disablePointsOfInterest(map) {
-  map.setLayoutProperty('poi-label', 'visibility', 'none');
+  const layers = map.getStyle().layers;
+  const poiLayerIds = layers
+    .filter((layer) => layer.id.startsWith('poi'))
+    ?.map((layer) => layer.id);
+  poiLayerIds.forEach((layerId) => {
+    map.setLayoutProperty(layerId, 'visibility', 'none');
+  });
 }
 
 function addMapLayers(map, geojson, defaultRouteColor, lineLayout) {
-  const firstSymbolId = getFirstSymbolLayerId(map);
-
-  addRouteLineShadow(map, geojson, lineLayout, firstSymbolId);
-  addHighlightedRouteLineShadow(map, geojson, lineLayout, firstSymbolId);
-  addRouteLineOutline(map, geojson, lineLayout, firstSymbolId);
-  addHighlightedRouteLineOutline(map, geojson, lineLayout, firstSymbolId);
-  addRouteLine(map, geojson, defaultRouteColor, lineLayout, firstSymbolId);
+  const layers = map.getStyle().layers;
+  const firstLabelLayerId = layers.find(
+    (layer) => layer.type === 'symbol' && layer.id.includes('label'),
+  )?.id;
+
+  addRouteLineShadow(map, geojson, lineLayout, firstLabelLayerId);
+  addHighlightedRouteLineShadow(map, geojson, lineLayout, firstLabelLayerId);
+  addRouteLineOutline(map, geojson, lineLayout, firstLabelLayerId);
+  addHighlightedRouteLineOutline(map, geojson, lineLayout, firstLabelLayerId);
+  addRouteLine(map, geojson, defaultRouteColor, lineLayout, firstLabelLayerId);
   addHighlightedRouteLine(
     map,
     geojson,
     defaultRouteColor,
     lineLayout,
-    firstSymbolId,
+    firstLabelLayerId,
   );
   addStops(map, geojson);
   addHighlightedStops(map, geojson);
@@ -450,10 +508,10 @@ function addRouteLabels(map, geojson) {
   });
 }
 
-function setupEventListeners(map, id, routes) {
+function setupEventListeners(map, routes) {
   map.on('mousemove', (event) => handleMouseMove(event, map, routes));
   map.on('click', (event) => handleClick(event, map));
-  setupTableHoverListeners(id, map, routes);
+  setupTableHoverListeners(map);
 }
 
 function handleMouseMove(event, map, routes) {
@@ -504,7 +562,7 @@ function handleClick(event, map) {
 }
 
 function showStopPopup(map, feature) {
-  new mapboxgl.Popup()
+  new maplibregl.Popup()
     .setLngLat(feature.geometry.coordinates)
     .setHTML(formatStopPopup(feature))
     .addTo(map);
@@ -516,7 +574,7 @@ function showRoutePopup(map, features, lngLat) {
     (feature) => Number.parseInt(feature.properties.route_short_name, 10),
   );
 
-  new mapboxgl.Popup()
+  new maplibregl.Popup()
     .setLngLat(lngLat)
     .setHTML(formatRoutePopup(routes))
     .addTo(map);
@@ -612,7 +670,7 @@ function unHighlightRoutes(map, zoom) {
   }
 }
 
-function setupTableHoverListeners(id, map, routes) {
+function setupTableHoverListeners(map) {
   jQuery(() => {
     jQuery('.overview-list a').hover((event) => {
       const routeIdString = jQuery(event.target).data('route-ids');

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

@@ -1,4 +1,4 @@
-/* global document, jQuery, mapboxgl, Pbf, stopData, routeData, routeIds, tripIds, geojsons, gtfsRealtimeUrls */
+/* global document, jQuery, maplibregl, Pbf, mapStyleUrl, stopData, routeData, routeIds, tripIds, geojsons, gtfsRealtimeUrls */
 /* eslint prefer-arrow-callback: "off", no-unused-vars: "off" */
 
 const maps = {};
@@ -110,7 +110,8 @@ function getStopPopupHtml(feature, stop) {
         tripUpdate.trip_update.stop_time_update.filter(
           (stopTimeUpdate) =>
             stopTimeUpdate.stop_id === stop.stop_id &&
-            stopTimeUpdate.departure !== null &&
+            (stopTimeUpdate.departure !== null ||
+              stopTimeUpdate.arrival !== null) &&
             stopTimeUpdate.schedule_relationship !== 3,
         );
       if (stopTimeUpdatesForStop.length > 0) {
@@ -146,7 +147,11 @@ function getStopPopupHtml(feature, stop) {
           const departureTimes = stopTimeUpdates[direction].map(
             (stopTimeUpdate) =>
               Math.round(
-                (stopTimeUpdate.departure.time - Date.now() / 1000) / 60,
+                ((stopTimeUpdate.departure
+                  ? stopTimeUpdate.departure.time
+                  : stopTimeUpdate.arrival.time) -
+                  Date.now() / 1000) /
+                  60,
               ),
           );
 
@@ -187,7 +192,7 @@ function getStopPopupHtml(feature, stop) {
 }
 
 function getBounds(geojson) {
-  const bounds = new mapboxgl.LngLatBounds();
+  const bounds = new maplibregl.LngLatBounds();
   for (const feature of geojson.features) {
     if (feature.geometry.type.toLowerCase() === 'point') {
       bounds.extend(feature.geometry.coordinates);
@@ -454,7 +459,10 @@ function addVehicleMarker(vehiclePosition, vehicleTripUpdate) {
   ];
 
   // Add marker to map
-  const vehicleMarker = new mapboxgl.Marker(el)
+  const vehicleMarker = new maplibregl.Marker({
+    element: el,
+    anchor: 'center',
+  })
     .setLngLat(coordinates)
     .addTo(maps[visibleTimetableId]);
 
@@ -704,9 +712,9 @@ function createMap(id) {
   }
 
   const bounds = getBounds(geojson);
-  const map = new mapboxgl.Map({
+  const map = new maplibregl.Map({
     container: `map_timetable_id_${id}`,
-    style: 'mapbox://styles/mapbox/light-v11',
+    style: mapStyleUrl,
     center: bounds.getCenter(),
     zoom: 12,
     preserveDrawingBuffer: true,
@@ -715,7 +723,8 @@ function createMap(id) {
   map.initialize = () => fitMapToBounds(map, bounds);
 
   map.scrollZoom.disable();
-  map.addControl(new mapboxgl.NavigationControl());
+  map.addControl(new maplibregl.NavigationControl());
+  map.addControl(new maplibregl.FullscreenControl());
 
   map.on('load', () => {
     fitMapToBounds(map, bounds);
@@ -735,24 +744,28 @@ function fitMapToBounds(map, bounds) {
 }
 
 function disablePointsOfInterest(map) {
-  map.setLayoutProperty('poi-label', 'visibility', 'none');
+  const layers = map.getStyle().layers;
+  const poiLayerIds = layers
+    .filter((layer) => layer.id.startsWith('poi'))
+    ?.map((layer) => layer.id);
+  poiLayerIds.forEach((layerId) => {
+    map.setLayoutProperty(layerId, 'visibility', 'none');
+  });
 }
 
 function addMapLayers(map, geojson, defaultRouteColor, lineLayout) {
-  const firstSymbolId = getFirstSymbolLayerId(map);
+  const layers = map.getStyle().layers;
+  const firstLabelLayerId = layers.find(
+    (layer) => layer.type === 'symbol' && layer.id.includes('label'),
+  )?.id;
 
-  addRouteLineShadow(map, geojson, lineLayout, firstSymbolId);
-  addRouteLineOutline(map, geojson, lineLayout, firstSymbolId);
-  addRouteLine(map, geojson, defaultRouteColor, lineLayout, firstSymbolId);
+  addRouteLineShadow(map, geojson, lineLayout, firstLabelLayerId);
+  addRouteLineOutline(map, geojson, lineLayout, firstLabelLayerId);
+  addRouteLine(map, geojson, defaultRouteColor, lineLayout, firstLabelLayerId);
   addStops(map, geojson);
   addHighlightedStops(map, geojson);
 }
 
-function getFirstSymbolLayerId(map) {
-  const layers = map.getStyle().layers;
-  return layers.find((layer) => layer.type === 'symbol').id;
-}
-
 function addRouteLineShadow(map, geojson, lineLayout, firstSymbolId) {
   map.addLayer(
     {
@@ -919,7 +932,7 @@ function handleClick(event, map) {
 }
 
 function showStopPopup(map, feature) {
-  new mapboxgl.Popup()
+  new maplibregl.Popup()
     .setLngLat(feature.geometry.coordinates)
     .setHTML(getStopPopupHtml(feature, stopData[feature.properties.stop_id]))
     .addTo(map);
@@ -1038,18 +1051,27 @@ function createMaps() {
     gtfsRealtimeUrls?.realtimeVehiclePositions?.url
   ) {
     // Popup for realtime vehicle locations
-    vehiclePopup = new mapboxgl.Popup({
+    const markerHeight = 20;
+    const markerRadius = 10;
+    const linearOffset = 15;
+    vehiclePopup = new maplibregl.Popup({
       closeOnClick: false,
       className: 'vehicle-popup',
       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],
+        top: [0, 0],
+        'top-left': [0, 0],
+        'top-right': [0, 0],
+        bottom: [0, -markerHeight],
+        'bottom-left': [
+          linearOffset,
+          (markerHeight - markerRadius + linearOffset) * -1,
+        ],
+        'bottom-right': [
+          -linearOffset,
+          (markerHeight - markerRadius + linearOffset) * -1,
+        ],
+        left: [markerRadius, (markerHeight - markerRadius) * -1],
+        right: [-markerRadius, (markerHeight - markerRadius) * -1],
       },
     });
 

package/views/default/overview.pug

@@ -21,7 +21,6 @@ include formatting_functions.pug
 
       //- Use !{variable} format to inject values from pug to client side js
       script.
-        (function() {
-          const geojson = !{JSON.stringify(geojson) || '\'\''};
-          createSystemMap('system_map', geojson);
-        })();
+        const geojson = !{JSON.stringify(geojson) || '\'\''};
+        const mapStyleUrl = '#{config.mapStyleUrl}';
+        createSystemMap();

package/views/default/overview_full.pug

@@ -6,11 +6,11 @@ block extraHeader
   if config.showMap
     script(src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js" crossorigin="anonymous")
     script(src="https://unpkg.com/lodash@4.17.21/lodash.min.js" crossorigin="anonymous")
-    script(src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js")
-    script.
-      mapboxgl.accessToken = '#{config.mapboxAccessToken}';
+    script(src="https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.js")
+    script(src="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.5.0/dist/maplibre-gl-geocoder.min.js")
     script(src=`${config.assetPath}js/system-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet")
+    link(href="https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.css" rel="stylesheet")
+    link(href="https://unpkg.com/@maplibre/maplibre-gl-geocoder@1.5.0/dist/maplibre-gl-geocoder.css" rel="stylesheet")
 
   link(rel="stylesheet" href=`${config.assetPath}css/overview_styles.css`)

package/views/default/timetablepage.pug

@@ -68,5 +68,5 @@ include formatting_functions.pug
 
   if config.showMap
     script.
-        const { routeData, stopData, pageData: { routeIds, tripIds,  stopIds, geojsons, gtfsRealtimeUrls } } = !{JSON.stringify(prepareMapData(timetablePage, config))};
+        const { gtfsRealtimeUrls, mapStyleUrl, routeData, stopData, pageData: { routeIds, tripIds,  stopIds, geojsons } } = !{JSON.stringify(prepareMapData(timetablePage, config))};
         createMaps();

package/views/default/timetablepage_full.pug

@@ -13,10 +13,8 @@ block extraHeader
     script(src=`${config.assetPath}js/gtfs-realtime.browser.proto.js`)
 
   if config.showMap
-    link(href="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.css" rel="stylesheet")
-    script(src="https://api.mapbox.com/mapbox-gl-js/v3.6.0/mapbox-gl.js")
-    script.
-      mapboxgl.accessToken = '#{config.mapboxAccessToken}';
+    link(href="https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.css" rel="stylesheet")
+    script(src="https://unpkg.com/maplibre-gl@^4.7.1/dist/maplibre-gl.js")
     script(src=`${config.assetPath}js/timetable-map.js`)
 
   if config.hasGtfsRealtimeAlerts