gtfs-to-html 2.5.8 → 2.5.9

package/CHANGELOG.md

@@ -5,6 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.5.9] - 2024-01-24
+
+### Updated
+
+- Move stop markers above map labels
+- Update to Mapbox GL JS v3
+- Dependency updates
+
+### Fixed
+
+- Handle routes with no route_short_name in map marker popups
+
 ## [2.5.8] - 2024-01-02
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gtfs-to-html",
-  "version": "2.5.8",
+  "version": "2.5.9",
   "private": false,
   "description": "Build human readable transit timetables as HTML, PDF or CSV from GTFS",
   "keywords": [
@@ -42,14 +42,14 @@
     "copy-dir": "^1.3.0",
     "csv-stringify": "^6.4.5",
     "express": "^4.18.2",
-    "gtfs": "^4.5.1",
+    "gtfs": "^4.6.0",
     "js-beautify": "^1.14.11",
     "lodash-es": "^4.17.21",
     "moment": "^2.30.1",
     "morgan": "^1.10.0",
     "pretty-error": "^4.0.0",
     "pug": "^3.0.2",
-    "puppeteer": "^21.6.1",
+    "puppeteer": "^21.9.0",
     "sanitize-filename": "^1.6.3",
     "sqlstring": "^2.3.3",
     "timer-machine": "^1.1.0",
@@ -61,7 +61,7 @@
   "devDependencies": {
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
-    "prettier": "^3.1.1"
+    "prettier": "^3.2.4"
   },
   "engines": {
     "node": ">= 18.0.0"

package/public/js/system-map.js

@@ -3,6 +3,17 @@
 
 const maps = {};
 
+function formatRouteName(route) {
+  let routeName = '';
+  if (route.route_short_name !== undefined) {
+    routeName += route.route_short_name;
+  } else if (route.route_long_name !== undefined) {
+    routeName += route.route_long_name;
+  }
+
+  return routeName;
+}
+
 function formatRoute(route) {
   const html = route.route_url
     ? $('<a>').attr('href', route.route_url)
@@ -17,9 +28,7 @@ function formatRoute(route) {
       .appendTo(html);
   }
 
-  $('<span>')
-    .text(`${route.route_short_name} ${route.route_long_name}`)
-    .appendTo(html);
+  $('<span>').text(formatRouteName(route)).appendTo(html);
 
   return html.prop('outerHTML');
 }
@@ -107,10 +116,10 @@ function createSystemMap(id, geojson) {
       duration: 0,
     });
 
-    // Turn of Points of Interest labels
+    // Turn off Points of Interest labels
     map.setLayoutProperty('poi-label', 'visibility', 'none');
 
-    // Find the index of the first symbol layer in the map style
+    // Find the index of the first symbol layer in the map style to put the route lines underneath
     let firstSymbolId;
     for (const layer of map.getStyle().layers) {
       if (layer.type === 'symbol') {
@@ -149,7 +158,7 @@ function createSystemMap(id, geojson) {
         layout: lineLayout,
         filter: ['!has', 'stop_id'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add highlighted route drop shadow outlines next
@@ -182,7 +191,7 @@ function createSystemMap(id, geojson) {
         layout: lineLayout,
         filter: ['==', ['get', 'route_id'], 'none'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add white outlines to routes next
@@ -208,7 +217,7 @@ function createSystemMap(id, geojson) {
         layout: lineLayout,
         filter: ['has', 'route_id'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add highlighted route white outlines next
@@ -234,7 +243,7 @@ function createSystemMap(id, geojson) {
         layout: lineLayout,
         filter: ['==', ['get', 'route_id'], 'none'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add route lines next
@@ -260,7 +269,7 @@ function createSystemMap(id, geojson) {
         layout: lineLayout,
         filter: ['has', 'route_id'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add highlighted route lines next
@@ -286,96 +295,74 @@ function createSystemMap(id, geojson) {
         layout: lineLayout,
         filter: ['==', ['get', 'route_id'], 'none'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add stops when zoomed in
-    map.addLayer(
-      {
-        id: 'stops',
-        type: 'circle',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'circle-color': '#fff',
-          'circle-radius': {
-            base: 1.75,
-            stops: [
-              [12, 4],
-              [22, 100],
-            ],
-          },
-          'circle-stroke-color': '#3F4A5C',
-          'circle-stroke-width': 2,
-          'circle-opacity': [
-            'interpolate',
-            ['linear'],
-            ['zoom'],
-            13,
-            0,
-            13.5,
-            1,
-          ],
-          'circle-stroke-opacity': [
-            'interpolate',
-            ['linear'],
-            ['zoom'],
-            13,
-            0,
-            13.5,
-            1,
+    map.addLayer({
+      id: 'stops',
+      type: 'circle',
+      source: {
+        type: 'geojson',
+        data: geojson,
+      },
+      paint: {
+        'circle-color': '#fff',
+        'circle-radius': {
+          base: 1.75,
+          stops: [
+            [12, 4],
+            [22, 100],
           ],
         },
-        filter: ['has', 'stop_id'],
+        'circle-stroke-color': '#3F4A5C',
+        'circle-stroke-width': 2,
+        'circle-opacity': ['interpolate', ['linear'], ['zoom'], 13, 0, 13.5, 1],
+        'circle-stroke-opacity': [
+          'interpolate',
+          ['linear'],
+          ['zoom'],
+          13,
+          0,
+          13.5,
+          1,
+        ],
       },
-      firstSymbolId
-    );
+      filter: ['has', 'stop_id'],
+    });
 
     // Layer for highlighted stops
-    map.addLayer(
-      {
-        id: 'stops-highlighted',
-        type: 'circle',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'circle-color': '#fff',
-          'circle-radius': {
-            base: 1.75,
-            stops: [
-              [12, 5],
-              [22, 125],
-            ],
-          },
-          'circle-stroke-width': 2,
-          'circle-stroke-color': '#3f4a5c',
-          'circle-opacity': [
-            'interpolate',
-            ['linear'],
-            ['zoom'],
-            13,
-            0,
-            13.5,
-            1,
-          ],
-          'circle-stroke-opacity': [
-            'interpolate',
-            ['linear'],
-            ['zoom'],
-            13,
-            0,
-            13.5,
-            1,
+    map.addLayer({
+      id: 'stops-highlighted',
+      type: 'circle',
+      source: {
+        type: 'geojson',
+        data: geojson,
+      },
+      paint: {
+        'circle-color': '#fff',
+        'circle-radius': {
+          base: 1.75,
+          stops: [
+            [12, 5],
+            [22, 125],
           ],
         },
-        filter: ['==', 'stop_id', ''],
+        'circle-stroke-width': 2,
+        'circle-stroke-color': '#3f4a5c',
+        'circle-opacity': ['interpolate', ['linear'], ['zoom'], 13, 0, 13.5, 1],
+        'circle-stroke-opacity': [
+          'interpolate',
+          ['linear'],
+          ['zoom'],
+          13,
+          0,
+          13.5,
+          1,
+        ],
       },
-      firstSymbolId
-    );
+      filter: ['==', 'stop_id', ''],
+    });
 
     // Add labels
     map.addLayer({
@@ -406,14 +393,14 @@ function createSystemMap(id, geojson) {
         map.getCanvas().style.cursor = 'pointer';
         highlightRoutes(
           _.compact(
-            _.uniq(features.map((feature) => feature.properties.route_id))
-          )
+            _.uniq(features.map((feature) => feature.properties.route_id)),
+          ),
         );
 
         if (features.some((feature) => feature.layer.id === 'stops')) {
           highlightStop(
             features.find((feature) => feature.layer.id === 'stops').properties
-              .stop_id
+              .stop_id,
           );
         }
       } else {
@@ -451,10 +438,10 @@ function createSystemMap(id, geojson) {
           const routes = _.orderBy(
             _.uniqBy(
               routeFeatures,
-              (feature) => feature.properties.route_short_name
+              (feature) => feature.properties.route_short_name,
             ),
             (feature) =>
-              Number.parseInt(feature.properties.route_short_name, 10)
+              Number.parseInt(feature.properties.route_short_name, 10),
           );
 
           new mapboxgl.Popup()
@@ -505,11 +492,11 @@ function createSystemMap(id, geojson) {
       map.setPaintProperty(
         'route-line-shadows',
         'line-opacity',
-        routeLineOpacity
+        routeLineOpacity,
       );
 
       const highlightedFeatures = geojson.features.filter((feature) =>
-        routeIds.includes(feature.properties.route_id)
+        routeIds.includes(feature.properties.route_id),
       );
 
       if (highlightedFeatures.length > 0 && zoom) {
@@ -546,7 +533,7 @@ function createSystemMap(id, geojson) {
       map.setPaintProperty(
         'route-line-shadows',
         'line-opacity',
-        routeLineOpacity
+        routeLineOpacity,
       );
 
       if (zoom) {
@@ -566,7 +553,7 @@ function createSystemMap(id, geojson) {
 
       $('.overview-list').hover(
         () => {},
-        () => unHighlightRoutes(true)
+        () => unHighlightRoutes(true),
       );
     });
   });

package/public/js/timetable-map.js

@@ -3,6 +3,17 @@
 
 const maps = {};
 
+function formatRouteName(route) {
+  let routeName = '';
+  if (route.route_short_name !== undefined) {
+    routeName += route.route_short_name;
+  } else if (route.route_long_name !== undefined) {
+    routeName += route.route_long_name;
+  }
+
+  return routeName;
+}
+
 function formatRoute(route) {
   const html = route.route_url
     ? $('<a>').attr('href', route.route_url)
@@ -17,9 +28,7 @@ function formatRoute(route) {
       .appendTo(html);
   }
 
-  $('<span>')
-    .text(`${route.route_short_name} ${route.route_long_name}`)
-    .appendTo(html);
+  $('<span>').text(formatRouteName(route)).appendTo(html);
 
   return html.prop('outerHTML');
 }
@@ -107,10 +116,10 @@ function createMap(id, geojson, routes) {
       duration: 0,
     });
 
-    // Turn of Points of Interest labels
+    // Turn off Points of Interest labels
     map.setLayoutProperty('poi-label', 'visibility', 'none');
 
-    // Find the index of the first symbol layer in the map style
+    // Find the index of the first symbol layer in the map style to put the route lines underneath
     let firstSymbolId;
     for (const layer of map.getStyle().layers) {
       if (layer.type === 'symbol') {
@@ -149,7 +158,7 @@ function createMap(id, geojson, routes) {
         layout: lineLayout,
         filter: ['!has', 'stop_id'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add route line outline
@@ -175,7 +184,7 @@ function createMap(id, geojson, routes) {
         layout: lineLayout,
         filter: ['!has', 'stop_id'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add route line
@@ -201,60 +210,54 @@ function createMap(id, geojson, routes) {
         layout: lineLayout,
         filter: ['!has', 'stop_id'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
     // Add stops
-    map.addLayer(
-      {
-        id: 'stops',
-        type: 'circle',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'circle-color': '#fff',
-          'circle-radius': {
-            base: 1.75,
-            stops: [
-              [12, 4],
-              [22, 100],
-            ],
-          },
-          'circle-stroke-color': '#3f4a5c',
-          'circle-stroke-width': 2,
+    map.addLayer({
+      id: 'stops',
+      type: 'circle',
+      source: {
+        type: 'geojson',
+        data: geojson,
+      },
+      paint: {
+        'circle-color': '#fff',
+        'circle-radius': {
+          base: 1.75,
+          stops: [
+            [12, 4],
+            [22, 100],
+          ],
         },
-        filter: ['has', 'stop_id'],
+        'circle-stroke-color': '#3f4a5c',
+        'circle-stroke-width': 2,
       },
-      firstSymbolId
-    );
+      filter: ['has', 'stop_id'],
+    });
 
     // Layer for highlighted stops
-    map.addLayer(
-      {
-        id: 'stops-highlighted',
-        type: 'circle',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'circle-color': '#fff',
-          'circle-radius': {
-            base: 1.75,
-            stops: [
-              [12, 5],
-              [22, 125],
-            ],
-          },
-          'circle-stroke-width': 2,
-          'circle-stroke-color': '#3f4a5c',
+    map.addLayer({
+      id: 'stops-highlighted',
+      type: 'circle',
+      source: {
+        type: 'geojson',
+        data: geojson,
+      },
+      paint: {
+        'circle-color': '#fff',
+        'circle-radius': {
+          base: 1.75,
+          stops: [
+            [12, 5],
+            [22, 125],
+          ],
         },
-        filter: ['==', 'stop_id', ''],
+        'circle-stroke-width': 2,
+        'circle-stroke-color': '#3f4a5c',
       },
-      firstSymbolId
-    );
+      filter: ['==', 'stop_id', ''],
+    });
 
     map.on('mousemove', (event) => {
       const features = map.queryRenderedFeatures(event.point, {

package/views/default/overview_full.pug

@@ -4,11 +4,11 @@ block content
 
 block extraHeader
   if config.showMap
-    script(src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous")
+    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/v2.5.1/mapbox-gl.js")
+    script(src="https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/system-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet")
+    link(href="https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.css" rel="stylesheet")

package/views/default/timetablepage_full.pug

@@ -3,16 +3,16 @@ block content
   include timetablepage.pug
 
 block extraHeader
-  script(src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js" crossorigin="anonymous")
+  script(src="https://unpkg.com/jquery@3.7.1/dist/jquery.min.js" crossorigin="anonymous")
 
   if config.menuType === 'radio'
     script(src=`${config.assetPath}js/timetable-menu.js`)
 
   if config.showMap
-    script(src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js")
+    script(src="https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.js")
     script.
       mapboxgl.accessToken = '#{config.mapboxAccessToken}';
     script(src=`${config.assetPath}js/timetable-map.js`)
 
-    link(href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css" rel="stylesheet")
+    link(href="https://api.mapbox.com/mapbox-gl-js/v3.1.0/mapbox-gl.css" rel="stylesheet")
 

package/www/package.json

@@ -9,8 +9,8 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.0.1",
-    "@docusaurus/preset-classic": "^3.0.1",
+    "@docusaurus/core": "^3.1.0",
+    "@docusaurus/preset-classic": "^3.1.0",
     "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"