@opentripplanner/vehicle-rental-overlay 1.3.0 → 1.4.0

package/lib/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _flat = _interopRequireDefault(require("flat"));
+
 var _baseMap = require("@opentripplanner/base-map");
 
 var _coreUtils = _interopRequireDefault(require("@opentripplanner/core-utils"));
@@ -19,18 +21,29 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactIntl = require("react-intl");
+
 var _reactLeaflet = require("react-leaflet");
 
 var _DefaultMarkers = require("./DefaultMarkers");
 
+var _enUS = _interopRequireDefault(require("../i18n/en-US.yml"));
+
+// Load the default messages.
+// HACK: We should flatten the messages loaded above because
+// the YAML loaders behave differently between webpack and our version of jest:
+// - the yaml loader for webpack returns a nested object,
+// - the yaml loader for jest returns messages with flattened ids.
+const defaultMessages = (0, _flat.default)(_enUS.default);
 /**
  * This vehicle rental overlay can be used to render vehicle rentals of various
  * types. This layer can be configured to show different styles of markers at
  * different zoom levels.
  */
+
 class VehicleRentalOverlay extends _reactLeaflet.MapLayer {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
 
     this.renderSymbolWithPopup = Symbol => {
       const SymbolWrapper = ({
@@ -76,6 +89,26 @@ class VehicleRentalOverlay extends _reactLeaflet.MapLayer {
       };
     });
 
+    this.onOverlayAdded = () => {
+      this.startRefreshing();
+    };
+
+    this.onOverlayRemoved = () => {
+      this.stopRefreshing();
+    };
+
+    this.onViewportChanged = viewport => {
+      const {
+        zoom: newZoom
+      } = viewport;
+
+      if (this.state.zoom !== newZoom) {
+        this.setState({
+          zoom: newZoom
+        });
+      }
+    };
+
     this.renderPopupForStation = (station, stationIsHub = false) => {
       const {
         configCompanies,
@@ -88,12 +121,37 @@ class VehicleRentalOverlay extends _reactLeaflet.MapLayer {
         lon: station.x,
         name: stationName
       };
-      return /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, null, /*#__PURE__*/_react.default.createElement(_baseMap.Styled.MapOverlayPopup, null, /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupTitle, null, stationName), stationIsHub && /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupRow, null, /*#__PURE__*/_react.default.createElement("div", null, "Available bikes: ", station.bikesAvailable), /*#__PURE__*/_react.default.createElement("div", null, "Available docks: ", station.spacesAvailable)), /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupRow, null, /*#__PURE__*/_react.default.createElement("b", null, "Plan a trip:"), /*#__PURE__*/_react.default.createElement(_fromToLocationPicker.default, {
+      return /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, null, /*#__PURE__*/_react.default.createElement(_baseMap.Styled.MapOverlayPopup, null, /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupTitle, null, stationName), stationIsHub && /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupRow, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+        defaultMessage: defaultMessages["otpUi.VehicleRentalOverlay.availableBikes"],
+        description: "Label text for the number of bikes available",
+        id: "otpUi.VehicleRentalOverlay.availableBikes",
+        values: {
+          value: station.bikesAvailable
+        }
+      })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+        defaultMessage: defaultMessages["otpUi.VehicleRentalOverlay.availableDocks"],
+        description: "Label text for the number of docks available",
+        id: "otpUi.VehicleRentalOverlay.availableDocks",
+        values: {
+          value: station.spacesAvailable
+        }
+      }))), /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupRow, null, /*#__PURE__*/_react.default.createElement(_fromToLocationPicker.default, {
+        label: true,
         location: location,
         setLocation: setLocation
       }))));
     };
+
+    this.state = {
+      zoom: props.leaflet.map.getZoom()
+    };
   }
+  /**
+   * This helper method will be passed to the ZoomBasedMarkers symbolTransform prop.
+   * It creates a component that inserts a popup
+   * as a child of the specified symbol from the mapSymbols prop.
+   */
+
 
   createLeafletElement() {}
 
@@ -117,25 +175,32 @@ class VehicleRentalOverlay extends _reactLeaflet.MapLayer {
   stopRefreshing() {
     if (this.refreshTimer) clearInterval(this.refreshTimer);
   }
+  /**
+   * When the layer is added (or toggled on, or its visibility becomes true),
+   * start refreshing vehicle positions.
+   */
+
 
+  /**
+   * Upon mounting, see whether the vehicles should be fetched,
+   * and also call the register overlay prop that the
+   * @opentripplanner/base-map package has injected to listen to zoom/position changes.
+   */
   componentDidMount() {
     const {
+      registerOverlay,
       visible
     } = this.props;
     if (visible) this.startRefreshing();
+
+    if (typeof registerOverlay === "function") {
+      registerOverlay(this);
+    }
   }
 
   componentWillUnmount() {
     this.stopRefreshing();
   }
-
-  componentDidUpdate(prevProps) {
-    if (!prevProps.visible && this.props.visible) {
-      this.startRefreshing();
-    } else if (prevProps.visible && !this.props.visible) {
-      this.stopRefreshing();
-    }
-  }
   /**
    * Render some popup html for a station. This contains custom logic for
    * displaying rental vehicles in the TriMet MOD website that might not be
@@ -147,17 +212,15 @@ class VehicleRentalOverlay extends _reactLeaflet.MapLayer {
     const {
       companies,
       mapSymbols,
-      stations,
-      visible
-    } = this.props; // Render an empty FeatureGroup if the rental vehicles should not be visible
+      stations
+    } = this.props;
+    const {
+      zoom
+    } = this.state; // Render an empty FeatureGroup if the rental vehicles should not be visible
     // on the map. Otherwise previous stations may still be shown due to some
     // react-leaflet internals, maybe? Also, do not return null because that will
     // prevent the overlay from appearing in the layer controls.
 
-    if (!visible) {
-      return /*#__PURE__*/_react.default.createElement(_reactLeaflet.FeatureGroup, null);
-    }
-
     let filteredStations = stations;
 
     if (companies) {
@@ -166,10 +229,8 @@ class VehicleRentalOverlay extends _reactLeaflet.MapLayer {
 
     if (!filteredStations || filteredStations.length === 0) {
       return /*#__PURE__*/_react.default.createElement(_reactLeaflet.FeatureGroup, null);
-    } // get zoom to check which symbol to render
-
+    } // Convert map symbols for this overlay to zoomBasedSymbolType.
 
-    const zoom = this.props.leaflet.map.getZoom(); // Convert map symbols for this overlay to zoomBasedSymbolType.
 
     const symbols = this.convertToZoomMarkerSymbols(mapSymbols);
     return /*#__PURE__*/_react.default.createElement(_reactLeaflet.FeatureGroup, null, /*#__PURE__*/_react.default.createElement(_zoomBasedMarkers.default, {

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["VehicleRentalOverlay","MapLayer","renderSymbolWithPopup","Symbol","SymbolWrapper","entity","station","zoom","renderPopupForStation","bikesAvailable","undefined","isFloatingBike","propTypes","coreUtils","types","stationType","isRequired","PropTypes","number","convertToZoomMarkerSymbols","mapSymbols","map","mapSymbol","symbol","type","HubAndFloatingBike","minZoom","stationIsHub","configCompanies","getStationName","setLocation","props","stationName","location","lat","y","lon","x","name","spacesAvailable","createLeafletElement","updateLeafletElement","startRefreshing","refreshVehicles","refreshTimer","setInterval","stopRefreshing","clearInterval","componentDidMount","visible","componentWillUnmount","componentDidUpdate","prevProps","render","companies","stations","filteredStations","filter","networks","value","includes","length","leaflet","getZoom","symbols","arrayOf","companyType","string","func","vehicleRentalMapOverlaySymbolsType","bool","defaultProps","stationNetworks","itinerary","getCompaniesLabelFromNetworks","id","isFloatingCar","isFloatingVehicle","GenericMarker"],"mappings":"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","sourcesContent":["import { Styled as BaseMapStyled } from \"@opentripplanner/base-map\";\nimport coreUtils from \"@opentripplanner/core-utils\";\nimport FromToLocationPicker from \"@opentripplanner/from-to-location-picker\";\nimport ZoomBasedMarkers from \"@opentripplanner/zoom-based-markers\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { FeatureGroup, MapLayer, Popup, withLeaflet } from \"react-leaflet\";\n\nimport {\n  GenericMarker,\n  HubAndFloatingBike,\n  SharedBikeCircle\n} from \"./DefaultMarkers\";\n\n/**\n * This vehicle rental overlay can be used to render vehicle rentals of various\n * types. This layer can be configured to show different styles of markers at\n * different zoom levels.\n */\nclass VehicleRentalOverlay extends MapLayer {\n  /**\n   * This helper method will be passed to the ZoomBasedMarkers symbolTransform prop.\n   * It creates a component that inserts a popup\n   * as a child of the specified symbol from the mapSymbols prop.\n   */\n  renderSymbolWithPopup = Symbol => {\n    const SymbolWrapper = ({ entity: station, zoom }) => (\n      <Symbol entity={station} zoom={zoom}>\n        {this.renderPopupForStation(\n          station,\n          station.bikesAvailable !== undefined && !station.isFloatingBike\n        )}\n      </Symbol>\n    );\n    SymbolWrapper.propTypes = {\n      entity: coreUtils.types.stationType.isRequired,\n      zoom: PropTypes.number.isRequired\n    };\n\n    return SymbolWrapper;\n  };\n\n  /**\n   * Convert map symbols to zoomBasedSymbolType.\n   */\n  convertToZoomMarkerSymbols = mapSymbols =>\n    mapSymbols.map(mapSymbol => {\n      // If mapSymbol uses zoomBasedSymbolType, use it as is.\n      if (mapSymbol.symbol) {\n        return mapSymbol;\n      }\n\n      // Otherwise, convert into zoomBasedType (no support for symbols by type).\n      let symbol;\n      switch (mapSymbol.type) {\n        case \"circle\":\n          symbol = SharedBikeCircle(mapSymbol);\n          break;\n        case \"hubAndFloatingBike\":\n          symbol = HubAndFloatingBike;\n          break;\n        default:\n          symbol = GenericMarker(mapSymbol);\n      }\n\n      return {\n        minZoom: mapSymbol.minZoom,\n        symbol\n      };\n    });\n\n  createLeafletElement() {}\n\n  updateLeafletElement() {}\n\n  startRefreshing() {\n    const { refreshVehicles } = this.props;\n\n    // Create the timer only if refreshVehicles is a valid function.\n    if (typeof refreshVehicles === \"function\") {\n      // initial station retrieval\n      refreshVehicles();\n\n      // set up timer to refresh stations periodically\n      this.refreshTimer = setInterval(() => {\n        refreshVehicles();\n      }, 30000); // defaults to every 30 sec. TODO: make this configurable?\n    }\n  }\n\n  stopRefreshing() {\n    if (this.refreshTimer) clearInterval(this.refreshTimer);\n  }\n\n  componentDidMount() {\n    const { visible } = this.props;\n    if (visible) this.startRefreshing();\n  }\n\n  componentWillUnmount() {\n    this.stopRefreshing();\n  }\n\n  componentDidUpdate(prevProps) {\n    if (!prevProps.visible && this.props.visible) {\n      this.startRefreshing();\n    } else if (prevProps.visible && !this.props.visible) {\n      this.stopRefreshing();\n    }\n  }\n\n  /**\n   * Render some popup html for a station. This contains custom logic for\n   * displaying rental vehicles in the TriMet MOD website that might not be\n   * applicable to other regions.\n   */\n  renderPopupForStation = (station, stationIsHub = false) => {\n    const { configCompanies, getStationName, setLocation } = this.props;\n    const stationName = getStationName(configCompanies, station);\n    const location = {\n      lat: station.y,\n      lon: station.x,\n      name: stationName\n    };\n    return (\n      <Popup>\n        <BaseMapStyled.MapOverlayPopup>\n          <BaseMapStyled.PopupTitle>{stationName}</BaseMapStyled.PopupTitle>\n\n          {/* render dock info if it is available */}\n          {stationIsHub && (\n            <BaseMapStyled.PopupRow>\n              <div>Available bikes: {station.bikesAvailable}</div>\n              <div>Available docks: {station.spacesAvailable}</div>\n            </BaseMapStyled.PopupRow>\n          )}\n\n          {/* Set as from/to toolbar */}\n          <BaseMapStyled.PopupRow>\n            <b>Plan a trip:</b>\n            <FromToLocationPicker\n              location={location}\n              setLocation={setLocation}\n            />\n          </BaseMapStyled.PopupRow>\n        </BaseMapStyled.MapOverlayPopup>\n      </Popup>\n    );\n  };\n\n  render() {\n    const { companies, mapSymbols, stations, visible } = this.props;\n    // Render an empty FeatureGroup if the rental vehicles should not be visible\n    // on the map. Otherwise previous stations may still be shown due to some\n    // react-leaflet internals, maybe? Also, do not return null because that will\n    // prevent the overlay from appearing in the layer controls.\n    if (!visible) {\n      return <FeatureGroup />;\n    }\n\n    let filteredStations = stations;\n    if (companies) {\n      filteredStations = stations.filter(\n        station =>\n          station.networks.filter(value => companies.includes(value)).length > 0\n      );\n    }\n\n    if (!filteredStations || filteredStations.length === 0) {\n      return <FeatureGroup />;\n    }\n\n    // get zoom to check which symbol to render\n    const zoom = this.props.leaflet.map.getZoom();\n\n    // Convert map symbols for this overlay to zoomBasedSymbolType.\n    const symbols = this.convertToZoomMarkerSymbols(mapSymbols);\n\n    return (\n      <FeatureGroup>\n        <ZoomBasedMarkers\n          entities={filteredStations}\n          symbols={symbols}\n          symbolTransform={this.renderSymbolWithPopup}\n          zoom={zoom}\n        />\n      </FeatureGroup>\n    );\n  }\n}\n\nVehicleRentalOverlay.props = {\n  /**\n   * The entire companies config array.\n   */\n  configCompanies: PropTypes.arrayOf(coreUtils.types.companyType.isRequired)\n    .isRequired,\n  /**\n   * A list of companies that are applicable to just this instance of the\n   * overlay.\n   */\n  companies: PropTypes.arrayOf(PropTypes.string.isRequired),\n  /**\n   * An optional custom function to create a string name of a particular vehicle\n   * rental station. This function takes two arguments of the configCompanies\n   * prop and a vehicle rental station. The function must return a string.\n   */\n  getStationName: PropTypes.func,\n  /**\n   * A configuration of what map markers or symbols to show at various\n   * zoom levels.\n   */\n  mapSymbols: coreUtils.types.vehicleRentalMapOverlaySymbolsType,\n  /**\n   * If specified, a function that will be triggered every 30 seconds whenever this layer is\n   * visible.\n   */\n  refreshVehicles: PropTypes.func,\n  /**\n   * A callback for when a user clicks on setting this stop as either the from\n   * or to location of a new search.\n   *\n   * This will be dispatched with the following argument:\n   *\n   * ```js\n   *  {\n   *    location: {\n   *      lat: number,\n   *      lon: number,\n   *      name: string\n   *    },\n   *    locationType: \"from\" or \"to\"\n   *  }\n   * ```\n   */\n  setLocation: PropTypes.func.isRequired,\n  /**\n   * A list of the vehicle rental stations specific to this overlay instance.\n   */\n  stations: PropTypes.arrayOf(coreUtils.types.stationType),\n  /**\n   * Whether the overlay is currently visible.\n   */\n  visible: PropTypes.bool\n};\n\nVehicleRentalOverlay.defaultProps = {\n  getStationName: (configCompanies, station) => {\n    const stationNetworks = coreUtils.itinerary.getCompaniesLabelFromNetworks(\n      station.networks,\n      configCompanies\n    );\n    let stationName = station.name || station.id;\n    if (station.isFloatingBike) {\n      stationName = `Free-floating bike: ${stationName}`;\n    } else if (station.isFloatingCar) {\n      stationName = `${stationNetworks} ${stationName}`;\n    } else if (station.isFloatingVehicle) {\n      // assumes that all floating vehicles are E-scooters\n      stationName = `${stationNetworks} E-scooter`;\n    }\n    return stationName;\n  },\n  mapSymbols: [\n    {\n      zoom: 0,\n      symbol: GenericMarker\n    }\n  ],\n  refreshVehicles: null,\n  stations: [],\n  visible: false\n};\n\nexport default withLeaflet(VehicleRentalOverlay);\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["defaultMessages","defaultEnglishMessages","VehicleRentalOverlay","MapLayer","constructor","props","renderSymbolWithPopup","Symbol","SymbolWrapper","entity","station","zoom","renderPopupForStation","bikesAvailable","undefined","isFloatingBike","propTypes","coreUtils","types","stationType","isRequired","PropTypes","number","convertToZoomMarkerSymbols","mapSymbols","map","mapSymbol","symbol","type","HubAndFloatingBike","minZoom","onOverlayAdded","startRefreshing","onOverlayRemoved","stopRefreshing","onViewportChanged","viewport","newZoom","state","setState","stationIsHub","configCompanies","getStationName","setLocation","stationName","location","lat","y","lon","x","name","value","spacesAvailable","leaflet","getZoom","createLeafletElement","updateLeafletElement","refreshVehicles","refreshTimer","setInterval","clearInterval","componentDidMount","registerOverlay","visible","componentWillUnmount","render","companies","stations","filteredStations","filter","networks","includes","length","symbols","arrayOf","companyType","string","func","vehicleRentalMapOverlaySymbolsType","bool","defaultProps","stationNetworks","itinerary","getCompaniesLabelFromNetworks","id","isFloatingCar","isFloatingVehicle","GenericMarker"],"mappings":"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","sourcesContent":["import flatten from \"flat\";\nimport { Styled as BaseMapStyled } from \"@opentripplanner/base-map\";\nimport coreUtils from \"@opentripplanner/core-utils\";\nimport FromToLocationPicker from \"@opentripplanner/from-to-location-picker\";\nimport ZoomBasedMarkers from \"@opentripplanner/zoom-based-markers\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { FormattedMessage } from \"react-intl\";\nimport { FeatureGroup, MapLayer, Popup, withLeaflet } from \"react-leaflet\";\n\nimport {\n  GenericMarker,\n  HubAndFloatingBike,\n  SharedBikeCircle\n} from \"./DefaultMarkers\";\n\n// Load the default messages.\nimport defaultEnglishMessages from \"../i18n/en-US.yml\";\n\n// HACK: We should flatten the messages loaded above because\n// the YAML loaders behave differently between webpack and our version of jest:\n// - the yaml loader for webpack returns a nested object,\n// - the yaml loader for jest returns messages with flattened ids.\nconst defaultMessages = flatten(defaultEnglishMessages);\n\n/**\n * This vehicle rental overlay can be used to render vehicle rentals of various\n * types. This layer can be configured to show different styles of markers at\n * different zoom levels.\n */\nclass VehicleRentalOverlay extends MapLayer {\n  constructor(props) {\n    super(props);\n    this.state = {\n      zoom: props.leaflet.map.getZoom()\n    };\n  }\n\n  /**\n   * This helper method will be passed to the ZoomBasedMarkers symbolTransform prop.\n   * It creates a component that inserts a popup\n   * as a child of the specified symbol from the mapSymbols prop.\n   */\n  renderSymbolWithPopup = Symbol => {\n    const SymbolWrapper = ({ entity: station, zoom }) => (\n      <Symbol entity={station} zoom={zoom}>\n        {this.renderPopupForStation(\n          station,\n          station.bikesAvailable !== undefined && !station.isFloatingBike\n        )}\n      </Symbol>\n    );\n    SymbolWrapper.propTypes = {\n      entity: coreUtils.types.stationType.isRequired,\n      zoom: PropTypes.number.isRequired\n    };\n\n    return SymbolWrapper;\n  };\n\n  /**\n   * Convert map symbols to zoomBasedSymbolType.\n   */\n  convertToZoomMarkerSymbols = mapSymbols =>\n    mapSymbols.map(mapSymbol => {\n      // If mapSymbol uses zoomBasedSymbolType, use it as is.\n      if (mapSymbol.symbol) {\n        return mapSymbol;\n      }\n\n      // Otherwise, convert into zoomBasedType (no support for symbols by type).\n      let symbol;\n      switch (mapSymbol.type) {\n        case \"circle\":\n          symbol = SharedBikeCircle(mapSymbol);\n          break;\n        case \"hubAndFloatingBike\":\n          symbol = HubAndFloatingBike;\n          break;\n        default:\n          symbol = GenericMarker(mapSymbol);\n      }\n\n      return {\n        minZoom: mapSymbol.minZoom,\n        symbol\n      };\n    });\n\n  createLeafletElement() {}\n\n  updateLeafletElement() {}\n\n  startRefreshing() {\n    const { refreshVehicles } = this.props;\n\n    // Create the timer only if refreshVehicles is a valid function.\n    if (typeof refreshVehicles === \"function\") {\n      // initial station retrieval\n      refreshVehicles();\n\n      // set up timer to refresh stations periodically\n      this.refreshTimer = setInterval(() => {\n        refreshVehicles();\n      }, 30000); // defaults to every 30 sec. TODO: make this configurable?\n    }\n  }\n\n  stopRefreshing() {\n    if (this.refreshTimer) clearInterval(this.refreshTimer);\n  }\n\n  /**\n   * When the layer is added (or toggled on, or its visibility becomes true),\n   * start refreshing vehicle positions.\n   */\n  onOverlayAdded = () => {\n    this.startRefreshing();\n  };\n\n  /**\n   * When the layer is removed (or toggled off, or its visibility becomes false),\n   * stop refreshing vehicle positions.\n   */\n  onOverlayRemoved = () => {\n    this.stopRefreshing();\n  };\n\n  /**\n   * Listen to changes on the BaseMap's center or zoom.\n   * @param viewport The viewport data. See https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/viewport.js for details.\n   */\n  onViewportChanged = viewport => {\n    const { zoom: newZoom } = viewport;\n    if (this.state.zoom !== newZoom) {\n      this.setState({ zoom: newZoom });\n    }\n  };\n\n  /**\n   * Upon mounting, see whether the vehicles should be fetched,\n   * and also call the register overlay prop that the\n   * @opentripplanner/base-map package has injected to listen to zoom/position changes.\n   */\n  componentDidMount() {\n    const { registerOverlay, visible } = this.props;\n    if (visible) this.startRefreshing();\n    if (typeof registerOverlay === \"function\") {\n      registerOverlay(this);\n    }\n  }\n\n  componentWillUnmount() {\n    this.stopRefreshing();\n  }\n\n  /**\n   * Render some popup html for a station. This contains custom logic for\n   * displaying rental vehicles in the TriMet MOD website that might not be\n   * applicable to other regions.\n   */\n  renderPopupForStation = (station, stationIsHub = false) => {\n    const { configCompanies, getStationName, setLocation } = this.props;\n    const stationName = getStationName(configCompanies, station);\n    const location = {\n      lat: station.y,\n      lon: station.x,\n      name: stationName\n    };\n    return (\n      <Popup>\n        <BaseMapStyled.MapOverlayPopup>\n          <BaseMapStyled.PopupTitle>{stationName}</BaseMapStyled.PopupTitle>\n\n          {/* render dock info if it is available */}\n          {stationIsHub && (\n            <BaseMapStyled.PopupRow>\n              <div>\n                <FormattedMessage\n                  defaultMessage={\n                    defaultMessages[\"otpUi.VehicleRentalOverlay.availableBikes\"]\n                  }\n                  description=\"Label text for the number of bikes available\"\n                  id=\"otpUi.VehicleRentalOverlay.availableBikes\"\n                  values={{ value: station.bikesAvailable }}\n                />\n              </div>\n              <div>\n                <FormattedMessage\n                  defaultMessage={\n                    defaultMessages[\"otpUi.VehicleRentalOverlay.availableDocks\"]\n                  }\n                  description=\"Label text for the number of docks available\"\n                  id=\"otpUi.VehicleRentalOverlay.availableDocks\"\n                  values={{ value: station.spacesAvailable }}\n                />\n              </div>\n            </BaseMapStyled.PopupRow>\n          )}\n\n          {/* Set as from/to toolbar */}\n          <BaseMapStyled.PopupRow>\n            <FromToLocationPicker\n              label\n              location={location}\n              setLocation={setLocation}\n            />\n          </BaseMapStyled.PopupRow>\n        </BaseMapStyled.MapOverlayPopup>\n      </Popup>\n    );\n  };\n\n  render() {\n    const { companies, mapSymbols, stations } = this.props;\n    const { zoom } = this.state;\n    // Render an empty FeatureGroup if the rental vehicles should not be visible\n    // on the map. Otherwise previous stations may still be shown due to some\n    // react-leaflet internals, maybe? Also, do not return null because that will\n    // prevent the overlay from appearing in the layer controls.\n\n    let filteredStations = stations;\n    if (companies) {\n      filteredStations = stations.filter(\n        station =>\n          station.networks.filter(value => companies.includes(value)).length > 0\n      );\n    }\n\n    if (!filteredStations || filteredStations.length === 0) {\n      return <FeatureGroup />;\n    }\n\n    // Convert map symbols for this overlay to zoomBasedSymbolType.\n    const symbols = this.convertToZoomMarkerSymbols(mapSymbols);\n\n    return (\n      <FeatureGroup>\n        <ZoomBasedMarkers\n          entities={filteredStations}\n          symbols={symbols}\n          symbolTransform={this.renderSymbolWithPopup}\n          zoom={zoom}\n        />\n      </FeatureGroup>\n    );\n  }\n}\n\nVehicleRentalOverlay.props = {\n  /**\n   * The entire companies config array.\n   */\n  configCompanies: PropTypes.arrayOf(coreUtils.types.companyType.isRequired)\n    .isRequired,\n  /**\n   * A list of companies that are applicable to just this instance of the\n   * overlay.\n   */\n  companies: PropTypes.arrayOf(PropTypes.string.isRequired),\n  /**\n   * An optional custom function to create a string name of a particular vehicle\n   * rental station. This function takes two arguments of the configCompanies\n   * prop and a vehicle rental station. The function must return a string.\n   */\n  getStationName: PropTypes.func,\n  /**\n   * A configuration of what map markers or symbols to show at various\n   * zoom levels.\n   */\n  mapSymbols: coreUtils.types.vehicleRentalMapOverlaySymbolsType,\n  /**\n   * If specified, a function that will be triggered every 30 seconds whenever this layer is\n   * visible.\n   */\n  refreshVehicles: PropTypes.func,\n  /**\n   * A callback for when a user clicks on setting this stop as either the from\n   * or to location of a new search.\n   *\n   * This will be dispatched with the following argument:\n   *\n   * ```js\n   *  {\n   *    location: {\n   *      lat: number,\n   *      lon: number,\n   *      name: string\n   *    },\n   *    locationType: \"from\" or \"to\"\n   *  }\n   * ```\n   */\n  setLocation: PropTypes.func.isRequired,\n  /**\n   * A list of the vehicle rental stations specific to this overlay instance.\n   */\n  stations: PropTypes.arrayOf(coreUtils.types.stationType),\n  /**\n   * Whether the overlay is currently visible.\n   */\n  visible: PropTypes.bool\n};\n\nVehicleRentalOverlay.defaultProps = {\n  getStationName: (configCompanies, station) => {\n    const stationNetworks = coreUtils.itinerary.getCompaniesLabelFromNetworks(\n      station.networks,\n      configCompanies\n    );\n    let stationName = station.name || station.id;\n    if (station.isFloatingBike) {\n      stationName = `Free-floating bike: ${stationName}`;\n    } else if (station.isFloatingCar) {\n      stationName = `${stationNetworks} ${stationName}`;\n    } else if (station.isFloatingVehicle) {\n      // assumes that all floating vehicles are E-scooters\n      stationName = `${stationNetworks} E-scooter`;\n    }\n    return stationName;\n  },\n  mapSymbols: [\n    {\n      zoom: 0,\n      symbol: GenericMarker\n    }\n  ],\n  refreshVehicles: null,\n  stations: [],\n  visible: false\n};\n\nexport default withLeaflet(VehicleRentalOverlay);\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentripplanner/vehicle-rental-overlay",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A map overlay to show vehicle rentals from a specific company",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -18,17 +18,19 @@
     "url": "git+https://github.com/opentripplanner/otp-ui.git"
   },
   "dependencies": {
-    "@opentripplanner/from-to-location-picker": "^1.2.1",
-    "@opentripplanner/zoom-based-markers": "^1.2.0",
-    "@opentripplanner/core-utils": "^4.1.0",
+    "@opentripplanner/core-utils": "^4.5.0",
+    "@opentripplanner/from-to-location-picker": "^2.1.0",
+    "@opentripplanner/zoom-based-markers": "^1.2.1",
+    "@styled-icons/fa-solid": "^10.34.0",
+    "flat": "^5.0.2",
     "lodash.memoize": "^4.1.2",
-    "prop-types": "^15.7.2",
-    "@styled-icons/fa-solid": "^10.34.0"
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "@opentripplanner/base-map": "^1.2.0",
+    "@opentripplanner/base-map": "^2.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.8.6",
+    "react-intl": "^5.24.6",
     "react-leaflet": "^2.6.1",
     "styled-components": "^5.3.0"
   }

package/src/DefaultMarkers/index.js

@@ -22,10 +22,13 @@ const templatePropTypes = {
   /** The children of the component. */
   children: PropTypes.node,
   /** The rental vehicle or station to render. */
-  entity: coreUtils.types.stationType.isRequired
+  entity: coreUtils.types.stationType.isRequired,
+  /** leaflet attribute to control tabindex value for keyboaryd-only / SR users */
+  keyboard: PropTypes.bool
 };
 const templateDefaultProps = {
-  children: null
+  children: null,
+  keyboard: false
 };
 
 /**
@@ -38,7 +41,7 @@ export const SharedBikeCircle = ({
   pixels,
   strokeColor
 }) => {
-  const GeneratedMarker = ({ children, entity: station }) => {
+  const GeneratedMarker = ({ children, keyboard, entity: station }) => {
     let newStrokeColor = strokeColor || fillColor;
 
     if (!station.isFloatingBike) {
@@ -51,6 +54,7 @@ export const SharedBikeCircle = ({
         color={newStrokeColor}
         fillColor={fillColor}
         fillOpacity={1}
+        keyboard={keyboard}
         radius={pixels - (station.isFloatingBike ? 1 : 0)}
         weight={1}
       >
@@ -68,7 +72,7 @@ export const SharedBikeCircle = ({
  * A component that renders rental bike entities
  * either as a bike or a bike dock (or hub, showing spaces available).
  */
-export const HubAndFloatingBike = ({ children, entity: station }) => {
+export const HubAndFloatingBike = ({ children, keyboard, entity: station }) => {
   let icon;
   if (station.isFloatingBike) {
     icon = floatingBikeIcon;
@@ -80,7 +84,7 @@ export const HubAndFloatingBike = ({ children, entity: station }) => {
     icon = hubIcons[i];
   }
   return (
-    <Marker icon={icon} position={[station.y, station.x]}>
+    <Marker icon={icon} keyboard={keyboard} position={[station.y, station.x]}>
       {children}
     </Marker>
   );
@@ -110,8 +114,12 @@ const getStationMarkerByColor = memoize(color =>
 export const GenericMarker = ({ fillColor = "gray" }) => {
   const markerIcon = getStationMarkerByColor(fillColor);
 
-  const GeneratedMarker = ({ children, entity: station }) => (
-    <Marker icon={markerIcon} position={[station.y, station.x]}>
+  const GeneratedMarker = ({ children, keyboard, entity: station }) => (
+    <Marker
+      icon={markerIcon}
+      keyboard={keyboard}
+      position={[station.y, station.x]}
+    >
       {children}
     </Marker>
   );

package/src/VehicleRentalOverlay.story.js

@@ -1,7 +1,7 @@
 import BaseMap from "@opentripplanner/base-map";
 import coreUtils from "@opentripplanner/core-utils";
 import PropTypes from "prop-types";
-import React, { Component } from "react";
+import React from "react";
 import { CircleMarker } from "react-leaflet";
 import { action } from "@storybook/addon-actions";
 import { boolean } from "@storybook/addon-knobs";
@@ -11,7 +11,6 @@ import bikeRentalStations from "../__mocks__/bike-rental-stations.json";
 import carRentalStations from "../__mocks__/car-rental-stations.json";
 import eScooterStations from "../__mocks__/e-scooter-rental-stations.json";
 import { HubAndFloatingBike } from "./DefaultMarkers";
-import LeafletLayerControlInterface from "./leaflet-layer-control-interface";
 
 import "../../../node_modules/leaflet/dist/leaflet.css";
 
@@ -165,51 +164,32 @@ const EScooterMapSymbols = [
 ];
 const setLocation = action("setLocation");
 
-class ZoomControlledMapWithVehicleRentalOverlay extends Component {
-  constructor() {
-    super();
-    this.state = { zoom: 13 };
-  }
-
-  onViewportChanged = ({ zoom }) => {
-    const { zoom: stateZoom } = this.state;
-    if (zoom !== stateZoom) {
-      this.setState({ zoom });
-    }
-  };
+const INITIAL_ZOOM = 13;
 
-  render() {
-    const {
-      companies,
-      getStationName,
-      mapSymbols,
-      refreshVehicles,
-      stations,
-      visible
-    } = this.props;
-    const { zoom } = this.state;
-    return (
-      <BaseMap
-        center={center}
-        onViewportChanged={this.onViewportChanged}
-        zoom={zoom}
-      >
-        <LeafletLayerControlInterface
-          configCompanies={configCompanies}
-          companies={companies}
-          getStationName={getStationName}
-          setLocation={setLocation}
-          mapSymbols={mapSymbols}
-          name="Rentals"
-          refreshVehicles={refreshVehicles}
-          stations={stations}
-          visible={visible}
-          zoom={zoom}
-        />
-      </BaseMap>
-    );
-  }
-}
+const ZoomControlledMapWithVehicleRentalOverlay = ({
+  companies,
+  getStationName,
+  mapSymbols,
+  refreshVehicles,
+  stations,
+  visible
+}) => (
+  // Caution, <BaseMap> must be a direct parent of <VehicleRentalOverlay>.
+  // Therefore, do not place <BaseMap> in a decorator at this time.
+  <BaseMap center={center} zoom={INITIAL_ZOOM}>
+    <VehicleRentalOverlay
+      configCompanies={configCompanies}
+      companies={companies}
+      getStationName={getStationName}
+      setLocation={setLocation}
+      mapSymbols={mapSymbols}
+      name="Rentals"
+      refreshVehicles={refreshVehicles}
+      stations={stations}
+      visible={visible}
+    />
+  </BaseMap>
+);
 
 ZoomControlledMapWithVehicleRentalOverlay.propTypes = {
   companies: PropTypes.arrayOf(PropTypes.string.isRequired),
@@ -225,7 +205,7 @@ ZoomControlledMapWithVehicleRentalOverlay.defaultProps = {
   companies: null,
   getStationName: undefined,
   mapSymbols: null,
-  visible: undefined
+  visible: true
 };
 
 function customStationName(_, station) {
@@ -249,7 +229,7 @@ export const RentalBicycles = () => (
 export const RentalBicyclesVisibilityControlledByKnob = () => {
   const isOverlayVisible = boolean(
     "Toggle visibility of vehicle rental overlay",
-    true
+    false
   );
   return (
     <ZoomControlledMapWithVehicleRentalOverlay

package/src/index.js

@@ -1,9 +1,11 @@
+import flatten from "flat";
 import { Styled as BaseMapStyled } from "@opentripplanner/base-map";
 import coreUtils from "@opentripplanner/core-utils";
 import FromToLocationPicker from "@opentripplanner/from-to-location-picker";
 import ZoomBasedMarkers from "@opentripplanner/zoom-based-markers";
 import PropTypes from "prop-types";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 import { FeatureGroup, MapLayer, Popup, withLeaflet } from "react-leaflet";
 
 import {
@@ -12,12 +14,28 @@ import {
   SharedBikeCircle
 } from "./DefaultMarkers";
 
+// Load the default messages.
+import defaultEnglishMessages from "../i18n/en-US.yml";
+
+// HACK: We should flatten the messages loaded above because
+// the YAML loaders behave differently between webpack and our version of jest:
+// - the yaml loader for webpack returns a nested object,
+// - the yaml loader for jest returns messages with flattened ids.
+const defaultMessages = flatten(defaultEnglishMessages);
+
 /**
  * This vehicle rental overlay can be used to render vehicle rentals of various
  * types. This layer can be configured to show different styles of markers at
  * different zoom levels.
  */
 class VehicleRentalOverlay extends MapLayer {
+  constructor(props) {
+    super(props);
+    this.state = {
+      zoom: props.leaflet.map.getZoom()
+    };
+  }
+
   /**
    * This helper method will be passed to the ZoomBasedMarkers symbolTransform prop.
    * It creates a component that inserts a popup
@@ -92,23 +110,50 @@ class VehicleRentalOverlay extends MapLayer {
     if (this.refreshTimer) clearInterval(this.refreshTimer);
   }
 
+  /**
+   * When the layer is added (or toggled on, or its visibility becomes true),
+   * start refreshing vehicle positions.
+   */
+  onOverlayAdded = () => {
+    this.startRefreshing();
+  };
+
+  /**
+   * When the layer is removed (or toggled off, or its visibility becomes false),
+   * stop refreshing vehicle positions.
+   */
+  onOverlayRemoved = () => {
+    this.stopRefreshing();
+  };
+
+  /**
+   * Listen to changes on the BaseMap's center or zoom.
+   * @param viewport The viewport data. See https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/viewport.js for details.
+   */
+  onViewportChanged = viewport => {
+    const { zoom: newZoom } = viewport;
+    if (this.state.zoom !== newZoom) {
+      this.setState({ zoom: newZoom });
+    }
+  };
+
+  /**
+   * Upon mounting, see whether the vehicles should be fetched,
+   * and also call the register overlay prop that the
+   * @opentripplanner/base-map package has injected to listen to zoom/position changes.
+   */
   componentDidMount() {
-    const { visible } = this.props;
+    const { registerOverlay, visible } = this.props;
     if (visible) this.startRefreshing();
+    if (typeof registerOverlay === "function") {
+      registerOverlay(this);
+    }
   }
 
   componentWillUnmount() {
     this.stopRefreshing();
   }
 
-  componentDidUpdate(prevProps) {
-    if (!prevProps.visible && this.props.visible) {
-      this.startRefreshing();
-    } else if (prevProps.visible && !this.props.visible) {
-      this.stopRefreshing();
-    }
-  }
-
   /**
    * Render some popup html for a station. This contains custom logic for
    * displaying rental vehicles in the TriMet MOD website that might not be
@@ -130,15 +175,33 @@ class VehicleRentalOverlay extends MapLayer {
           {/* render dock info if it is available */}
           {stationIsHub && (
             <BaseMapStyled.PopupRow>
-              <div>Available bikes: {station.bikesAvailable}</div>
-              <div>Available docks: {station.spacesAvailable}</div>
+              <div>
+                <FormattedMessage
+                  defaultMessage={
+                    defaultMessages["otpUi.VehicleRentalOverlay.availableBikes"]
+                  }
+                  description="Label text for the number of bikes available"
+                  id="otpUi.VehicleRentalOverlay.availableBikes"
+                  values={{ value: station.bikesAvailable }}
+                />
+              </div>
+              <div>
+                <FormattedMessage
+                  defaultMessage={
+                    defaultMessages["otpUi.VehicleRentalOverlay.availableDocks"]
+                  }
+                  description="Label text for the number of docks available"
+                  id="otpUi.VehicleRentalOverlay.availableDocks"
+                  values={{ value: station.spacesAvailable }}
+                />
+              </div>
             </BaseMapStyled.PopupRow>
           )}
 
           {/* Set as from/to toolbar */}
           <BaseMapStyled.PopupRow>
-            <b>Plan a trip:</b>
             <FromToLocationPicker
+              label
               location={location}
               setLocation={setLocation}
             />
@@ -149,14 +212,12 @@ class VehicleRentalOverlay extends MapLayer {
   };
 
   render() {
-    const { companies, mapSymbols, stations, visible } = this.props;
+    const { companies, mapSymbols, stations } = this.props;
+    const { zoom } = this.state;
     // Render an empty FeatureGroup if the rental vehicles should not be visible
     // on the map. Otherwise previous stations may still be shown due to some
     // react-leaflet internals, maybe? Also, do not return null because that will
     // prevent the overlay from appearing in the layer controls.
-    if (!visible) {
-      return <FeatureGroup />;
-    }
 
     let filteredStations = stations;
     if (companies) {
@@ -170,9 +231,6 @@ class VehicleRentalOverlay extends MapLayer {
       return <FeatureGroup />;
     }
 
-    // get zoom to check which symbol to render
-    const zoom = this.props.leaflet.map.getZoom();
-
     // Convert map symbols for this overlay to zoomBasedSymbolType.
     const symbols = this.convertToZoomMarkerSymbols(mapSymbols);