gtfs-to-html 2.9.14 → 2.10.0

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';
 }
@@ -18,7 +16,6 @@ function formatRoute(route) {
 
   html.addClass('map-route-item');
 
-  // Only add color swatch if route has a color
   const routeItemDivs = [];
 
   if (route.route_color) {
@@ -67,13 +64,13 @@ function formatStopPopup(feature) {
   if (feature.properties.stop_code ?? false) {
     jQuery('<div>')
       .html([
-        jQuery('<label>').addClass('popup-label').text('Stop Code:'),
+        jQuery('<div>').addClass('popup-label').text('Stop Code:'),
         jQuery('<strong>').text(feature.properties.stop_code),
       ])
       .appendTo(html);
   }
 
-  jQuery('<label>').text('Routes Served:').appendTo(html);
+  jQuery('<div>').addClass('popup-label').text('Routes Served:').appendTo(html);
 
   jQuery(html).append(
     jQuery('<div>')
@@ -96,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);
@@ -116,7 +113,7 @@ function getBounds(geojson) {
   return bounds;
 }
 
-function createSystemMap(id, geojson) {
+function createSystemMap() {
   const defaultRouteColor = '#000000';
   const lineLayout = {
     'line-join': 'round',
@@ -129,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,
   });
@@ -142,399 +139,493 @@ function createSystemMap(id, geojson) {
   }
 
   map.scrollZoom.disable();
-  map.addControl(new mapboxgl.NavigationControl());
-
-  map.on('load', () => {
-    map.fitBounds(bounds, {
-      padding: 20,
-      duration: 0,
-    });
+  map.addControl(new maplibregl.NavigationControl());
+  map.addControl(new maplibregl.FullscreenControl());
 
-    // Turn off Points of Interest labels
-    map.setLayoutProperty('poi-label', 'visibility', 'none');
+  addGeocoder(map, bounds);
 
-    // 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') {
-        firstSymbolId = layer.id;
-        break;
-      }
-    }
+  map.on('load', () => {
+    fitMapToBounds(map, bounds);
+    disablePointsOfInterest(map);
+    addMapLayers(map, geojson, defaultRouteColor, lineLayout);
+    setupEventListeners(map, routes);
+  });
+}
 
-    // Add route drop shadow outline first
-    map.addLayer(
+function addGeocoder(map, bounds) {
+  map.addControl(
+    new MaplibreGeocoder(
       {
-        id: 'route-line-shadows',
-        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],
-            ],
-          },
+        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',
+          };
         },
-        layout: lineLayout,
-        filter: ['!has', 'stop_id'],
       },
-      firstSymbolId,
-    );
-
-    // Add highlighted route drop shadow outlines next
-    map.addLayer(
       {
-        id: 'highlighted-route-line-shadows',
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'line-color': '#000000',
-          'line-opacity': 0.3,
-          'line-width': {
-            base: 16,
-            stops: [
-              [14, 24],
-              [18, 50],
-            ],
-          },
-          'line-blur': {
-            base: 16,
-            stops: [
-              [14, 24],
-              [18, 50],
-            ],
-          },
-        },
-        layout: lineLayout,
-        filter: ['==', ['get', 'route_id'], 'none'],
+        maplibregl,
+        zoom: 12,
       },
-      firstSymbolId,
-    );
+    ),
+    'top-left',
+  );
+}
 
-    // Add white outlines to routes next
-    map.addLayer(
-      {
-        id: `route-outlines`,
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson,
+function fitMapToBounds(map, bounds) {
+  map.fitBounds(bounds, {
+    padding: 20,
+    duration: 0,
+  });
+}
+
+function disablePointsOfInterest(map) {
+  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 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,
+    firstLabelLayerId,
+  );
+  addStops(map, geojson);
+  addHighlightedStops(map, geojson);
+  addRouteLabels(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(
+    {
+      id: 'route-line-shadows',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
+      paint: {
+        'line-color': '#000000',
+        'line-opacity': 0.3,
+        'line-width': {
+          base: 12,
+          stops: [
+            [14, 20],
+            [18, 42],
+          ],
         },
-        paint: {
-          'line-color': '#FFFFFF',
-          'line-opacity': 1,
-          'line-width': {
-            base: 8,
-            stops: [
-              [14, 12],
-              [18, 32],
-            ],
-          },
+        'line-blur': {
+          base: 12,
+          stops: [
+            [14, 20],
+            [18, 42],
+          ],
         },
-        layout: lineLayout,
-        filter: ['has', 'route_id'],
       },
-      firstSymbolId,
-    );
+      layout: lineLayout,
+      filter: ['!has', 'stop_id'],
+    },
+    firstSymbolId,
+  );
+}
 
-    // Add route lines next
-    map.addLayer(
-      {
-        id: 'routes',
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson,
+function addHighlightedRouteLineShadow(
+  map,
+  geojson,
+  lineLayout,
+  firstSymbolId,
+) {
+  map.addLayer(
+    {
+      id: 'highlighted-route-line-shadows',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
+      paint: {
+        'line-color': '#000000',
+        'line-opacity': 0.3,
+        'line-width': {
+          base: 16,
+          stops: [
+            [14, 24],
+            [18, 50],
+          ],
         },
-        paint: {
-          'line-color': ['coalesce', ['get', 'route_color'], defaultRouteColor],
-          'line-opacity': 1,
-          'line-width': {
-            base: 4,
-            stops: [
-              [14, 6],
-              [18, 16],
-            ],
-          },
+        'line-blur': {
+          base: 16,
+          stops: [
+            [14, 24],
+            [18, 50],
+          ],
         },
-        layout: lineLayout,
-        filter: ['has', 'route_id'],
       },
-      firstSymbolId,
-    );
+      layout: lineLayout,
+      filter: ['==', ['get', 'route_id'], 'none'],
+    },
+    firstSymbolId,
+  );
+}
 
-    // Add highlighted route white outlines next
-    map.addLayer(
-      {
-        id: `highlighted-route-outlines`,
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'line-color': '#FFFFFF',
-          'line-opacity': 1,
-          'line-width': {
-            base: 10,
-            stops: [
-              [14, 16],
-              [18, 40],
-            ],
-          },
+function addRouteLineOutline(map, geojson, lineLayout, firstSymbolId) {
+  map.addLayer(
+    {
+      id: 'route-outlines',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
+      paint: {
+        'line-color': '#FFFFFF',
+        'line-opacity': 1,
+        'line-width': {
+          base: 8,
+          stops: [
+            [14, 12],
+            [18, 32],
+          ],
         },
-        layout: lineLayout,
-        filter: ['==', ['get', 'route_id'], 'none'],
       },
-      firstSymbolId,
-    );
+      layout: lineLayout,
+      filter: ['has', 'route_id'],
+    },
+    firstSymbolId,
+  );
+}
 
-    // Add highlighted route lines next
-    map.addLayer(
-      {
-        id: 'highlighted-routes',
-        type: 'line',
-        source: {
-          type: 'geojson',
-          data: geojson,
-        },
-        paint: {
-          'line-color': ['coalesce', ['get', 'route_color'], defaultRouteColor],
-          'line-opacity': 1,
-          'line-width': {
-            base: 6,
-            stops: [
-              [14, 8],
-              [18, 20],
-            ],
-          },
+function addHighlightedRouteLineOutline(
+  map,
+  geojson,
+  lineLayout,
+  firstSymbolId,
+) {
+  map.addLayer(
+    {
+      id: 'highlighted-route-outlines',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
+      paint: {
+        'line-color': '#FFFFFF',
+        'line-opacity': 1,
+        'line-width': {
+          base: 10,
+          stops: [
+            [14, 16],
+            [18, 40],
+          ],
         },
-        layout: lineLayout,
-        filter: ['==', ['get', 'route_id'], 'none'],
       },
-      firstSymbolId,
-    );
+      layout: lineLayout,
+      filter: ['==', ['get', 'route_id'], 'none'],
+    },
+    firstSymbolId,
+  );
+}
 
-    // Add stops when zoomed in
-    map.addLayer({
-      id: 'stops',
-      type: 'circle',
-      source: {
-        type: 'geojson',
-        data: geojson,
-      },
+function addRouteLine(
+  map,
+  geojson,
+  defaultRouteColor,
+  lineLayout,
+  firstSymbolId,
+) {
+  map.addLayer(
+    {
+      id: 'routes',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
       paint: {
-        'circle-color': '#fff',
-        'circle-radius': {
-          base: 1.75,
+        'line-color': ['coalesce', ['get', 'route_color'], defaultRouteColor],
+        'line-opacity': 1,
+        'line-width': {
+          base: 4,
           stops: [
-            [12, 4],
-            [22, 100],
+            [14, 6],
+            [18, 16],
           ],
         },
-        '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,
-        ],
       },
-      filter: ['has', 'stop_id'],
-    });
+      layout: lineLayout,
+      filter: ['has', 'route_id'],
+    },
+    firstSymbolId,
+  );
+}
 
-    // Layer for highlighted stops
-    map.addLayer({
-      id: 'stops-highlighted',
-      type: 'circle',
-      source: {
-        type: 'geojson',
-        data: geojson,
-      },
+function addHighlightedRouteLine(
+  map,
+  geojson,
+  defaultRouteColor,
+  lineLayout,
+  firstSymbolId,
+) {
+  map.addLayer(
+    {
+      id: 'highlighted-routes',
+      type: 'line',
+      source: { type: 'geojson', data: geojson },
       paint: {
-        'circle-color': '#fff',
-        'circle-radius': {
-          base: 1.75,
+        'line-color': ['coalesce', ['get', 'route_color'], defaultRouteColor],
+        'line-opacity': 1,
+        'line-width': {
+          base: 6,
           stops: [
-            [12, 5],
-            [22, 125],
+            [14, 8],
+            [18, 20],
           ],
         },
-        '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,
-        ],
       },
-      filter: ['==', 'stop_id', ''],
-    });
+      layout: lineLayout,
+      filter: ['==', ['get', 'route_id'], 'none'],
+    },
+    firstSymbolId,
+  );
+}
 
-    // Add labels
-    map.addLayer({
-      id: 'route-labels',
-      type: 'symbol',
-      source: {
-        type: 'geojson',
-        data: geojson,
-      },
-      layout: {
-        'symbol-placement': 'line',
-        'text-field': ['get', 'route_short_name'],
-        'text-size': 14,
+function addStops(map, geojson) {
+  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],
+        ],
       },
-      paint: {
-        'text-color': '#000000',
-        'text-halo-width': 2,
-        'text-halo-color': '#ffffff',
+      '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,
+      ],
+    },
+    filter: ['has', 'stop_id'],
+  });
+}
+
+function addHighlightedStops(map, geojson) {
+  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: ['has', 'route_short_name'],
-    });
+      '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,
+      ],
+    },
+    filter: ['==', 'stop_id', ''],
+  });
+}
 
-    map.on('mousemove', (event) => {
-      const features = map.queryRenderedFeatures(event.point, {
-        layers: ['routes', 'route-outlines', 'stops-highlighted', 'stops'],
-      });
-      if (features.length > 0) {
-        map.getCanvas().style.cursor = 'pointer';
-        highlightRoutes(
-          _.compact(
-            _.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,
-          );
-        }
-      } else {
-        map.getCanvas().style.cursor = '';
-        unHighlightRoutes();
-        unHighlightStop();
-      }
-    });
+function addRouteLabels(map, geojson) {
+  map.addLayer({
+    id: 'route-labels',
+    type: 'symbol',
+    source: { type: 'geojson', data: geojson },
+    layout: {
+      'symbol-placement': 'line',
+      'text-field': ['get', 'route_short_name'],
+      'text-size': 14,
+    },
+    paint: {
+      'text-color': '#000000',
+      'text-halo-width': 2,
+      'text-halo-color': '#ffffff',
+    },
+    filter: ['has', 'route_short_name'],
+  });
+}
 
-    map.on('click', (event) => {
-      // Set bbox as 5px rectangle area around clicked point
-      const bbox = [
-        [event.point.x - 5, event.point.y - 5],
-        [event.point.x + 5, event.point.y + 5],
-      ];
-
-      const stopFeatures = map.queryRenderedFeatures(bbox, {
-        layers: ['stops-highlighted', 'stops'],
-      });
-
-      if (stopFeatures && stopFeatures.length > 0) {
-        // Get the stop feature and show popup
-        const stopFeature = stopFeatures[0];
-
-        new mapboxgl.Popup()
-          .setLngLat(stopFeature.geometry.coordinates)
-          .setHTML(formatStopPopup(stopFeature))
-          .addTo(map);
-      } else {
-        const routeFeatures = map.queryRenderedFeatures(bbox, {
-          layers: ['routes', 'route-outlines'],
-        });
+function setupEventListeners(map, routes) {
+  map.on('mousemove', (event) => handleMouseMove(event, map, routes));
+  map.on('click', (event) => handleClick(event, map));
+  setupTableHoverListeners(map);
+}
 
-        if (routeFeatures && routeFeatures.length > 0) {
-          const routes = _.orderBy(
-            _.uniqBy(
-              routeFeatures,
-              (feature) => feature.properties.route_short_name,
-            ),
-            (feature) =>
-              Number.parseInt(feature.properties.route_short_name, 10),
-          );
-
-          new mapboxgl.Popup()
-            .setLngLat(event.lngLat)
-            .setHTML(formatRoutePopup(routes))
-            .addTo(map);
-        }
-      }
-    });
+function handleMouseMove(event, map, routes) {
+  const features = map.queryRenderedFeatures(event.point, {
+    layers: ['routes', 'route-outlines', 'stops-highlighted', 'stops'],
+  });
+  if (features.length > 0) {
+    map.getCanvas().style.cursor = 'pointer';
+    highlightRoutes(
+      map,
+      _.compact(_.uniq(features.map((feature) => feature.properties.route_id))),
+    );
 
-    function highlightStop(stopId) {
-      map.setFilter('stops-highlighted', ['==', 'stop_id', stopId]);
+    if (features.some((feature) => feature.layer.id === 'stops')) {
+      highlightStop(
+        map,
+        features.find((feature) => feature.layer.id === 'stops').properties
+          .stop_id,
+      );
     }
+  } else {
+    map.getCanvas().style.cursor = '';
+    unHighlightRoutes(map);
+    unHighlightStop(map);
+  }
+}
+
+function handleClick(event, map) {
+  const bbox = [
+    [event.point.x - 5, event.point.y - 5],
+    [event.point.x + 5, event.point.y + 5],
+  ];
+  const stopFeatures = map.queryRenderedFeatures(bbox, {
+    layers: ['stops-highlighted', 'stops'],
+  });
+
+  if (stopFeatures && stopFeatures.length > 0) {
+    showStopPopup(map, stopFeatures[0]);
+  } else {
+    const routeFeatures = map.queryRenderedFeatures(bbox, {
+      layers: ['routes', 'route-outlines'],
+    });
 
-    function unHighlightStop() {
-      map.setFilter('stops-highlighted', ['==', 'stop_id', '']);
+    if (routeFeatures && routeFeatures.length > 0) {
+      showRoutePopup(map, routeFeatures, event.lngLat);
     }
+  }
+}
 
-    function highlightRoutes(routeIds, zoom) {
-      map.setFilter('highlighted-routes', [
-        'all',
-        ['has', 'route_short_name'],
-        ['in', ['get', 'route_id'], ['literal', routeIds]],
-      ]);
-      map.setFilter('highlighted-route-outlines', [
-        'all',
-        ['has', 'route_short_name'],
-        ['in', ['get', 'route_id'], ['literal', routeIds]],
-      ]);
-      map.setFilter('highlighted-route-line-shadows', [
-        'all',
-        ['has', 'route_short_name'],
-        ['in', ['get', 'route_id'], ['literal', routeIds]],
-      ]);
-
-      // Show labels only for highlighted route
-      map.setFilter('route-labels', [
-        'in',
-        ['get', 'route_id'],
-        ['literal', routeIds],
-      ]);
-
-      const routeLineOpacity = 0.4;
-
-      // De-emphasize other routes
-      map.setPaintProperty('routes', 'line-opacity', routeLineOpacity);
-      map.setPaintProperty('route-outlines', 'line-opacity', routeLineOpacity);
-      map.setPaintProperty(
-        'route-line-shadows',
-        'line-opacity',
-        routeLineOpacity,
-      );
+function showStopPopup(map, feature) {
+  new maplibregl.Popup()
+    .setLngLat(feature.geometry.coordinates)
+    .setHTML(formatStopPopup(feature))
+    .addTo(map);
+}
+
+function showRoutePopup(map, features, lngLat) {
+  const routes = _.orderBy(
+    _.uniqBy(features, (feature) => feature.properties.route_short_name),
+    (feature) => Number.parseInt(feature.properties.route_short_name, 10),
+  );
+
+  new maplibregl.Popup()
+    .setLngLat(lngLat)
+    .setHTML(formatRoutePopup(routes))
+    .addTo(map);
+}
+
+function highlightStop(map, stopId) {
+  map.setFilter('stops-highlighted', ['==', 'stop_id', stopId]);
+}
 
-      const highlightedFeatures = geojson.features.filter((feature) =>
+function unHighlightStop(map) {
+  map.setFilter('stops-highlighted', ['==', 'stop_id', '']);
+}
+
+function highlightRoutes(map, routeIds, zoom) {
+  map.setFilter('highlighted-routes', [
+    'all',
+    ['has', 'route_short_name'],
+    ['in', ['get', 'route_id'], ['literal', routeIds]],
+  ]);
+  map.setFilter('highlighted-route-outlines', [
+    'all',
+    ['has', 'route_short_name'],
+    ['in', ['get', 'route_id'], ['literal', routeIds]],
+  ]);
+  map.setFilter('highlighted-route-line-shadows', [
+    'all',
+    ['has', 'route_short_name'],
+    ['in', ['get', 'route_id'], ['literal', routeIds]],
+  ]);
+
+  map.setFilter('route-labels', [
+    'in',
+    ['get', 'route_id'],
+    ['literal', routeIds],
+  ]);
+
+  const routeLineOpacity = 0.4;
+
+  map.setPaintProperty('routes', 'line-opacity', routeLineOpacity);
+  map.setPaintProperty('route-outlines', 'line-opacity', routeLineOpacity);
+  map.setPaintProperty('route-line-shadows', 'line-opacity', routeLineOpacity);
+
+  if (zoom) {
+    const data = map.querySourceFeatures('routes');
+    if (data) {
+      const highlightedFeatures = data.filter((feature) =>
         routeIds.includes(feature.properties.route_id),
       );
-
-      if (highlightedFeatures.length > 0 && zoom) {
+      if (highlightedFeatures.length > 0) {
         const zoomBounds = getBounds({
+          type: 'FeatureCollection',
           features: highlightedFeatures,
         });
         map.fitBounds(zoomBounds, {
@@ -542,55 +633,56 @@ function createSystemMap(id, geojson) {
         });
       }
     }
+  }
+}
 
-    function unHighlightRoutes(zoom) {
-      map.setFilter('highlighted-routes', ['==', ['get', 'route_id'], 'none']);
-      map.setFilter('highlighted-route-outlines', [
-        '==',
-        ['get', 'route_id'],
-        'none',
-      ]);
-      map.setFilter('highlighted-route-line-shadows', [
-        '==',
-        ['get', 'route_id'],
-        'none',
-      ]);
-
-      // Show labels for all routes
-      map.setFilter('route-labels', ['has', 'route_short_name']);
-
-      const routeLineOpacity = 1;
-
-      // Re-emphasize other routes
-      map.setPaintProperty('routes', 'line-opacity', routeLineOpacity);
-      map.setPaintProperty('route-outlines', 'line-opacity', routeLineOpacity);
-      map.setPaintProperty(
-        'route-line-shadows',
-        'line-opacity',
-        routeLineOpacity,
+function unHighlightRoutes(map, zoom) {
+  map.setFilter('highlighted-routes', ['==', ['get', 'route_id'], 'none']);
+  map.setFilter('highlighted-route-outlines', [
+    '==',
+    ['get', 'route_id'],
+    'none',
+  ]);
+  map.setFilter('highlighted-route-line-shadows', [
+    '==',
+    ['get', 'route_id'],
+    'none',
+  ]);
+
+  map.setFilter('route-labels', ['has', 'route_short_name']);
+
+  const routeLineOpacity = 1;
+
+  map.setPaintProperty('routes', 'line-opacity', routeLineOpacity);
+  map.setPaintProperty('route-outlines', 'line-opacity', routeLineOpacity);
+  map.setPaintProperty('route-line-shadows', 'line-opacity', routeLineOpacity);
+
+  if (zoom) {
+    const data = map.querySourceFeatures('routes');
+    if (data) {
+      map.fitBounds(
+        getBounds({
+          type: 'FeatureCollection',
+          features: data,
+        }),
       );
-
-      if (zoom) {
-        map.fitBounds(bounds);
-      }
     }
+  }
+}
 
-    // On table hover, highlight route on map
-    jQuery(() => {
-      jQuery('.overview-list a').hover((event) => {
-        const routeIdString = jQuery(event.target).data('route-ids');
-        if (routeIdString) {
-          const routeIds = routeIdString.toString().split(',');
-          highlightRoutes(routeIds, true);
-        }
-      });
-
-      jQuery('.overview-list').hover(
-        () => {},
-        () => unHighlightRoutes(true),
-      );
+function setupTableHoverListeners(map) {
+  jQuery(() => {
+    jQuery('.overview-list a').hover((event) => {
+      const routeIdString = jQuery(event.target).data('route-ids');
+      if (routeIdString) {
+        const routeIds = routeIdString.toString().split(',');
+        highlightRoutes(map, routeIds, true);
+      }
     });
-  });
 
-  maps[id] = map;
+    jQuery('.overview-list').hover(
+      () => {},
+      () => unHighlightRoutes(map, true),
+    );
+  });
 }