feat(GtfsRtVehicleOverlay): Add GTFS-rt vehicle overlay

example.js

@@ -70,6 +70,11 @@ const TermsOfStorage = () => (
   </>
 )
 
+// Define custom map overlays with the custom vehicle overlay
+const CustomMapOverlays = () => {
+
+}
+
 // define some application-wide components that should be used in
 // various places. The following components can be provided here:
 // - defaultMobileTitle (required)
@@ -106,6 +111,7 @@ const components = {
     : isBatchRoutingEnabled
       ? BatchRoutingPanel
       : DefaultMainPanel,
+  MapOverlays: CustomMapOverlays,
   MapWindows: isCallTakerModuleEnabled
     ? () => <>
       <CallHistoryWindow />

lib/actions/gtfs-rt.js

@@ -0,0 +1,26 @@
+import { createAction } from 'redux-actions'
+if (typeof (fetch) === 'undefined') require('isomorphic-fetch')
+
+export const receivedGtfsRtVehiclePositionsError = createAction('GTFS_RT_VEHICLE_POSITIONS_ERROR')
+export const receivedGtfsRtVehiclePositionsResponse = createAction('GTFS_RT_VEHICLE_POSITIONS_RESPONSE')
+export const requestGtfsRtVehiclePositionsResponse = createAction('GTFS_RT_VEHICLE_POSITIONS_REQUEST')
+
+export function gtfsRtVehiclePositionsQuery (url) {
+  return async function (dispatch, getState) {
+    dispatch(requestGtfsRtVehiclePositionsResponse())
+    let json
+    try {
+      const response = await fetch(url)
+      if (response.status >= 400) {
+        const error = new Error('Received error from server')
+        error.response = response
+        throw error
+      }
+      json = await response.json()
+    } catch (err) {
+      return dispatch(receivedGtfsRtVehiclePositionsError(err))
+    }
+
+    dispatch(receivedGtfsRtVehiclePositionsResponse({ data: json, feedId: url }))
+  }
+}

lib/components/map/connected-gtfs-rt-vehicle-overlay.js

@@ -0,0 +1,74 @@
+import TransitVehicleOverlay from '@opentripplanner/stops-overlay'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+import connect from 'react-redux'
+
+// import * as gtfsRtActions from '../../actions/gtfs-rt'
+
+/**
+ * Class that loads a GTFS-rt vehicle positions feed.
+ */
+class GtfsRtVehicleOverlay extends Component {
+  static PropTypes = {
+    feedUrl: PropTypes.string, // url to GTFS-rt feed in protocol buffer format.
+    visible: PropTypes.bool
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      visible: props.visible
+    }
+  }
+
+  componentDidMount () {
+    this.props.registerOverlay(this)
+    this.props.gtfsRtVehiclePositionsQuery(this.props.feedUrl)
+  }
+
+  onOverlayAdded = () => {
+    this.setState({ visible: true })
+  }
+
+  onOverlayRemoved = () => {
+    this.setState({ visible: false })
+  }
+
+  render () {
+    const { vehicleLocations } = this.props
+    const { visible } = this.state
+    return (
+      <TransitVehicleOverlay
+        {...this.props}
+        // zoom={zoom}
+        // center={center}
+        vehicleList={vehicleLocations}
+        // onVehicleClicked={clickVehicle}
+        // selectedVehicle={tv}
+        // showOnlyTracked={showOnlyTracked}
+        // pattern={getRoutePattern(tv)}
+        // onRecenterMap={recenter}
+        // color={clr}
+        // highlightColor={highlightColor}
+        // symbols={markers}
+        // TooltipSlot={VehicleTooltip}
+        // PopupSlot={VehiclePopup}
+        visible={visible}
+      />
+    )
+  }
+}
+
+// connect to the redux store
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    // vehicleLocations: state.otp.overlay.transitVehicles[]?.locations
+  }
+}
+
+const mapDispatchToProps = {
+  // gtfsRtVehiclePositionsQuery: gtfsRtActions.gtfsRtVehiclePositionsQuery
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(GtfsRtVehicleOverlay)