gtfs-to-html 2.5.8 → 2.6.0

package/public/js/system-map.js

@@ -3,24 +3,33 @@
 
 const maps = {};
 
+function formatRouteColor(route) {
+  return route.route_color || '#000000';
+}
+
 function formatRoute(route) {
   const html = route.route_url
-    ? $('<a>').attr('href', route.route_url)
+    ? $('<a>').attr('href', route.route_url).addClass('hover:no-underline')
     : $('<div>');
 
-  html.addClass('route-item text-sm mb-2');
+  html.addClass('route-item text-xs mb-2');
 
   if (route.route_color) {
+    // Only add color swatch if route has a color
     $('<div>')
-      .addClass('route-color-swatch mr-2 flex-shrink-0')
-      .css('backgroundColor', route.route_color)
+      .addClass('flex items-center gap-2')
+      .html([
+        $('<div>')
+          .addClass('route-color-swatch flex-shrink-0 text-white')
+          .css('backgroundColor', formatRouteColor(route))
+          .text(route.route_short_name || ''),
+        $('<div>')
+          .addClass('hover:underline')
+          .text(route.route_long_name || ''),
+      ])
       .appendTo(html);
   }
 
-  $('<span>')
-    .text(`${route.route_short_name} ${route.route_long_name}`)
-    .appendTo(html);
-
   return html.prop('outerHTML');
 }
 
@@ -51,7 +60,7 @@ function formatStopPopup(feature) {
     $('<strong>').text(feature.properties.stop_code).appendTo(html);
   }
 
-  $('<div>').text('Routes Served:').appendTo(html);
+  $('<div>').addClass('text-sm').text('Routes Served:').appendTo(html);
 
   $(html).append(routes.map((route) => formatRoute(route)));
 
@@ -74,7 +83,7 @@ function getBounds(geojson) {
 }
 
 function createSystemMap(id, geojson) {
-  const defaultRouteColor = '#FF4728';
+  const defaultRouteColor = '#000000';
   const lineLayout = {
     'line-join': 'round',
     'line-cap': 'round',
@@ -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,59 +217,59 @@ function createSystemMap(id, geojson) {
         layout: lineLayout,
         filter: ['has', 'route_id'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
-    // Add highlighted route white outlines next
+    // Add route lines next
     map.addLayer(
       {
-        id: `highlighted-route-outlines`,
+        id: 'routes',
         type: 'line',
         source: {
           type: 'geojson',
           data: geojson,
         },
         paint: {
-          'line-color': '#FFFFFF',
+          'line-color': ['coalesce', ['get', 'route_color'], defaultRouteColor],
           'line-opacity': 1,
           'line-width': {
-            base: 10,
+            base: 4,
             stops: [
-              [14, 16],
-              [18, 40],
+              [14, 6],
+              [18, 16],
             ],
           },
         },
         layout: lineLayout,
-        filter: ['==', ['get', 'route_id'], 'none'],
+        filter: ['has', 'route_id'],
       },
-      firstSymbolId
+      firstSymbolId,
     );
 
-    // Add route lines next
+    // Add highlighted route white outlines next
     map.addLayer(
       {
-        id: 'routes',
+        id: `highlighted-route-outlines`,
         type: 'line',
         source: {
           type: 'geojson',
           data: geojson,
         },
         paint: {
-          'line-color': ['coalesce', ['get', 'route_color'], defaultRouteColor],
+          'line-color': '#FFFFFF',
           'line-opacity': 1,
           'line-width': {
-            base: 4,
+            base: 10,
             stops: [
-              [14, 6],
-              [18, 16],
+              [14, 16],
+              [18, 40],
             ],
           },
         },
         layout: lineLayout,
-        filter: ['has', 'route_id'],
+        filter: ['==', ['get', 'route_id'], 'none'],
       },
-      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,24 +3,33 @@
 
 const maps = {};
 
+function formatRouteColor(route) {
+  return route.route_color || '#000000';
+}
+
 function formatRoute(route) {
   const html = route.route_url
-    ? $('<a>').attr('href', route.route_url)
+    ? $('<a>').attr('href', route.route_url).addClass('hover:no-underline')
     : $('<div>');
 
-  html.addClass('route-item text-sm mb-2');
+  html.addClass('route-item text-xs mb-2');
 
   if (route.route_color) {
+    // Only add color swatch if route has a color
     $('<div>')
-      .addClass('route-color-swatch mr-2 flex-shrink-0')
-      .css('backgroundColor', route.route_color)
+      .addClass('flex items-center gap-2')
+      .html([
+        $('<div>')
+          .addClass('route-color-swatch flex-shrink-0 text-white')
+          .css('backgroundColor', formatRouteColor(route))
+          .text(route.route_short_name || ''),
+        $('<div>')
+          .addClass('hover:underline')
+          .text(route.route_long_name || ''),
+      ])
       .appendTo(html);
   }
 
-  $('<span>')
-    .text(`${route.route_short_name} ${route.route_long_name}`)
-    .appendTo(html);
-
   return html.prop('outerHTML');
 }
 
@@ -39,7 +48,7 @@ function formatStopPopup(feature, routes) {
     $('<strong>').text(feature.properties.stop_code).appendTo(html);
   }
 
-  $('<div>').text('Routes Served:').appendTo(html);
+  $('<div>').addClass('text-sm').text('Routes Served:').appendTo(html);
 
   $(html).append(routeIds.map((routeId) => formatRoute(routes[routeId])));
 
@@ -62,7 +71,7 @@ function getBounds(geojson) {
 }
 
 function createMap(id, geojson, routes) {
-  const defaultRouteColor = '#FF4728';
+  const defaultRouteColor = '#000000';
   const lineLayout = {
     'line-join': 'round',
     'line-cap': 'round',
@@ -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.pug

@@ -10,12 +10,12 @@ include formatting_functions.pug
         h1.text-2xl.pt-4.pb-2= `${formatAgencyName(timetablePageGroup.agency)} Routes`
         each timetablePage in timetablePageGroup.timetablePages
           if config.allowEmptyTimetables || timetablePage.consolidatedTimetables.length > 0
-            a.block.p-2.border-b.border-slate-200(class="hover:bg-slate-200 hover:no-underline" href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
+            a.block.p-2.border-b.border-slate-200(class="hover:bg-slate-100 hover:no-underline" href=`${timetablePage.relativePath}` data-route-ids=`${timetablePage.route_ids ? timetablePage.route_ids.join(',') : ''}`)
               .text-lg.text-gray-800.leading-none= timetablePage.timetable_page_label
               each route in _.uniqBy(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes), 'route_id')
-                .flex.my-1
-                  .route-color-swatch.flex-none.mr-2(style=`background-color: #${route.route_color}; color: #${route.route_text_color};`)= route.route_short_name || ''
-                  .mt-1.text-gray-600.leading-none= formatRouteName(route)
+                .flex.my-1.items-center.gap-1
+                  .route-color-swatch.flex-none(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
+                  .text-gray-600.leading-none= formatRouteName(route)
               .inline-flex.items-center.justify-center.px-2.py-1.text-xs.font-bold.leading-none.text-slate-800.bg-slate-200.rounded-full= timetablePage.dayList
     if config.showMap
       .map.ml-4.h-full.w-full(id="system_map")

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.pug

@@ -4,9 +4,9 @@ include formatting_functions.pug
 .timetable-page(class=`menu-type-${config.menuType}`)
   .container.mx-4(class="md:mx-auto")
     if config.showRouteTitle
-      h1.timetable-page-label.text-2xl.pt-4.flex.items-center
+      h1.timetable-page-label.text-2xl.pt-4.flex.items-center.gap-2
         each route in _.uniqBy(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes), 'route_id')
-          .route-color-swatch-large.mr-2.flex-none(style=`background-color: #${route.route_color}; color: #${route.route_text_color}`)= route.route_short_name || ''
+          .route-color-swatch-large.flex-none(style=`background-color: ${formatRouteColor(route)}; color: ${formatRouteTextColor(route)};`)= route.route_short_name || ''
         div= timetablePage.timetable_page_label
       if config.effectiveDate
         .effective-date.text-gray-600.mb-2= `Effective ${config.effectiveDate}`
@@ -16,11 +16,12 @@ include formatting_functions.pug
     each timetable in timetablePage.consolidatedTimetables
       .timetable.mb-10(id=`timetable_id_${formatHtmlId(timetable.timetable_id)}` data-day-list=timetable.dayList data-direction-name=timetable.direction_name data-timetable-id=timetable.timetable_id data-direction-id=timetable.direction_id data-route-id=timetable.route_ids.join('_'))
         if config.showRouteTitle
-          h2.text-xl= `${timetable.timetable_label} | ${timetable.dayListLong}`
-            each note in getNotesForTimetableLabel(timetable.notes)
-              include timetable_note_symbol.pug
-          if timetable.service_notes !== null
-            .service-notes= timetable.service_notes
+          .mb-2
+            h2.text-xl= `${timetable.timetable_label} | ${timetable.dayListLong}`
+              each note in getNotesForTimetableLabel(timetable.notes)
+                include timetable_note_symbol.pug
+            if timetable.service_notes !== null
+              .service-notes= timetable.service_notes
 
         if config.showMap
           .map(id=`map_timetable_id_${formatHtmlId(timetable.timetable_id)}`)
@@ -55,8 +56,8 @@ include formatting_functions.pug
               each note in _.uniqBy(timetable.notes, 'note_id')
                 .note(id=`note-${timetable.timetable_id}-${note.note_id}`)= `${note.symbol} = ${note.note}`
 
-          if timetable.calendarDates.includedDates.length
+          if config.showCalendarExceptions && timetable.calendarDates.includedDates.length
             .included-dates= `${config.serviceProvidedOnText}: ${timetable.calendarDates.includedDates.join(', ')}`
 
-          if timetable.calendarDates.excludedDates.length
+          if config.showCalendarExceptions && timetable.calendarDates.excludedDates.length
             .excluded-dates= `${config.serviceNotProvidedOnText}: ${timetable.calendarDates.excludedDates.join(', ')}`

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")