Move to Vector Tiles (MapLibreGL)

__tests__/reducers/__snapshots__/create-otp-reducer.js.snap

@@ -9,7 +9,6 @@ Object {
       "mobile": "BOTH_LOCATIONS_CHANGED",
     },
     "debouncePlanTimeMs": 0,
-    "focusRoute": false,
     "homeTimezone": "America/Los_Angeles",
     "language": Object {},
     "onTimeThresholdSeconds": 60,

a11y/a11y.test.js

@@ -28,6 +28,11 @@ async function runAxeTestOnPath(otpPath) {
   const page = await browser.newPage()
   const filePath = `http://localhost:${MOCK_SERVER_PORT}/#${otpPath}`
   await Promise.all([
+    page.setViewport({
+      deviceScaleFactor: 1,
+      height: 1080,
+      width: 1920
+    }),
     page.goto(filePath),
     page.waitForNavigation({ waitUntil: 'networkidle2' })
   ])

index.css

@@ -1,7 +1,6 @@
 @import url(node_modules/bootstrap/dist/css/bootstrap.min.css);
 
-@import url(https://unpkg.com/[email protected]/dist/leaflet.css);
-@import url(node_modules/transitive-js/lib/transitive.css);
+@import url(node_modules/maplibre-gl/dist/maplibre-gl.css);
 
 @import url(lib/components/admin/call-taker.css);
 @import url(lib/components/app/app.css);

lib/actions/api.js

@@ -557,8 +557,8 @@ export function vehicleRentalQuery(
 export const findStopResponse = createAction('FIND_STOP_RESPONSE')
 export const findStopError = createAction('FIND_STOP_ERROR')
 
-export function fetchStopInfo(stop) {
-  return executeOTPAction('fetchStopInfo', stop)
+export function fetchStopInfo(map, stop) {
+  return executeOTPAction('fetchStopInfo', map, stop)
 }
 
 // Single trip lookup query

lib/actions/apiV1.js

@@ -1,4 +1,3 @@
-import L from 'leaflet'
 import qs from 'qs'
 
 import {
@@ -16,6 +15,7 @@ import {
   findRoutesAtStop,
   findStopError,
   findStopResponse,
+  findStopsForPattern,
   findStopsForTrip,
   findStopTimesForStop,
   findStopTimesForTrip,
@@ -28,6 +28,10 @@ import {
 import { setViewedStop } from './ui'
 import { zoomToStop } from './map'
 
+// Import must be done like this as maplibregl is incompatible with jest
+let maplibregl = null
+if (typeof jest === 'undefined') maplibregl = require('maplibre-gl')
+
 const findTrip = (params) =>
   createQueryAction(
     `index/trips/${params.tripId}`,
@@ -56,7 +60,9 @@ export function vehicleRentalQuery(
 
 function findNearbyAmenities({ lat, lon, radius = 300 }, stopId) {
   return function (dispatch, getState) {
-    const bounds = L.latLng(lat, lon).toBounds(radius)
+    if (typeof jest !== 'undefined') return
+
+    const bounds = new maplibregl.LngLat(lon, lat).toBounds(radius)
     const { lat: low, lng: left } = bounds.getSouthWest()
     const { lat: up, lng: right } = bounds.getNorthEast()
     dispatch(
@@ -123,7 +129,7 @@ export const findStop = (params) =>
     }
   )
 
-const fetchStopInfo = (stop) =>
+const fetchStopInfo = (map, stop) =>
   async function (dispatch, getState) {
     await dispatch(findStop({ stopId: stop.stopId }))
     const state = getState()
@@ -149,7 +155,7 @@ const fetchStopInfo = (stop) =>
       dispatch(
         findNearbyAmenities({ lat, lon, radius: nearbyRadius }, stop.stopId)
       )
-      dispatch(zoomToStop(fetchedStop))
+      dispatch(zoomToStop(map, fetchedStop))
     }
   }
 
@@ -189,6 +195,12 @@ export const findPatternsForRoute = (params) =>
               })
             )
           }
+          dispatch(
+            findStopsForPattern({
+              patternId: ptn.id,
+              routeId: params.routeId
+            })
+          )
         })
       },
 

lib/actions/apiV2.js

@@ -17,9 +17,10 @@ import {
   receivedVehiclePositions,
   receivedVehiclePositionsError
 } from './api'
-import { setMapZoom } from './config'
 import { zoomToStop } from './map'
 
+const LIGHT_GRAY = '666666'
+
 /**
  * Generic helper for crafting GraphQL queries.
  */
@@ -147,7 +148,7 @@ export const vehicleRentalQuery = (
       // we should re-write the rest of the UI to match OTP's behavior instead
       rewritePayload: (payload) => {
         return {
-          stations: payload?.data?.rentalVehicles.map((vehicle) => {
+          stations: payload?.data?.rentalVehicles?.map((vehicle) => {
             return {
               allowPickup: vehicle.allowPickupNow,
               id: vehicle.vehicleId,
@@ -297,27 +298,27 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
     {
       noThrottle: true,
       rewritePayload: (payload) => {
-        if (!payload.data)
+        if (!payload.data?.nearest)
           return {
             bikeRental: { stations: [] },
             vehicleRentalQuery: { stations: [] }
           }
         const { edges } = payload.data.nearest || []
-        const bikeStations = edges.filter(
+        const bikeStations = edges?.filter(
           (edge) =>
             edge?.node?.place?.bikesAvailable !== undefined ||
             !!edge?.node?.place?.bicyclePlaces ||
             edge?.node?.place?.vehicleType?.formFactor === 'BICYCLE'
         )
-        const parkAndRides = edges.filter(
+        const parkAndRides = edges?.filter(
           (edge) => edge?.node?.place?.carPlaces
         )
-        const vehicleRentals = edges.filter(
+        const vehicleRentals = edges?.filter(
           (edge) => edge?.node?.place?.vehicleType?.formFactor === 'SCOOTER'
         )
         return {
           bikeRental: {
-            stations: bikeStations.map((edge) => {
+            stations: bikeStations?.map((edge) => {
               const {
                 __typename,
                 bikesAvailable,
@@ -344,7 +345,7 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
               }
             })
           },
-          parkAndRideLocations: parkAndRides.map((edge) => {
+          parkAndRideLocations: parkAndRides?.map((edge) => {
             const { id, lat, lon, name } = edge?.node?.place
             return {
               distance: edge.node.distance,
@@ -358,7 +359,7 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
           }),
           stopId,
           vehicleRental: {
-            stations: vehicleRentals.map((edge) => {
+            stations: vehicleRentals?.map((edge) => {
               const { id, lat, lon, name, network, networks } =
                 edge?.node?.place
               return {
@@ -380,7 +381,7 @@ const findNearbyAmenities = ({ lat, lon, radius = 300, stopId }) => {
   )
 }
 
-const fetchStopInfo = (stop) => {
+const fetchStopInfo = (map, stop) => {
   const { stopId } = stop
   if (!stopId)
     return function (dispatch, getState) {
@@ -424,17 +425,20 @@ const fetchStopInfo = (stop) => {
           })
         )
 
-        dispatch(zoomToStop(stop))
-
-        if (stop?.geometries?.geoJson?.type !== 'Point') {
-          dispatch(setMapZoom(10))
-        }
+        dispatch(
+          zoomToStop(
+            map,
+            stop,
+            stop?.geometries?.geoJson?.type !== 'Point' && 10
+          )
+        )
       },
       rewritePayload: (payload) => {
         const { stop } = payload?.data
         if (!stop) return findStopError()
 
-        const color = stop.routes?.length > 0 && `#${stop.routes[0].color}`
+        const color =
+          stop.routes?.length > 0 && `#${stop.routes[0]?.color || LIGHT_GRAY}`
 
         // Doing some OTP1 compatibility rewriting here
         return {
@@ -583,7 +587,8 @@ export const findRoute = (params) =>
             newRoute.patterns.forEach((pattern) => {
               const patternStops = pattern.stops.map((stop) => {
                 const color =
-                  stop.routes?.length > 0 && `#${stop.routes[0].color}`
+                  stop.routes?.length > 0 &&
+                  `#${stop.routes[0]?.color || LIGHT_GRAY}`
                 if (stop.routes) delete stop.routes
                 return { ...stop, color }
               })

lib/actions/config.js

@@ -3,7 +3,5 @@ import { createAction } from 'redux-actions'
 export const setAutoPlan = createAction('SET_AUTOPLAN')
 
 // TODO: this should eventually be handled via mapState
-export const setMapCenter = createAction('SET_MAP_CENTER')
-export const setMapZoom = createAction('SET_MAP_ZOOM')
 export const setRouterId = createAction('SET_ROUTER_ID')
 export const updateOverlayVisibility = createAction('UPDATE_OVERLAY_VISIBILITY')

lib/actions/map.js

@@ -5,7 +5,6 @@ import getGeocoder from '@opentripplanner/geocoder'
 import { clearActiveSearch } from './form'
 import { deleteUserPlace } from './user'
 import { routingQuery } from './api'
-import { setMapCenter, setMapZoom } from './config'
 
 /* SET_LOCATION action creator. Updates a from or to location in the store
  *
@@ -47,11 +46,26 @@ export function clearLocation(payload) {
   }
 }
 
-export function zoomToStop(stop) {
-  return function (dispatch, getState) {
-    if (!stop) return
-    dispatch(setMapZoom({ zoom: 17 }))
-    dispatch(setMapCenter({ lat: stop.lat, lon: stop.lon }))
+/**
+ * Centers the given map to the coordinates of the specified place.
+ */
+export function setMapCenter(map /* MapRef */, location, zoom) {
+  return function () {
+    const { lat, lon } = location
+    if (map && !isNaN(lat) && !isNaN(lon)) {
+      map.jumpTo({ center: [lon, lat], zoom })
+    }
+  }
+}
+
+/**
+ * Animates the map to the specified stop and the specified zoom level.
+ */
+export function zoomToStop(map /* MapRef */, stop, zoom) {
+  return function () {
+    if (stop && map) {
+      map.flyTo({ center: [stop.lon, stop.lat], zoom: zoom || 17 })
+    }
   }
 }
 
@@ -148,7 +162,7 @@ export const setElevationPoint = createAction('SET_ELEVATION_POINT')
 export const setMapPopupLocation = createAction('SET_MAP_POPUP_LOCATION')
 
 export function setMapPopupLocationAndGeocode(mapEvent) {
-  const location = coreUtils.map.constructLocation(mapEvent.latlng)
+  const location = coreUtils.map.constructLocation(mapEvent.lngLat)
   return function (dispatch, getState) {
     dispatch(setMapPopupLocation({ location }))
     getGeocoder(getState().otp.config.geocoder)

lib/actions/ui.js

@@ -13,10 +13,10 @@ import { getModesForActiveAgencyFilter, getUiUrlParams } from '../util/state'
 import { getPathFromParts } from '../util/ui'
 
 import { clearActiveSearch, parseUrlQueryString, setActiveSearch } from './form'
-import { clearLocation } from './map'
+import { clearLocation, setMapCenter } from './map'
 import { findRoute, setUrlSearch } from './api'
 import { setActiveItinerary } from './narrative'
-import { setMapCenter, setMapZoom, setRouterId } from './config'
+import { setRouterId } from './config'
 
 const updateLocale = createAction('UPDATE_LOCALE')
 
@@ -62,7 +62,6 @@ const viewStop = createAction('SET_VIEWED_STOP')
 export const setHoveredStop = createAction('SET_HOVERED_STOP')
 export const setViewedTrip = createAction('SET_VIEWED_TRIP')
 const viewRoute = createAction('SET_VIEWED_ROUTE')
-export const unfocusRoute = createAction('UNFOCUS_ROUTE')
 export const toggleAutoRefresh = createAction('TOGGLE_AUTO_REFRESH')
 const setPreviousItineraryView = createAction('SET_PREVIOUS_ITINERARY_VIEW')
 export const setPopupContent = createAction('SET_POPUP_CONTENT')
@@ -97,6 +96,16 @@ export function routeTo(url, replaceSearch, routingMethod = push) {
 
 export function setViewedRoute(payload) {
   return function (dispatch, getState) {
+    const { otp } = getState()
+    const { viewedRoute } = otp.ui
+    if (
+      viewedRoute &&
+      payload?.viewedRoute?.routeId === viewedRoute.routeId &&
+      payload?.viewedRoute?.patternId === viewedRoute.patternId
+    ) {
+      return
+    }
+
     dispatch(viewRoute(payload))
 
     const path = getPathFromParts(
@@ -167,7 +176,7 @@ function idToParams(id, delimiter = ',') {
  * Checks URL and redirects app to appropriate content (e.g., viewed
  * route or stop).
  */
-export function matchContentToUrl(location) {
+export function matchContentToUrl(map, location) {
   // eslint-disable-next-line complexity
   return function (dispatch, getState) {
     const state = getState()
@@ -224,8 +233,7 @@ export function matchContentToUrl(location) {
         }
         console.log(lat, lon, zoom, routerId)
         // Update map location/zoom and optionally override router ID.
-        if (+lat && +lon) dispatch(setMapCenter({ lat, lon }))
-        if (+zoom) dispatch(setMapZoom({ zoom }))
+        if (+lat && +lon) dispatch(setMapCenter(map, { lat, lon }, zoom))
         // If router ID is provided, override the default routerId.
         if (routerId) dispatch(setRouterId(routerId))
         dispatch(setMainPanelContent(null))