gtfs-to-html 2.3.5 → 2.4.0

package/public/js/timetable-map.js

@@ -63,6 +63,10 @@ function getBounds(geojson) {
 
 function createMap(id, geojson, routes) {
   const defaultRouteColor = '#FF4728';
+  const lineLayout = {
+    'line-join': 'round',
+    'line-cap': 'round',
+  };
 
   if (!geojson || geojson.features.length === 0) {
     $('#map_' + id).hide();
@@ -92,6 +96,9 @@ function createMap(id, geojson, routes) {
       duration: 0,
     });
 
+    // Turn of Points of Interest labels
+    map.setLayoutProperty('poi-label', 'visibility', 'none');
+
     // Find the index of the first symbol layer in the map style
     let firstSymbolId;
     for (const layer of map.getStyle().layers) {
@@ -101,7 +108,40 @@ function createMap(id, geojson, routes) {
       }
     }
 
-    // Add route line outline first
+    // Add route drop shadow outline first
+    map.addLayer(
+      {
+        id: 'route-line-shadow',
+        type: 'line',
+        source: {
+          type: 'geojson',
+          data: geojson,
+        },
+        paint: {
+          'line-color': '#000000',
+          'line-opacity': 0.3,
+          'line-width': {
+            base: 12,
+            stops: [
+              [14, 20],
+              [18, 42],
+            ],
+          },
+          'line-blur': {
+            base: 12,
+            stops: [
+              [14, 20],
+              [18, 42],
+            ],
+          },
+        },
+        layout: lineLayout,
+        filter: ['!has', 'stop_id'],
+      },
+      firstSymbolId
+    );
+
+    // Add route line outline
     map.addLayer(
       {
         id: 'route-line-outline',
@@ -113,17 +153,21 @@ function createMap(id, geojson, routes) {
         paint: {
           'line-color': '#FFFFFF',
           'line-opacity': 1,
-          'line-width': 6,
-        },
-        layout: {
-          'line-join': 'round',
-          'line-cap': 'round',
+          'line-width': {
+            base: 8,
+            stops: [
+              [14, 12],
+              [18, 32],
+            ],
+          },
         },
+        layout: lineLayout,
         filter: ['!has', 'stop_id'],
       },
       firstSymbolId
     );
 
+    // Add route line
     map.addLayer(
       {
         id: 'route-line',
@@ -135,17 +179,21 @@ function createMap(id, geojson, routes) {
         paint: {
           'line-color': ['to-color', ['get', 'route_color'], defaultRouteColor],
           'line-opacity': 1,
-          'line-width': 2,
-        },
-        layout: {
-          'line-join': 'round',
-          'line-cap': 'round',
+          'line-width': {
+            base: 4,
+            stops: [
+              [14, 6],
+              [18, 16],
+            ],
+          },
         },
+        layout: lineLayout,
         filter: ['!has', 'stop_id'],
       },
       firstSymbolId
     );
 
+    // Add stops
     map.addLayer(
       {
         id: 'stops',
@@ -155,22 +203,23 @@ function createMap(id, geojson, routes) {
           data: geojson,
         },
         paint: {
+          'circle-color': '#fff',
           'circle-radius': {
+            base: 1.75,
             stops: [
-              [9, 2],
-              [13, 4],
-              [15, 6],
+              [12, 4],
+              [22, 100],
             ],
           },
-          'circle-stroke-width': 1,
-          'circle-stroke-color': '#363636',
-          'circle-color': '#363636',
+          'circle-stroke-color': '#3f4a5c',
+          'circle-stroke-width': 2,
         },
         filter: ['has', 'stop_id'],
       },
       firstSymbolId
     );
 
+    // Layer for highlighted stops
     map.addLayer(
       {
         id: 'stops-highlighted',
@@ -180,16 +229,16 @@ function createMap(id, geojson, routes) {
           data: geojson,
         },
         paint: {
+          'circle-color': '#fff',
           'circle-radius': {
+            base: 1.75,
             stops: [
-              [9, 3],
-              [13, 4],
-              [15, 7],
+              [12, 5],
+              [22, 125],
             ],
           },
           'circle-stroke-width': 2,
-          'circle-stroke-color': '#666666',
-          'circle-color': '#888888',
+          'circle-stroke-color': '#3f4a5c',
         },
         filter: ['==', 'stop_id', ''],
       },
@@ -216,7 +265,7 @@ function createMap(id, geojson, routes) {
         [event.point.x + 5, event.point.y + 5],
       ];
       const features = map.queryRenderedFeatures(bbox, {
-        layers: ['stops'],
+        layers: ['stops-highlighted', 'stops'],
       });
 
       if (!features || features.length === 0) {
@@ -234,14 +283,10 @@ function createMap(id, geojson, routes) {
 
     function highlightStop(stopId) {
       map.setFilter('stops-highlighted', ['==', 'stop_id', stopId]);
-      map.setPaintProperty('stops', 'circle-opacity', 0.5);
-      map.setPaintProperty('stops', 'circle-stroke-opacity', 0.5);
     }
 
     function unHighlightStop() {
       map.setFilter('stops-highlighted', ['==', 'stop_id', '']);
-      map.setPaintProperty('stops', 'circle-opacity', 1);
-      map.setPaintProperty('stops', 'circle-stroke-opacity', 1);
     }
 
     // On table hover, highlight stop on map

package/views/default/layout.pug

@@ -3,7 +3,6 @@ html
   head
     title= title
     meta(charset="utf-8")
-    link(rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" crossorigin="anonymous")
     link(rel="stylesheet" href=`${config.assetPath}css/timetable_styles.css`)
     if config.outputFormat === 'pdf'
       link(rel="stylesheet" href=`${config.assetPath}css/timetable_pdf_styles.css`)
@@ -13,3 +12,5 @@ html
 
   body
     block content
+
+    script(src="https://cdn.tailwindcss.com")

package/views/default/overview.pug

@@ -10,13 +10,13 @@ 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.overview-menu-item.mb-3(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-200 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)
-              .text-gray-600= timetablePage.dayList
+              .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/timetablepage.pug

@@ -14,7 +14,7 @@ include formatting_functions.pug
     include timetable_menu.pug
 
     each timetable in timetablePage.consolidatedTimetables
-      .timetable.mb-5(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('_'))
+      .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)

package/www/docs/related-libraries.md

@@ -33,3 +33,8 @@ The [GTFS Text-to-Speech Tester](https://github.com/BlinkTagInc/node-gtfs-tts) i
 
 [`https://github.com/BlinkTagInc/node-gtfs-tts`](https://github.com/BlinkTagInc/node-gtfs-tts)
 
+## `node-gtfs-realtime`
+
+[GTFS-realtime](https://developers.google.com/transit/gtfs-realtime) transit data is in [protobuf format](https://developers.google.com/protocol-buffers) which means its not human-readable by default. `node-GTFS-Realtime` aims to make it fast and easy to inspect GTFS-realtime data by providing a one-line command for downloading [GTFS-realtime format](https://developers.google.com/transit/gtfs-realtime) data and converting to JSON. Try it by running `npx gtfs-realtime http://api.bart.gov/gtfsrt/tripupdate.aspx` in your terminal.
+
+[`https://github.com/BlinkTagInc/node-gtfs-realtime`](https://github.com/BlinkTagInc/node-gtfs-realtime)

package/www/package.json

@@ -9,11 +9,11 @@
     "deploy": "docusaurus deploy"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.18",
-    "@docusaurus/preset-classic": "^2.0.0-beta.18",
+    "@docusaurus/core": "^2.0.0-beta.21",
+    "@docusaurus/preset-classic": "^2.0.0-beta.21",
     "clsx": "^1.1.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "browserslist": {
     "production": [