@opentripplanner/vehicle-rental-overlay 1.3.1 → 1.4.1

package/esm/index.js

@@ -8,14 +8,23 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+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 { GenericMarker, HubAndFloatingBike, SharedBikeCircle } from "./DefaultMarkers";
+import { GenericMarker, HubAndFloatingBike, 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.
+
+var 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
@@ -27,16 +36,12 @@ var VehicleRentalOverlay = /*#__PURE__*/function (_MapLayer) {
 
   var _super = _createSuper(VehicleRentalOverlay);
 
-  function VehicleRentalOverlay() {
+  function VehicleRentalOverlay(props) {
     var _this;
 
     _classCallCheck(this, VehicleRentalOverlay);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
 
     _this.renderSymbolWithPopup = function (_Symbol) {
       var SymbolWrapper = function SymbolWrapper(_ref) {
@@ -85,6 +90,24 @@ var VehicleRentalOverlay = /*#__PURE__*/function (_MapLayer) {
       });
     };
 
+    _this.onOverlayAdded = function () {
+      _this.startRefreshing();
+    };
+
+    _this.onOverlayRemoved = function () {
+      _this.stopRefreshing();
+    };
+
+    _this.onViewportChanged = function (viewport) {
+      var newZoom = viewport.zoom;
+
+      if (_this.state.zoom !== newZoom) {
+        _this.setState({
+          zoom: newZoom
+        });
+      }
+    };
+
     _this.renderPopupForStation = function (station) {
       var stationIsHub = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var _this$props = _this.props,
@@ -97,14 +120,38 @@ var VehicleRentalOverlay = /*#__PURE__*/function (_MapLayer) {
         lon: station.x,
         name: stationName
       };
-      return /*#__PURE__*/React.createElement(Popup, null, /*#__PURE__*/React.createElement(BaseMapStyled.MapOverlayPopup, null, /*#__PURE__*/React.createElement(BaseMapStyled.PopupTitle, null, stationName), stationIsHub && /*#__PURE__*/React.createElement(BaseMapStyled.PopupRow, null, /*#__PURE__*/React.createElement("div", null, "Available bikes: ", station.bikesAvailable), /*#__PURE__*/React.createElement("div", null, "Available docks: ", station.spacesAvailable)), /*#__PURE__*/React.createElement(BaseMapStyled.PopupRow, null, /*#__PURE__*/React.createElement("b", null, "Plan a trip:"), /*#__PURE__*/React.createElement(FromToLocationPicker, {
+      return /*#__PURE__*/React.createElement(Popup, null, /*#__PURE__*/React.createElement(BaseMapStyled.MapOverlayPopup, null, /*#__PURE__*/React.createElement(BaseMapStyled.PopupTitle, null, stationName), stationIsHub && /*#__PURE__*/React.createElement(BaseMapStyled.PopupRow, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(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.createElement("div", null, /*#__PURE__*/React.createElement(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.createElement(BaseMapStyled.PopupRow, null, /*#__PURE__*/React.createElement(FromToLocationPicker, {
+        label: true,
         location: location,
         setLocation: setLocation
       }))));
     };
 
+    _this.state = {
+      zoom: null
+    };
     return _this;
   }
+  /**
+   * 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.
+   */
+
 
   _createClass(VehicleRentalOverlay, [{
     key: "createLeafletElement",
@@ -131,26 +178,38 @@ var VehicleRentalOverlay = /*#__PURE__*/function (_MapLayer) {
     value: function stopRefreshing() {
       if (this.refreshTimer) clearInterval(this.refreshTimer);
     }
+    /**
+     * When the layer is added (or toggled on, or its visibility becomes true),
+     * start refreshing vehicle positions.
+     */
+
   }, {
     key: "componentDidMount",
-    value: function componentDidMount() {
-      var visible = this.props.visible;
+    value:
+    /**
+     * 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.
+     */
+    function componentDidMount() {
+      var _this$props2 = this.props,
+          leaflet = _this$props2.leaflet,
+          registerOverlay = _this$props2.registerOverlay,
+          visible = _this$props2.visible;
+      this.setState({
+        zoom: leaflet.map.getZoom()
+      });
       if (visible) this.startRefreshing();
+
+      if (typeof registerOverlay === "function") {
+        registerOverlay(this);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.stopRefreshing();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function 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
@@ -160,19 +219,17 @@ var VehicleRentalOverlay = /*#__PURE__*/function (_MapLayer) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-          companies = _this$props2.companies,
-          mapSymbols = _this$props2.mapSymbols,
-          stations = _this$props2.stations,
-          visible = _this$props2.visible; // Render an empty FeatureGroup if the rental vehicles should not be visible
+      var _this$props3 = this.props,
+          companies = _this$props3.companies,
+          leaflet = _this$props3.leaflet,
+          mapSymbols = _this$props3.mapSymbols,
+          stations = _this$props3.stations;
+      var _this$state$zoom = this.state.zoom,
+          zoom = _this$state$zoom === void 0 ? leaflet.map.getZoom() : _this$state$zoom; // 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.createElement(FeatureGroup, null);
-      }
-
       var filteredStations = stations;
 
       if (companies) {
@@ -185,10 +242,8 @@ var VehicleRentalOverlay = /*#__PURE__*/function (_MapLayer) {
 
       if (!filteredStations || filteredStations.length === 0) {
         return /*#__PURE__*/React.createElement(FeatureGroup, null);
-      } // get zoom to check which symbol to render
-
+      } // Convert map symbols for this overlay to zoomBasedSymbolType.
 
-      var zoom = this.props.leaflet.map.getZoom(); // Convert map symbols for this overlay to zoomBasedSymbolType.
 
       var symbols = this.convertToZoomMarkerSymbols(mapSymbols);
       return /*#__PURE__*/React.createElement(FeatureGroup, null, /*#__PURE__*/React.createElement(ZoomBasedMarkers, {

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Styled","BaseMapStyled","coreUtils","FromToLocationPicker","ZoomBasedMarkers","PropTypes","React","FeatureGroup","MapLayer","Popup","withLeaflet","GenericMarker","HubAndFloatingBike","SharedBikeCircle","VehicleRentalOverlay","renderSymbolWithPopup","Symbol","SymbolWrapper","station","entity","zoom","renderPopupForStation","bikesAvailable","undefined","isFloatingBike","propTypes","types","stationType","isRequired","number","convertToZoomMarkerSymbols","mapSymbols","map","mapSymbol","symbol","type","minZoom","stationIsHub","props","configCompanies","getStationName","setLocation","stationName","location","lat","y","lon","x","name","spacesAvailable","refreshVehicles","refreshTimer","setInterval","clearInterval","visible","startRefreshing","stopRefreshing","prevProps","companies","stations","filteredStations","filter","networks","value","includes","length","leaflet","getZoom","symbols","arrayOf","companyType","string","func","vehicleRentalMapOverlaySymbolsType","bool","defaultProps","stationNetworks","itinerary","getCompaniesLabelFromNetworks","id","isFloatingCar","isFloatingVehicle"],"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":["flatten","Styled","BaseMapStyled","coreUtils","FromToLocationPicker","ZoomBasedMarkers","PropTypes","React","FormattedMessage","FeatureGroup","MapLayer","Popup","withLeaflet","GenericMarker","HubAndFloatingBike","SharedBikeCircle","defaultEnglishMessages","defaultMessages","VehicleRentalOverlay","props","renderSymbolWithPopup","Symbol","SymbolWrapper","station","entity","zoom","renderPopupForStation","bikesAvailable","undefined","isFloatingBike","propTypes","types","stationType","isRequired","number","convertToZoomMarkerSymbols","mapSymbols","map","mapSymbol","symbol","type","minZoom","onOverlayAdded","startRefreshing","onOverlayRemoved","stopRefreshing","onViewportChanged","viewport","newZoom","state","setState","stationIsHub","configCompanies","getStationName","setLocation","stationName","location","lat","y","lon","x","name","value","spacesAvailable","refreshVehicles","refreshTimer","setInterval","clearInterval","leaflet","registerOverlay","visible","getZoom","companies","stations","filteredStations","filter","networks","includes","length","symbols","arrayOf","companyType","string","func","vehicleRentalMapOverlaySymbolsType","bool","defaultProps","stationNetworks","itinerary","getCompaniesLabelFromNetworks","id","isFloatingCar","isFloatingVehicle"],"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: null\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 { leaflet, registerOverlay, visible } = this.props;\n    this.setState({\n      zoom: leaflet.map.getZoom()\n    });\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, leaflet, mapSymbols, stations } = this.props;\n    const { zoom = leaflet.map.getZoom() } = 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/i18n/en-US.yml

@@ -0,0 +1,14 @@
+# Default messages for the VehicleRentalOverlay component.
+# To use from a react-intl application:
+# - merge the content of this file into the messages object
+#   that has your other localized strings,
+# - flatten the ids, i.e. convert a structure such as
+#      otpUi > VehicleRentalOverlay > availableBikes
+#   into "otpUi.VehicleRentalOverlay.availableBikes".
+# - pass the resulting object to the messages prop of IntlProvider.
+#
+
+otpUi:
+  VehicleRentalOverlay:
+    availableBikes: "Available bikes: {value}"
+    availableDocks: "Available docks: {value}"

package/i18n/fr.yml

@@ -0,0 +1,14 @@
+# Default messages for the VehicleRentalOverlay component.
+# To use from a react-intl application:
+# - merge the content of this file into the messages object
+#   that has your other localized strings,
+# - flatten the ids, i.e. convert a structure such as
+#      otpUi > VehicleRentalOverlay > availableBikes
+#   into "otpUi.VehicleRentalOverlay.availableBikes".
+# - pass the resulting object to the messages prop of IntlProvider.
+#
+
+otpUi:
+  VehicleRentalOverlay:
+    availableBikes: "Vélos disponibles : {value}"
+    availableDocks: "Bornes disponibles : {value}"

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: null
+    };
   }
+  /**
+   * 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,36 @@ 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 {
+      leaflet,
+      registerOverlay,
       visible
     } = this.props;
+    this.setState({
+      zoom: leaflet.map.getZoom()
+    });
     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
@@ -146,18 +215,17 @@ class VehicleRentalOverlay extends _reactLeaflet.MapLayer {
   render() {
     const {
       companies,
+      leaflet,
       mapSymbols,
-      stations,
-      visible
-    } = this.props; // Render an empty FeatureGroup if the rental vehicles should not be visible
+      stations
+    } = this.props;
+    const {
+      zoom = leaflet.map.getZoom()
+    } = 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 +234,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":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAMA;AACA;AACA;AACA;AACA;AACA,MAAMA,oBAAN,SAAmCC,sBAAnC,CAA4C;AAAA;AAAA;;AAAA,SAM1CC,qBAN0C,GAMlBC,MAAM,IAAI;AAChC,YAAMC,aAAa,GAAG,CAAC;AAAEC,QAAAA,MAAM,EAAEC,OAAV;AAAmBC,QAAAA;AAAnB,OAAD,kBACpB,6BAAC,MAAD;AAAQ,QAAA,MAAM,EAAED,OAAhB;AAAyB,QAAA,IAAI,EAAEC;AAA/B,SACG,KAAKC,qBAAL,CACCF,OADD,EAECA,OAAO,CAACG,cAAR,KAA2BC,SAA3B,IAAwC,CAACJ,OAAO,CAACK,cAFlD,CADH,CADF;;AAQAP,MAAAA,aAAa,CAACQ,SAAd,GAA0B;AACxBP,QAAAA,MAAM,EAAEQ,mBAAUC,KAAV,CAAgBC,WAAhB,CAA4BC,UADZ;AAExBT,QAAAA,IAAI,EAAEU,mBAAUC,MAAV,CAAiBF;AAFC,OAA1B;AAKA,aAAOZ,aAAP;AACD,KArByC;;AAAA,SA0B1Ce,0BA1B0C,GA0BbC,UAAU,IACrCA,UAAU,CAACC,GAAX,CAAeC,SAAS,IAAI;AAC1B;AACA,UAAIA,SAAS,CAACC,MAAd,EAAsB;AACpB,eAAOD,SAAP;AACD,OAJyB,CAM1B;;;AACA,UAAIC,MAAJ;;AACA,cAAQD,SAAS,CAACE,IAAlB;AACE,aAAK,QAAL;AACED,UAAAA,MAAM,GAAG,sCAAiBD,SAAjB,CAAT;AACA;;AACF,aAAK,oBAAL;AACEC,UAAAA,MAAM,GAAGE,kCAAT;AACA;;AACF;AACEF,UAAAA,MAAM,GAAG,mCAAcD,SAAd,CAAT;AARJ;;AAWA,aAAO;AACLI,QAAAA,OAAO,EAAEJ,SAAS,CAACI,OADd;AAELH,QAAAA;AAFK,OAAP;AAID,KAvBD,CA3BwC;;AAAA,SAiG1Cf,qBAjG0C,GAiGlB,CAACF,OAAD,EAAUqB,YAAY,GAAG,KAAzB,KAAmC;AACzD,YAAM;AAAEC,QAAAA,eAAF;AAAmBC,QAAAA,cAAnB;AAAmCC,QAAAA;AAAnC,UAAmD,KAAKC,KAA9D;AACA,YAAMC,WAAW,GAAGH,cAAc,CAACD,eAAD,EAAkBtB,OAAlB,CAAlC;AACA,YAAM2B,QAAQ,GAAG;AACfC,QAAAA,GAAG,EAAE5B,OAAO,CAAC6B,CADE;AAEfC,QAAAA,GAAG,EAAE9B,OAAO,CAAC+B,CAFE;AAGfC,QAAAA,IAAI,EAAEN;AAHS,OAAjB;AAKA,0BACE,6BAAC,mBAAD,qBACE,6BAAC,eAAD,CAAe,eAAf,qBACE,6BAAC,eAAD,CAAe,UAAf,QAA2BA,WAA3B,CADF,EAIGL,YAAY,iBACX,6BAAC,eAAD,CAAe,QAAf,qBACE,+DAAuBrB,OAAO,CAACG,cAA/B,CADF,eAEE,+DAAuBH,OAAO,CAACiC,eAA/B,CAFF,CALJ,eAYE,6BAAC,eAAD,CAAe,QAAf,qBACE,uDADF,eAEE,6BAAC,6BAAD;AACE,QAAA,QAAQ,EAAEN,QADZ;AAEE,QAAA,WAAW,EAAEH;AAFf,QAFF,CAZF,CADF,CADF;AAwBD,KAjIyC;AAAA;;AAoD1CU,EAAAA,oBAAoB,GAAG,CAAE;;AAEzBC,EAAAA,oBAAoB,GAAG,CAAE;;AAEzBC,EAAAA,eAAe,GAAG;AAChB,UAAM;AAAEC,MAAAA;AAAF,QAAsB,KAAKZ,KAAjC,CADgB,CAGhB;;AACA,QAAI,OAAOY,eAAP,KAA2B,UAA/B,EAA2C;AACzC;AACAA,MAAAA,eAAe,GAF0B,CAIzC;;AACA,WAAKC,YAAL,GAAoBC,WAAW,CAAC,MAAM;AACpCF,QAAAA,eAAe;AAChB,OAF8B,EAE5B,KAF4B,CAA/B,CALyC,CAO9B;AACZ;AACF;;AAEDG,EAAAA,cAAc,GAAG;AACf,QAAI,KAAKF,YAAT,EAAuBG,aAAa,CAAC,KAAKH,YAAN,CAAb;AACxB;;AAEDI,EAAAA,iBAAiB,GAAG;AAClB,UAAM;AAAEC,MAAAA;AAAF,QAAc,KAAKlB,KAAzB;AACA,QAAIkB,OAAJ,EAAa,KAAKP,eAAL;AACd;;AAEDQ,EAAAA,oBAAoB,GAAG;AACrB,SAAKJ,cAAL;AACD;;AAEDK,EAAAA,kBAAkB,CAACC,SAAD,EAAY;AAC5B,QAAI,CAACA,SAAS,CAACH,OAAX,IAAsB,KAAKlB,KAAL,CAAWkB,OAArC,EAA8C;AAC5C,WAAKP,eAAL;AACD,KAFD,MAEO,IAAIU,SAAS,CAACH,OAAV,IAAqB,CAAC,KAAKlB,KAAL,CAAWkB,OAArC,EAA8C;AACnD,WAAKH,cAAL;AACD;AACF;AAED;AACF;AACA;AACA;AACA;;;AAmCEO,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,SAAF;AAAalC,MAAAA,UAAb;AAAyBmC,MAAAA,QAAzB;AAAmCN,MAAAA;AAAnC,QAA+C,KAAKlB,KAA1D,CADO,CAEP;AACA;AACA;AACA;;AACA,QAAI,CAACkB,OAAL,EAAc;AACZ,0BAAO,6BAAC,0BAAD,OAAP;AACD;;AAED,QAAIO,gBAAgB,GAAGD,QAAvB;;AACA,QAAID,SAAJ,EAAe;AACbE,MAAAA,gBAAgB,GAAGD,QAAQ,CAACE,MAAT,CACjBnD,OAAO,IACLA,OAAO,CAACoD,QAAR,CAAiBD,MAAjB,CAAwBE,KAAK,IAAIL,SAAS,CAACM,QAAV,CAAmBD,KAAnB,CAAjC,EAA4DE,MAA5D,GAAqE,CAFtD,CAAnB;AAID;;AAED,QAAI,CAACL,gBAAD,IAAqBA,gBAAgB,CAACK,MAAjB,KAA4B,CAArD,EAAwD;AACtD,0BAAO,6BAAC,0BAAD,OAAP;AACD,KApBM,CAsBP;;;AACA,UAAMtD,IAAI,GAAG,KAAKwB,KAAL,CAAW+B,OAAX,CAAmBzC,GAAnB,CAAuB0C,OAAvB,EAAb,CAvBO,CAyBP;;AACA,UAAMC,OAAO,GAAG,KAAK7C,0BAAL,CAAgCC,UAAhC,CAAhB;AAEA,wBACE,6BAAC,0BAAD,qBACE,6BAAC,yBAAD;AACE,MAAA,QAAQ,EAAEoC,gBADZ;AAEE,MAAA,OAAO,EAAEQ,OAFX;AAGE,MAAA,eAAe,EAAE,KAAK9D,qBAHxB;AAIE,MAAA,IAAI,EAAEK;AAJR,MADF,CADF;AAUD;;AAzKyC;;AA4K5CP,oBAAoB,CAAC+B,KAArB,GAA6B;AAC3B;AACF;AACA;AACEH,EAAAA,eAAe,EAAEX,mBAAUgD,OAAV,CAAkBpD,mBAAUC,KAAV,CAAgBoD,WAAhB,CAA4BlD,UAA9C,EACdA,UALwB;;AAM3B;AACF;AACA;AACA;AACEsC,EAAAA,SAAS,EAAErC,mBAAUgD,OAAV,CAAkBhD,mBAAUkD,MAAV,CAAiBnD,UAAnC,CAVgB;;AAW3B;AACF;AACA;AACA;AACA;AACEa,EAAAA,cAAc,EAAEZ,mBAAUmD,IAhBC;;AAiB3B;AACF;AACA;AACA;AACEhD,EAAAA,UAAU,EAAEP,mBAAUC,KAAV,CAAgBuD,kCArBD;;AAsB3B;AACF;AACA;AACA;AACE1B,EAAAA,eAAe,EAAE1B,mBAAUmD,IA1BA;;AA2B3B;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACEtC,EAAAA,WAAW,EAAEb,mBAAUmD,IAAV,CAAepD,UA5CD;;AA6C3B;AACF;AACA;AACEuC,EAAAA,QAAQ,EAAEtC,mBAAUgD,OAAV,CAAkBpD,mBAAUC,KAAV,CAAgBC,WAAlC,CAhDiB;;AAiD3B;AACF;AACA;AACEkC,EAAAA,OAAO,EAAEhC,mBAAUqD;AApDQ,CAA7B;AAuDAtE,oBAAoB,CAACuE,YAArB,GAAoC;AAClC1C,EAAAA,cAAc,EAAE,CAACD,eAAD,EAAkBtB,OAAlB,KAA8B;AAC5C,UAAMkE,eAAe,GAAG3D,mBAAU4D,SAAV,CAAoBC,6BAApB,CACtBpE,OAAO,CAACoD,QADc,EAEtB9B,eAFsB,CAAxB;;AAIA,QAAII,WAAW,GAAG1B,OAAO,CAACgC,IAAR,IAAgBhC,OAAO,CAACqE,EAA1C;;AACA,QAAIrE,OAAO,CAACK,cAAZ,EAA4B;AAC1BqB,MAAAA,WAAW,GAAI,uBAAsBA,WAAY,EAAjD;AACD,KAFD,MAEO,IAAI1B,OAAO,CAACsE,aAAZ,EAA2B;AAChC5C,MAAAA,WAAW,GAAI,GAAEwC,eAAgB,IAAGxC,WAAY,EAAhD;AACD,KAFM,MAEA,IAAI1B,OAAO,CAACuE,iBAAZ,EAA+B;AACpC;AACA7C,MAAAA,WAAW,GAAI,GAAEwC,eAAgB,YAAjC;AACD;;AACD,WAAOxC,WAAP;AACD,GAhBiC;AAiBlCZ,EAAAA,UAAU,EAAE,CACV;AACEb,IAAAA,IAAI,EAAE,CADR;AAEEgB,IAAAA,MAAM,EAAEuD;AAFV,GADU,CAjBsB;AAuBlCnC,EAAAA,eAAe,EAAE,IAvBiB;AAwBlCY,EAAAA,QAAQ,EAAE,EAxBwB;AAyBlCN,EAAAA,OAAO,EAAE;AAzByB,CAApC;;eA4Be,+BAAYjD,oBAAZ,C","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","createLeafletElement","updateLeafletElement","refreshVehicles","refreshTimer","setInterval","clearInterval","componentDidMount","leaflet","registerOverlay","visible","getZoom","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":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAOA;;AADA;AAGA;AACA;AACA;AACA;AACA,MAAMA,eAAe,GAAG,mBAAQC,aAAR,CAAxB;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,oBAAN,SAAmCC,sBAAnC,CAA4C;AAC1CC,EAAAA,WAAW,CAACC,KAAD,EAAQ;AACjB,UAAMA,KAAN;;AADiB,SAYnBC,qBAZmB,GAYKC,MAAM,IAAI;AAChC,YAAMC,aAAa,GAAG,CAAC;AAAEC,QAAAA,MAAM,EAAEC,OAAV;AAAmBC,QAAAA;AAAnB,OAAD,kBACpB,6BAAC,MAAD;AAAQ,QAAA,MAAM,EAAED,OAAhB;AAAyB,QAAA,IAAI,EAAEC;AAA/B,SACG,KAAKC,qBAAL,CACCF,OADD,EAECA,OAAO,CAACG,cAAR,KAA2BC,SAA3B,IAAwC,CAACJ,OAAO,CAACK,cAFlD,CADH,CADF;;AAQAP,MAAAA,aAAa,CAACQ,SAAd,GAA0B;AACxBP,QAAAA,MAAM,EAAEQ,mBAAUC,KAAV,CAAgBC,WAAhB,CAA4BC,UADZ;AAExBT,QAAAA,IAAI,EAAEU,mBAAUC,MAAV,CAAiBF;AAFC,OAA1B;AAKA,aAAOZ,aAAP;AACD,KA3BkB;;AAAA,SAgCnBe,0BAhCmB,GAgCUC,UAAU,IACrCA,UAAU,CAACC,GAAX,CAAeC,SAAS,IAAI;AAC1B;AACA,UAAIA,SAAS,CAACC,MAAd,EAAsB;AACpB,eAAOD,SAAP;AACD,OAJyB,CAM1B;;;AACA,UAAIC,MAAJ;;AACA,cAAQD,SAAS,CAACE,IAAlB;AACE,aAAK,QAAL;AACED,UAAAA,MAAM,GAAG,sCAAiBD,SAAjB,CAAT;AACA;;AACF,aAAK,oBAAL;AACEC,UAAAA,MAAM,GAAGE,kCAAT;AACA;;AACF;AACEF,UAAAA,MAAM,GAAG,mCAAcD,SAAd,CAAT;AARJ;;AAWA,aAAO;AACLI,QAAAA,OAAO,EAAEJ,SAAS,CAACI,OADd;AAELH,QAAAA;AAFK,OAAP;AAID,KAvBD,CAjCiB;;AAAA,SAqFnBI,cArFmB,GAqFF,MAAM;AACrB,WAAKC,eAAL;AACD,KAvFkB;;AAAA,SA6FnBC,gBA7FmB,GA6FA,MAAM;AACvB,WAAKC,cAAL;AACD,KA/FkB;;AAAA,SAqGnBC,iBArGmB,GAqGCC,QAAQ,IAAI;AAC9B,YAAM;AAAEzB,QAAAA,IAAI,EAAE0B;AAAR,UAAoBD,QAA1B;;AACA,UAAI,KAAKE,KAAL,CAAW3B,IAAX,KAAoB0B,OAAxB,EAAiC;AAC/B,aAAKE,QAAL,CAAc;AAAE5B,UAAAA,IAAI,EAAE0B;AAAR,SAAd;AACD;AACF,KA1GkB;;AAAA,SAqInBzB,qBArImB,GAqIK,CAACF,OAAD,EAAU8B,YAAY,GAAG,KAAzB,KAAmC;AACzD,YAAM;AAAEC,QAAAA,eAAF;AAAmBC,QAAAA,cAAnB;AAAmCC,QAAAA;AAAnC,UAAmD,KAAKtC,KAA9D;AACA,YAAMuC,WAAW,GAAGF,cAAc,CAACD,eAAD,EAAkB/B,OAAlB,CAAlC;AACA,YAAMmC,QAAQ,GAAG;AACfC,QAAAA,GAAG,EAAEpC,OAAO,CAACqC,CADE;AAEfC,QAAAA,GAAG,EAAEtC,OAAO,CAACuC,CAFE;AAGfC,QAAAA,IAAI,EAAEN;AAHS,OAAjB;AAKA,0BACE,6BAAC,mBAAD,qBACE,6BAAC,eAAD,CAAe,eAAf,qBACE,6BAAC,eAAD,CAAe,UAAf,QAA2BA,WAA3B,CADF,EAIGJ,YAAY,iBACX,6BAAC,eAAD,CAAe,QAAf,qBACE,uDACE,6BAAC,2BAAD;AACE,QAAA,cAAc,EACZxC,eAAe,CAAC,2CAAD,CAFnB;AAIE,QAAA,WAAW,EAAC,8CAJd;AAKE,QAAA,EAAE,EAAC,2CALL;AAME,QAAA,MAAM,EAAE;AAAEmD,UAAAA,KAAK,EAAEzC,OAAO,CAACG;AAAjB;AANV,QADF,CADF,eAWE,uDACE,6BAAC,2BAAD;AACE,QAAA,cAAc,EACZb,eAAe,CAAC,2CAAD,CAFnB;AAIE,QAAA,WAAW,EAAC,8CAJd;AAKE,QAAA,EAAE,EAAC,2CALL;AAME,QAAA,MAAM,EAAE;AAAEmD,UAAAA,KAAK,EAAEzC,OAAO,CAAC0C;AAAjB;AANV,QADF,CAXF,CALJ,eA8BE,6BAAC,eAAD,CAAe,QAAf,qBACE,6BAAC,6BAAD;AACE,QAAA,KAAK,MADP;AAEE,QAAA,QAAQ,EAAEP,QAFZ;AAGE,QAAA,WAAW,EAAEF;AAHf,QADF,CA9BF,CADF,CADF;AA0CD,KAvLkB;;AAEjB,SAAKL,KAAL,GAAa;AACX3B,MAAAA,IAAI,EAAE;AADK,KAAb;AAGD;AAED;AACF;AACA;AACA;AACA;;;AA+CE0C,EAAAA,oBAAoB,GAAG,CAAE;;AAEzBC,EAAAA,oBAAoB,GAAG,CAAE;;AAEzBtB,EAAAA,eAAe,GAAG;AAChB,UAAM;AAAEuB,MAAAA;AAAF,QAAsB,KAAKlD,KAAjC,CADgB,CAGhB;;AACA,QAAI,OAAOkD,eAAP,KAA2B,UAA/B,EAA2C;AACzC;AACAA,MAAAA,eAAe,GAF0B,CAIzC;;AACA,WAAKC,YAAL,GAAoBC,WAAW,CAAC,MAAM;AACpCF,QAAAA,eAAe;AAChB,OAF8B,EAE5B,KAF4B,CAA/B,CALyC,CAO9B;AACZ;AACF;;AAEDrB,EAAAA,cAAc,GAAG;AACf,QAAI,KAAKsB,YAAT,EAAuBE,aAAa,CAAC,KAAKF,YAAN,CAAb;AACxB;AAED;AACF;AACA;AACA;;;AAwBE;AACF;AACA;AACA;AACA;AACEG,EAAAA,iBAAiB,GAAG;AAClB,UAAM;AAAEC,MAAAA,OAAF;AAAWC,MAAAA,eAAX;AAA4BC,MAAAA;AAA5B,QAAwC,KAAKzD,KAAnD;AACA,SAAKkC,QAAL,CAAc;AACZ5B,MAAAA,IAAI,EAAEiD,OAAO,CAACnC,GAAR,CAAYsC,OAAZ;AADM,KAAd;AAGA,QAAID,OAAJ,EAAa,KAAK9B,eAAL;;AACb,QAAI,OAAO6B,eAAP,KAA2B,UAA/B,EAA2C;AACzCA,MAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AACF;;AAEDG,EAAAA,oBAAoB,GAAG;AACrB,SAAK9B,cAAL;AACD;AAED;AACF;AACA;AACA;AACA;;;AAqDE+B,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,SAAF;AAAaN,MAAAA,OAAb;AAAsBpC,MAAAA,UAAtB;AAAkC2C,MAAAA;AAAlC,QAA+C,KAAK9D,KAA1D;AACA,UAAM;AAAEM,MAAAA,IAAI,GAAGiD,OAAO,CAACnC,GAAR,CAAYsC,OAAZ;AAAT,QAAmC,KAAKzB,KAA9C,CAFO,CAGP;AACA;AACA;AACA;;AAEA,QAAI8B,gBAAgB,GAAGD,QAAvB;;AACA,QAAID,SAAJ,EAAe;AACbE,MAAAA,gBAAgB,GAAGD,QAAQ,CAACE,MAAT,CACjB3D,OAAO,IACLA,OAAO,CAAC4D,QAAR,CAAiBD,MAAjB,CAAwBlB,KAAK,IAAIe,SAAS,CAACK,QAAV,CAAmBpB,KAAnB,CAAjC,EAA4DqB,MAA5D,GAAqE,CAFtD,CAAnB;AAID;;AAED,QAAI,CAACJ,gBAAD,IAAqBA,gBAAgB,CAACI,MAAjB,KAA4B,CAArD,EAAwD;AACtD,0BAAO,6BAAC,0BAAD,OAAP;AACD,KAlBM,CAoBP;;;AACA,UAAMC,OAAO,GAAG,KAAKlD,0BAAL,CAAgCC,UAAhC,CAAhB;AAEA,wBACE,6BAAC,0BAAD,qBACE,6BAAC,yBAAD;AACE,MAAA,QAAQ,EAAE4C,gBADZ;AAEE,MAAA,OAAO,EAAEK,OAFX;AAGE,MAAA,eAAe,EAAE,KAAKnE,qBAHxB;AAIE,MAAA,IAAI,EAAEK;AAJR,MADF,CADF;AAUD;;AA3NyC;;AA8N5CT,oBAAoB,CAACG,KAArB,GAA6B;AAC3B;AACF;AACA;AACEoC,EAAAA,eAAe,EAAEpB,mBAAUqD,OAAV,CAAkBzD,mBAAUC,KAAV,CAAgByD,WAAhB,CAA4BvD,UAA9C,EACdA,UALwB;;AAM3B;AACF;AACA;AACA;AACE8C,EAAAA,SAAS,EAAE7C,mBAAUqD,OAAV,CAAkBrD,mBAAUuD,MAAV,CAAiBxD,UAAnC,CAVgB;;AAW3B;AACF;AACA;AACA;AACA;AACEsB,EAAAA,cAAc,EAAErB,mBAAUwD,IAhBC;;AAiB3B;AACF;AACA;AACA;AACErD,EAAAA,UAAU,EAAEP,mBAAUC,KAAV,CAAgB4D,kCArBD;;AAsB3B;AACF;AACA;AACA;AACEvB,EAAAA,eAAe,EAAElC,mBAAUwD,IA1BA;;AA2B3B;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACElC,EAAAA,WAAW,EAAEtB,mBAAUwD,IAAV,CAAezD,UA5CD;;AA6C3B;AACF;AACA;AACE+C,EAAAA,QAAQ,EAAE9C,mBAAUqD,OAAV,CAAkBzD,mBAAUC,KAAV,CAAgBC,WAAlC,CAhDiB;;AAiD3B;AACF;AACA;AACE2C,EAAAA,OAAO,EAAEzC,mBAAU0D;AApDQ,CAA7B;AAuDA7E,oBAAoB,CAAC8E,YAArB,GAAoC;AAClCtC,EAAAA,cAAc,EAAE,CAACD,eAAD,EAAkB/B,OAAlB,KAA8B;AAC5C,UAAMuE,eAAe,GAAGhE,mBAAUiE,SAAV,CAAoBC,6BAApB,CACtBzE,OAAO,CAAC4D,QADc,EAEtB7B,eAFsB,CAAxB;;AAIA,QAAIG,WAAW,GAAGlC,OAAO,CAACwC,IAAR,IAAgBxC,OAAO,CAAC0E,EAA1C;;AACA,QAAI1E,OAAO,CAACK,cAAZ,EAA4B;AAC1B6B,MAAAA,WAAW,GAAI,uBAAsBA,WAAY,EAAjD;AACD,KAFD,MAEO,IAAIlC,OAAO,CAAC2E,aAAZ,EAA2B;AAChCzC,MAAAA,WAAW,GAAI,GAAEqC,eAAgB,IAAGrC,WAAY,EAAhD;AACD,KAFM,MAEA,IAAIlC,OAAO,CAAC4E,iBAAZ,EAA+B;AACpC;AACA1C,MAAAA,WAAW,GAAI,GAAEqC,eAAgB,YAAjC;AACD;;AACD,WAAOrC,WAAP;AACD,GAhBiC;AAiBlCpB,EAAAA,UAAU,EAAE,CACV;AACEb,IAAAA,IAAI,EAAE,CADR;AAEEgB,IAAAA,MAAM,EAAE4D;AAFV,GADU,CAjBsB;AAuBlChC,EAAAA,eAAe,EAAE,IAvBiB;AAwBlCY,EAAAA,QAAQ,EAAE,EAxBwB;AAyBlCL,EAAAA,OAAO,EAAE;AAzByB,CAApC;;eA4Be,+BAAY5D,oBAAZ,C","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: null\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 { leaflet, registerOverlay, visible } = this.props;\n    this.setState({\n      zoom: leaflet.map.getZoom()\n    });\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, leaflet, mapSymbols, stations } = this.props;\n    const { zoom = leaflet.map.getZoom() } = 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.1",
+  "version": "1.4.1",
   "description": "A map overlay to show vehicle rentals from a specific company",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -18,11 +18,11 @@
     "url": "git+https://github.com/opentripplanner/otp-ui.git"
   },
   "dependencies": {
-    "@opentripplanner/base-map": "^2.0.0",
     "@opentripplanner/core-utils": "^4.5.0",
-    "@opentripplanner/from-to-location-picker": "^1.3.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"
   },
@@ -30,6 +30,7 @@
     "@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/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: null
+    };
+  }
+
   /**
    * This helper method will be passed to the ZoomBasedMarkers symbolTransform prop.
    * It creates a component that inserts a popup
@@ -92,23 +110,53 @@ 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 { leaflet, registerOverlay, visible } = this.props;
+    this.setState({
+      zoom: leaflet.map.getZoom()
+    });
     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 +178,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 +215,12 @@ class VehicleRentalOverlay extends MapLayer {
   };
 
   render() {
-    const { companies, mapSymbols, stations, visible } = this.props;
+    const { companies, leaflet, mapSymbols, stations } = this.props;
+    const { zoom = leaflet.map.getZoom() } = 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 +234,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);
 

package/esm/leaflet-layer-control-interface.js

@@ -1,90 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React, { Component } from "react";
-import VehicleRentalOverlay from ".";
-
-/**
- * This class is a necessary intermediary to handle events proxied from the
- * parent @opentripplanner/base-map component handlers to this component.
- * Without this interface, there would be no way to detect when a user would
- * hide this layer from view on the Leaflet map. The visible property influences
- * and sets the Leaflet Layer Control which then is handled by the
- * @opentripplanner/base-map component and then delivered to the
- * `onOverlayAdded` and `onOverlayRemoved` handlers which then finally set this
- * component's state which is then finally used by the vehicle rental overlay
- * to properly manage the requesting of vehicle rentals.
- */
-var LeafletLayerControlInterface = /*#__PURE__*/function (_Component) {
-  _inherits(LeafletLayerControlInterface, _Component);
-
-  var _super = _createSuper(LeafletLayerControlInterface);
-
-  function LeafletLayerControlInterface(props) {
-    var _this;
-
-    _classCallCheck(this, LeafletLayerControlInterface);
-
-    _this = _super.call(this, props);
-
-    _this.onOverlayAdded = function () {
-      _this.setState({
-        visible: true
-      });
-    };
-
-    _this.onOverlayRemoved = function () {
-      _this.setState({
-        visible: false
-      });
-    };
-
-    _this.state = {
-      visible: props.visible
-    };
-    return _this;
-  }
-  /**
-   * Upon mounting, this class calls the register overlay property that the
-   * @opentripplanner/base-map package has injected into the props.
-   */
-
-
-  _createClass(LeafletLayerControlInterface, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var registerOverlay = this.props.registerOverlay;
-      registerOverlay(this);
-    }
-    /**
-     * A handler function for when this layer is toggled on by the user via the
-     * leaflet layer control.
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      var visible = this.state.visible;
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        React.createElement(VehicleRentalOverlay, _extends({}, this.props, {
-          visible: visible
-        }))
-      );
-    }
-  }]);
-
-  return LeafletLayerControlInterface;
-}(Component);
-
-export { LeafletLayerControlInterface as default };
-//# sourceMappingURL=leaflet-layer-control-interface.js.map

package/esm/leaflet-layer-control-interface.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/leaflet-layer-control-interface.tsx"],"names":["React","Component","VehicleRentalOverlay","LeafletLayerControlInterface","props","onOverlayAdded","setState","visible","onOverlayRemoved","state","registerOverlay"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AAEA,OAAOC,oBAAP,MAAiC,GAAjC;;AA0BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACqBC,4B;;;;;AAInB,wCAAYC,KAAZ,EAA0B;AAAA;;AAAA;;AACxB,8BAAMA,KAAN;;AADwB,UAkB1BC,cAlB0B,GAkBT,YAAM;AACrB,YAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KApByB;;AAAA,UA0B1BC,gBA1B0B,GA0BP,YAAM;AACvB,YAAKF,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KA5ByB;;AAExB,UAAKE,KAAL,GAAa;AAAEF,MAAAA,OAAO,EAAEH,KAAK,CAACG;AAAjB,KAAb;AAFwB;AAGzB;AAED;AACF;AACA;AACA;;;;;WACE,6BAAoB;AAClB,UAAQG,eAAR,GAA4B,KAAKN,KAAjC,CAAQM,eAAR;AACAA,MAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AAED;AACF;AACA;AACA;;;;WAaE,kBAAS;AACP,UAAQH,OAAR,GAAoB,KAAKE,KAAzB,CAAQF,OAAR;AACA;AAAA;AACE;AACA,4BAAC,oBAAD,eAA0B,KAAKH,KAA/B;AAAsC,UAAA,OAAO,EAAEG;AAA/C;AAFF;AAID;;;;EAxCuDN,S;;SAArCE,4B","sourcesContent":["import React, { Component } from \"react\";\n\nimport VehicleRentalOverlay from \".\";\n\ntype Props = {\n  /**\n   * This method is created by the @opentripplanner/base-map package when\n   * mounting user-defined layers. This will allow the component to subscribe to\n   * various leaflet events that then get forwarded on to this component.\n   */\n  registerOverlay: (component: Component) => void;\n  /**\n   * Whether or not to initially display the rental vehicles. Once the component\n   * is mounted the subscribed events of a user toggling on or off the layer via\n   * the layer control item will subsequently control the display of the\n   * component.\n   */\n  visible?: boolean;\n};\n\ntype State = {\n  /**\n   * An internal state variable used to determine whether or not to display the\n   * rental vehicles for this layer.\n   */\n  visible: boolean;\n};\n\n/**\n * This class is a necessary intermediary to handle events proxied from the\n * parent @opentripplanner/base-map component handlers to this component.\n * Without this interface, there would be no way to detect when a user would\n * hide this layer from view on the Leaflet map. The visible property influences\n * and sets the Leaflet Layer Control which then is handled by the\n * @opentripplanner/base-map component and then delivered to the\n * `onOverlayAdded` and `onOverlayRemoved` handlers which then finally set this\n * component's state which is then finally used by the vehicle rental overlay\n * to properly manage the requesting of vehicle rentals.\n */\nexport default class LeafletLayerControlInterface extends Component<\n  Props,\n  State\n> {\n  constructor(props: Props) {\n    super(props);\n    this.state = { visible: props.visible };\n  }\n\n  /**\n   * Upon mounting, this class calls the register overlay property that the\n   * @opentripplanner/base-map package has injected into the props.\n   */\n  componentDidMount() {\n    const { registerOverlay } = this.props;\n    registerOverlay(this);\n  }\n\n  /**\n   * A handler function for when this layer is toggled on by the user via the\n   * leaflet layer control.\n   */\n  onOverlayAdded = () => {\n    this.setState({ visible: true });\n  };\n\n  /**\n   * A handler function for when this layer is toggled off by the user via the\n   * leaflet layer control.\n   */\n  onOverlayRemoved = () => {\n    this.setState({ visible: false });\n  };\n\n  render() {\n    const { visible } = this.state;\n    return (\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      <VehicleRentalOverlay {...this.props} visible={visible} />\n    );\n  }\n}\n"],"file":"leaflet-layer-control-interface.js"}

package/lib/leaflet-layer-control-interface.js

@@ -1,85 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ = _interopRequireDefault(require("."));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-/**
- * This class is a necessary intermediary to handle events proxied from the
- * parent @opentripplanner/base-map component handlers to this component.
- * Without this interface, there would be no way to detect when a user would
- * hide this layer from view on the Leaflet map. The visible property influences
- * and sets the Leaflet Layer Control which then is handled by the
- * @opentripplanner/base-map component and then delivered to the
- * `onOverlayAdded` and `onOverlayRemoved` handlers which then finally set this
- * component's state which is then finally used by the vehicle rental overlay
- * to properly manage the requesting of vehicle rentals.
- */
-class LeafletLayerControlInterface extends _react.Component {
-  constructor(props) {
-    super(props);
-
-    this.onOverlayAdded = () => {
-      this.setState({
-        visible: true
-      });
-    };
-
-    this.onOverlayRemoved = () => {
-      this.setState({
-        visible: false
-      });
-    };
-
-    this.state = {
-      visible: props.visible
-    };
-  }
-  /**
-   * Upon mounting, this class calls the register overlay property that the
-   * @opentripplanner/base-map package has injected into the props.
-   */
-
-
-  componentDidMount() {
-    const {
-      registerOverlay
-    } = this.props;
-    registerOverlay(this);
-  }
-  /**
-   * A handler function for when this layer is toggled on by the user via the
-   * leaflet layer control.
-   */
-
-
-  render() {
-    const {
-      visible
-    } = this.state;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      _react.default.createElement(_.default, (0, _extends2.default)({}, this.props, {
-        visible: visible
-      }))
-    );
-  }
-
-}
-
-exports.default = LeafletLayerControlInterface;
-//# sourceMappingURL=leaflet-layer-control-interface.js.map

package/lib/leaflet-layer-control-interface.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/leaflet-layer-control-interface.tsx"],"names":["LeafletLayerControlInterface","Component","constructor","props","onOverlayAdded","setState","visible","onOverlayRemoved","state","componentDidMount","registerOverlay","render"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;;;;;AA0BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,MAAMA,4BAAN,SAA2CC,gBAA3C,CAGb;AACAC,EAAAA,WAAW,CAACC,KAAD,EAAe;AACxB,UAAMA,KAAN;;AADwB,SAkB1BC,cAlB0B,GAkBT,MAAM;AACrB,WAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KApByB;;AAAA,SA0B1BC,gBA1B0B,GA0BP,MAAM;AACvB,WAAKF,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KA5ByB;;AAExB,SAAKE,KAAL,GAAa;AAAEF,MAAAA,OAAO,EAAEH,KAAK,CAACG;AAAjB,KAAb;AACD;AAED;AACF;AACA;AACA;;;AACEG,EAAAA,iBAAiB,GAAG;AAClB,UAAM;AAAEC,MAAAA;AAAF,QAAsB,KAAKP,KAAjC;AACAO,IAAAA,eAAe,CAAC,IAAD,CAAf;AACD;AAED;AACF;AACA;AACA;;;AAaEC,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEL,MAAAA;AAAF,QAAc,KAAKE,KAAzB;AACA;AAAA;AACE;AACA,mCAAC,SAAD,6BAA0B,KAAKL,KAA/B;AAAsC,QAAA,OAAO,EAAEG;AAA/C;AAFF;AAID;;AArCD","sourcesContent":["import React, { Component } from \"react\";\n\nimport VehicleRentalOverlay from \".\";\n\ntype Props = {\n  /**\n   * This method is created by the @opentripplanner/base-map package when\n   * mounting user-defined layers. This will allow the component to subscribe to\n   * various leaflet events that then get forwarded on to this component.\n   */\n  registerOverlay: (component: Component) => void;\n  /**\n   * Whether or not to initially display the rental vehicles. Once the component\n   * is mounted the subscribed events of a user toggling on or off the layer via\n   * the layer control item will subsequently control the display of the\n   * component.\n   */\n  visible?: boolean;\n};\n\ntype State = {\n  /**\n   * An internal state variable used to determine whether or not to display the\n   * rental vehicles for this layer.\n   */\n  visible: boolean;\n};\n\n/**\n * This class is a necessary intermediary to handle events proxied from the\n * parent @opentripplanner/base-map component handlers to this component.\n * Without this interface, there would be no way to detect when a user would\n * hide this layer from view on the Leaflet map. The visible property influences\n * and sets the Leaflet Layer Control which then is handled by the\n * @opentripplanner/base-map component and then delivered to the\n * `onOverlayAdded` and `onOverlayRemoved` handlers which then finally set this\n * component's state which is then finally used by the vehicle rental overlay\n * to properly manage the requesting of vehicle rentals.\n */\nexport default class LeafletLayerControlInterface extends Component<\n  Props,\n  State\n> {\n  constructor(props: Props) {\n    super(props);\n    this.state = { visible: props.visible };\n  }\n\n  /**\n   * Upon mounting, this class calls the register overlay property that the\n   * @opentripplanner/base-map package has injected into the props.\n   */\n  componentDidMount() {\n    const { registerOverlay } = this.props;\n    registerOverlay(this);\n  }\n\n  /**\n   * A handler function for when this layer is toggled on by the user via the\n   * leaflet layer control.\n   */\n  onOverlayAdded = () => {\n    this.setState({ visible: true });\n  };\n\n  /**\n   * A handler function for when this layer is toggled off by the user via the\n   * leaflet layer control.\n   */\n  onOverlayRemoved = () => {\n    this.setState({ visible: false });\n  };\n\n  render() {\n    const { visible } = this.state;\n    return (\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      <VehicleRentalOverlay {...this.props} visible={visible} />\n    );\n  }\n}\n"],"file":"leaflet-layer-control-interface.js"}

package/src/leaflet-layer-control-interface.tsx

@@ -1,81 +0,0 @@
-import React, { Component } from "react";
-
-import VehicleRentalOverlay from ".";
-
-type Props = {
-  /**
-   * This method is created by the @opentripplanner/base-map package when
-   * mounting user-defined layers. This will allow the component to subscribe to
-   * various leaflet events that then get forwarded on to this component.
-   */
-  registerOverlay: (component: Component) => void;
-  /**
-   * Whether or not to initially display the rental vehicles. Once the component
-   * is mounted the subscribed events of a user toggling on or off the layer via
-   * the layer control item will subsequently control the display of the
-   * component.
-   */
-  visible?: boolean;
-};
-
-type State = {
-  /**
-   * An internal state variable used to determine whether or not to display the
-   * rental vehicles for this layer.
-   */
-  visible: boolean;
-};
-
-/**
- * This class is a necessary intermediary to handle events proxied from the
- * parent @opentripplanner/base-map component handlers to this component.
- * Without this interface, there would be no way to detect when a user would
- * hide this layer from view on the Leaflet map. The visible property influences
- * and sets the Leaflet Layer Control which then is handled by the
- * @opentripplanner/base-map component and then delivered to the
- * `onOverlayAdded` and `onOverlayRemoved` handlers which then finally set this
- * component's state which is then finally used by the vehicle rental overlay
- * to properly manage the requesting of vehicle rentals.
- */
-export default class LeafletLayerControlInterface extends Component<
-  Props,
-  State
-> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { visible: props.visible };
-  }
-
-  /**
-   * Upon mounting, this class calls the register overlay property that the
-   * @opentripplanner/base-map package has injected into the props.
-   */
-  componentDidMount() {
-    const { registerOverlay } = this.props;
-    registerOverlay(this);
-  }
-
-  /**
-   * A handler function for when this layer is toggled on by the user via the
-   * leaflet layer control.
-   */
-  onOverlayAdded = () => {
-    this.setState({ visible: true });
-  };
-
-  /**
-   * A handler function for when this layer is toggled off by the user via the
-   * leaflet layer control.
-   */
-  onOverlayRemoved = () => {
-    this.setState({ visible: false });
-  };
-
-  render() {
-    const { visible } = this.state;
-    return (
-      // eslint-disable-next-line react/jsx-props-no-spreading
-      <VehicleRentalOverlay {...this.props} visible={visible} />
-    );
-  }
-}