@opentripplanner/vehicle-rental-overlay 1.4.2 → 2.0.0-alpha.1

package/lib/index.d.ts

@@ -0,0 +1,61 @@
+import { Company, Station, MapLocationActionArg, ConfiguredCompany } from "@opentripplanner/types";
+declare type Props = {
+    /**
+     * The entire companies config array.
+     */
+    configCompanies: ConfiguredCompany[];
+    /**
+     * A list of companies that are applicable to just this instance of the
+     * overlay.
+     */
+    companies?: string[];
+    /**
+     * An id, used to make this layer uniquely identifiable
+     */
+    id: string;
+    /**
+     * An optional custom function to create a string name of a particular vehicle
+     * rental station. This function takes two arguments of the configCompanies
+     * prop and a vehicle rental station. The function must return a string.
+     */
+    getStationName?: (configCompanies: Company[], station: Station) => string;
+    /**
+     * If specified, a function that will be triggered every 30 seconds whenever this layer is
+     * visible.
+     */
+    refreshVehicles?: () => void;
+    /**
+     * A callback for when a user clicks on setting this stop as either the from
+     * or to location of a new search.
+     *
+     * This will be dispatched with the following argument:
+     *
+     * ```js
+     *  {
+     *    location: {
+     *      lat: number,
+     *      lon: number,
+     *      name: string
+     *    },
+     *    locationType: "from" or "to"
+     *  }
+     * ```
+     */
+    setLocation?: (arg: MapLocationActionArg) => void;
+    /**
+     * A list of the vehicle rental stations specific to this overlay instance.
+     */
+    stations: Station[];
+    /**
+     * Whether the overlay is currently visible.
+     */
+    visible?: boolean;
+};
+/**
+ * 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.
+ */
+declare const VehicleRentalOverlay: (props: Props) => JSX.Element;
+export default VehicleRentalOverlay;
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,OAAO,EACP,OAAO,EACP,oBAAoB,EACpB,iBAAiB,EAClB,MAAM,wBAAwB,CAAC;AAmChC,aAAK,KAAK,GAAG;IACX;;OAEG;IACH,eAAe,EAAE,iBAAiB,EAAE,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,eAAe,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,OAAO,KAAK,MAAM,CAAC;IAC1E;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;;;;;;;;;;;;;;;OAgBG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAInB,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,oBAAoB,UAAW,KAAK,KAAG,WAqJ5C,CAAC;AACF,eAAe,oBAAoB,CAAC"}

package/lib/index.js

@@ -7,361 +7,158 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _flat = _interopRequireDefault(require("flat"));
+var _reactMapGl = require("react-map-gl");
 
-var _baseMap = require("@opentripplanner/base-map");
-
-var _coreUtils = _interopRequireDefault(require("@opentripplanner/core-utils"));
-
-var _fromToLocationPicker = _interopRequireDefault(require("@opentripplanner/from-to-location-picker"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _zoomBasedMarkers = _interopRequireDefault(require("@opentripplanner/zoom-based-markers"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _baseMap = require("@opentripplanner/base-map");
 
-var _react = _interopRequireDefault(require("react"));
+var _StationPopup = _interopRequireDefault(require("./StationPopup"));
 
-var _reactIntl = require("react-intl");
+var _styled = require("./styled");
 
-var _reactLeaflet = require("react-leaflet");
+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); }
 
-var _DefaultMarkers = require("./DefaultMarkers");
+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; }
 
-var _enUS = _interopRequireDefault(require("../i18n/en-US.yml"));
+// TODO: Make configurable?
+const DETAILED_MARKER_CUTOFF = 16;
 
-// 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);
+const getColorForStation = v => {
+  if (v.isFloatingCar) return "#009cde";
+  if (v.isFloatingVehicle) return "#f5a729"; // TODO: nicer color to match transitive
 
-function makeDefaultGetStationName(intl) {
-  return function defaultGetStationName(configCompanies, station) {
-    const stationNetworks = _coreUtils.default.itinerary.getCompaniesLabelFromNetworks(station.networks, configCompanies);
+  if (v.bikesAvailable !== undefined || v.isFloatingBike) return "#f00";
+  return "gray";
+};
 
-    let stationName = station.name || station.id;
+const checkIfPositionInViewport = (bounds, lat, lng) => {
+  const PADDING = 0.001; // @ts-expect-error types appear to be wrong? version issue?
+  // eslint-disable-next-line no-underscore-dangle
 
-    if (station.isFloatingBike) {
-      stationName = intl.formatMessage({
-        defaultMessage: _enUS.default["otpUi.VehicleRentalOverlay.floatingBike"],
-        description: "Popup title for a free-floating bike",
-        id: "otpUi.VehicleRentalOverlay.floatingBike"
-      }, {
-        name: stationName
-      });
-    } else if (station.isFloatingCar) {
-      stationName = intl.formatMessage({
-        defaultMessage: _enUS.default["otpUi.VehicleRentalOverlay.floatingCar"],
-        description: "Popup title for a free-floating car",
-        id: "otpUi.VehicleRentalOverlay.floatingCar"
-      }, {
-        company: stationNetworks,
-        name: stationName
-      });
-    } else if (station.isFloatingVehicle) {
-      // assumes that all floating vehicles are E-scooters
-      stationName = intl.formatMessage({
-        defaultMessage: _enUS.default["otpUi.VehicleRentalOverlay.floatingEScooter"],
-        description: "Popup title for a free-floating e-scooter",
-        id: "otpUi.VehicleRentalOverlay.floatingEScooter"
-      }, {
-        company: stationNetworks
-      });
-    }
+  const [sw, ne] = [bounds._sw, bounds._ne];
+  if (!sw || !ne) return false;
+  return lat >= sw.lat - PADDING && lat <= ne.lat + PADDING && lng >= sw.lng - PADDING && lng <= ne.lng + PADDING;
+};
 
-    return stationName;
-  };
-}
 /**
  * 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(props) {
-    super(props);
-
-    this.renderSymbolWithPopup = Symbol => {
-      const SymbolWrapper = ({
-        entity: station,
-        zoom
-      }) => /*#__PURE__*/_react.default.createElement(Symbol, {
-        entity: station,
-        zoom: zoom
-      }, this.renderPopupForStation(station, station.bikesAvailable !== undefined && !station.isFloatingBike));
-
-      SymbolWrapper.propTypes = {
-        // entity: coreUtils.types.stationType.isRequired,
-        zoom: _propTypes.default.number.isRequired
-      };
-      return SymbolWrapper;
-    };
-
-    this.convertToZoomMarkerSymbols = mapSymbols => mapSymbols.map(mapSymbol => {
-      // If mapSymbol uses zoomBasedSymbolType, use it as is.
-      if (mapSymbol.symbol) {
-        return mapSymbol;
-      } // Otherwise, convert into zoomBasedType (no support for symbols by type).
-
-
-      let symbol;
-
-      switch (mapSymbol.type) {
-        case "circle":
-          symbol = (0, _DefaultMarkers.SharedBikeCircle)(mapSymbol);
-          break;
-
-        case "hubAndFloatingBike":
-          symbol = _DefaultMarkers.HubAndFloatingBike;
-          break;
-
-        default:
-          symbol = (0, _DefaultMarkers.GenericMarker)(mapSymbol);
-      }
-
-      return {
-        minZoom: mapSymbol.minZoom,
-        symbol
-      };
-    });
-
-    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,
-        getStationName,
-        intl,
-        setLocation
-      } = this.props;
-      const getStationNameFunc = getStationName || makeDefaultGetStationName(intl);
-      const stationName = getStationNameFunc(configCompanies, station);
-      const location = {
-        lat: station.y,
-        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, /*#__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() {}
-
-  updateLeafletElement() {}
-
-  startRefreshing() {
-    const {
-      refreshVehicles
-    } = this.props; // Create the timer only if refreshVehicles is a valid function.
-
-    if (typeof refreshVehicles === "function") {
-      // initial station retrieval
-      refreshVehicles(); // set up timer to refresh stations periodically
-
-      this.refreshTimer = setInterval(() => {
-        refreshVehicles();
-      }, 30000); // defaults to every 30 sec. TODO: make this configurable?
+const VehicleRentalOverlay = props => {
+  const {
+    mainMap
+  } = (0, _reactMapGl.useMap)();
+  const zoom = mainMap === null || mainMap === void 0 ? void 0 : mainMap.getZoom();
+  const bounds = mainMap === null || mainMap === void 0 ? void 0 : mainMap.getBounds();
+  const {
+    configCompanies,
+    companies,
+    getStationName,
+    id,
+    refreshVehicles,
+    setLocation,
+    stations,
+    visible
+  } = props;
+  const layerId = `rental-vehicles-${id}`;
+  const [clickedVehicle, setClickedVehicle] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    // TODO: Make 30s configurable?
+    if (!refreshVehicles || typeof refreshVehicles !== "function") {
+      return;
     }
-  }
-
-  stopRefreshing() {
-    if (this.refreshTimer) clearInterval(this.refreshTimer);
-  }
-  /**
-   * When the layer is added (or toggled on, or its visibility becomes true),
-   * start refreshing vehicle positions.
-   */
 
+    refreshVehicles();
+    setInterval(refreshVehicles, 30_000);
+  }, [refreshVehicles]);
+  (0, _react.useEffect)(() => {
+    const VEHICLE_LAYERS = [layerId];
+    VEHICLE_LAYERS.forEach(stopLayer => {
+      mainMap === null || mainMap === void 0 ? void 0 : mainMap.on("mouseenter", stopLayer, () => {
+        mainMap.getCanvas().style.cursor = "pointer";
+      });
+      mainMap === null || mainMap === void 0 ? void 0 : mainMap.on("mouseleave", stopLayer, () => {
+        mainMap.getCanvas().style.cursor = "";
+      });
+      mainMap === null || mainMap === void 0 ? void 0 : mainMap.on("click", stopLayer, event => {
+        var _event$features;
 
-  /**
-   * 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()
+        setClickedVehicle((_event$features = event.features) === null || _event$features === void 0 ? void 0 : _event$features[0].properties);
+      });
     });
-    if (visible) this.startRefreshing();
-
-    if (typeof registerOverlay === "function") {
-      registerOverlay(this);
-    }
-  }
+  }, [mainMap]); // Don't render if no map or no stops are defined.
 
-  componentWillUnmount() {
-    this.stopRefreshing();
+  if (visible === false || !stations || stations.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
-  /**
-   * Render some popup html for a station. This contains custom logic for
-   * displaying rental vehicles in the TriMet MOD website that might not be
-   * applicable to other regions.
-   */
 
-
-  render() {
-    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.
-
-    let filteredStations = stations;
-
-    if (companies) {
-      filteredStations = stations.filter(station => station.networks.filter(value => companies.includes(value)).length > 0);
+  const vehiclesGeoJSON = {
+    type: "FeatureCollection",
+    features: stations.filter(vehicle => // Include specified companies only if companies is specified and network info is available
+    !companies || !vehicle.networks || companies.includes(vehicle.networks[0])).map(vehicle => ({
+      type: "Feature",
+      properties: { ...vehicle,
+        networks: JSON.stringify(vehicle.networks),
+        "stroke-width": vehicle.isFloatingBike || vehicle.isFloatingVehicle ? 1 : 2,
+        color: getColorForStation(vehicle)
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [vehicle.x, vehicle.y]
+      }
+    }))
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, zoom < DETAILED_MARKER_CUTOFF && /*#__PURE__*/_react.default.createElement(_reactMapGl.Source, {
+    type: "geojson",
+    data: vehiclesGeoJSON
+  }, /*#__PURE__*/_react.default.createElement(_reactMapGl.Layer, {
+    id: layerId,
+    type: "circle",
+    paint: {
+      "circle-color": ["get", "color"],
+      "circle-opacity": 0.9,
+      "circle-stroke-width": ["get", "stroke-width"],
+      "circle-stroke-color": "#333"
     }
-
-    if (!filteredStations || filteredStations.length === 0) {
-      return /*#__PURE__*/_react.default.createElement(_reactLeaflet.FeatureGroup, null);
-    } // 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, {
-      entities: filteredStations,
-      symbols: symbols,
-      symbolTransform: this.renderSymbolWithPopup,
-      zoom: zoom
-    }));
-  }
-
-}
-
-VehicleRentalOverlay.props = {
-  /**
-   * The entire companies config array.
-   */
-  // configCompanies: PropTypes.arrayOf(coreUtils.types.companyType.isRequired)
-  //   .isRequired,
-
-  /**
-   * A list of companies that are applicable to just this instance of the
-   * overlay.
-   */
-  companies: _propTypes.default.arrayOf(_propTypes.default.string.isRequired),
-
-  /**
-   * An optional custom function to create a string name of a particular vehicle
-   * rental station. This function takes two arguments of the configCompanies
-   * prop and a vehicle rental station. The function must return a string.
-   */
-  getStationName: _propTypes.default.func,
-
-  /**
-   * A configuration of what map markers or symbols to show at various
-   * zoom levels.
-   */
-  // mapSymbols: coreUtils.types.vehicleRentalMapOverlaySymbolsType,
-
-  /**
-   * If specified, a function that will be triggered every 30 seconds whenever this layer is
-   * visible.
-   */
-  refreshVehicles: _propTypes.default.func,
-
-  /**
-   * A callback for when a user clicks on setting this stop as either the from
-   * or to location of a new search.
-   *
-   * This will be dispatched with the following argument:
-   *
-   * ```js
-   *  {
-   *    location: {
-   *      lat: number,
-   *      lon: number,
-   *      name: string
-   *    },
-   *    locationType: "from" or "to"
-   *  }
-   * ```
-   */
-  setLocation: _propTypes.default.func.isRequired,
-
-  /**
-   * A list of the vehicle rental stations specific to this overlay instance.
-   */
-  // stations: PropTypes.arrayOf(coreUtils.types.stationType),
-
-  /**
-   * Whether the overlay is currently visible.
-   */
-  visible: _propTypes.default.bool
-};
-VehicleRentalOverlay.defaultProps = {
-  getStationName: null,
-  mapSymbols: [{
-    zoom: 0,
-    symbol: _DefaultMarkers.GenericMarker
-  }],
-  refreshVehicles: null,
-  stations: [],
-  visible: false
+  })), zoom >= DETAILED_MARKER_CUTOFF && stations.filter(station => checkIfPositionInViewport(bounds, station.y, station.x)).map(station => /*#__PURE__*/_react.default.createElement(_baseMap.MarkerWithPopup, {
+    key: station.id,
+    position: [station.y, station.x],
+    popupContents: /*#__PURE__*/_react.default.createElement(_StationPopup.default, {
+      configCompanies: configCompanies,
+      setLocation: location => {
+        setClickedVehicle(null);
+        setLocation(location);
+      },
+      getStationName: getStationName,
+      station: station
+    })
+  }, station.bikesAvailable !== undefined && !station.isFloatingBike && !station.isFloatingVehicle && station.spacesAvailable !== undefined ? /*#__PURE__*/_react.default.createElement(_styled.BaseBikeRentalIcon, {
+    percent: (station === null || station === void 0 ? void 0 : station.bikesAvailable) / ((station === null || station === void 0 ? void 0 : station.bikesAvailable) + (station === null || station === void 0 ? void 0 : station.spacesAvailable))
+  }) : /*#__PURE__*/_react.default.createElement(_styled.StationMarker, {
+    width: 12,
+    color: getColorForStation(station)
+  }))), clickedVehicle && /*#__PURE__*/_react.default.createElement(_reactMapGl.Popup, {
+    onClose: () => {
+      setClickedVehicle(null);
+    },
+    longitude: clickedVehicle.x,
+    latitude: clickedVehicle.y,
+    maxWidth: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_StationPopup.default, {
+    configCompanies: configCompanies,
+    setLocation: location => {
+      setClickedVehicle(null);
+      setLocation(location);
+    },
+    getStationName: getStationName,
+    station: { ...clickedVehicle,
+      networks: JSON.parse(clickedVehicle.networks)
+    }
+  })));
 };
 
-var _default = (0, _reactLeaflet.withLeaflet)((0, _reactIntl.injectIntl)(VehicleRentalOverlay));
-
+var _default = VehicleRentalOverlay;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["defaultMessages","defaultEnglishMessages","makeDefaultGetStationName","intl","defaultGetStationName","configCompanies","station","stationNetworks","coreUtils","itinerary","getCompaniesLabelFromNetworks","networks","stationName","name","id","isFloatingBike","formatMessage","defaultMessage","description","isFloatingCar","company","isFloatingVehicle","VehicleRentalOverlay","MapLayer","constructor","props","renderSymbolWithPopup","Symbol","SymbolWrapper","entity","zoom","renderPopupForStation","bikesAvailable","undefined","propTypes","PropTypes","number","isRequired","convertToZoomMarkerSymbols","mapSymbols","map","mapSymbol","symbol","type","HubAndFloatingBike","minZoom","onOverlayAdded","startRefreshing","onOverlayRemoved","stopRefreshing","onViewportChanged","viewport","newZoom","state","setState","stationIsHub","getStationName","setLocation","getStationNameFunc","location","lat","y","lon","x","value","spacesAvailable","createLeafletElement","updateLeafletElement","refreshVehicles","refreshTimer","setInterval","clearInterval","componentDidMount","leaflet","registerOverlay","visible","getZoom","componentWillUnmount","render","companies","stations","filteredStations","filter","includes","length","symbols","arrayOf","string","func","bool","defaultProps","GenericMarker"],"mappings":"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","sourcesContent":["import flatten from \"flat\";\nimport { Styled as BaseMapStyled } from \"@opentripplanner/base-map\";\nimport coreUtils from \"@opentripplanner/core-utils\";\nimport FromToLocationPicker from \"@opentripplanner/from-to-location-picker\";\nimport ZoomBasedMarkers from \"@opentripplanner/zoom-based-markers\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport { FormattedMessage, injectIntl } 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\nfunction makeDefaultGetStationName(intl) {\n  return function defaultGetStationName(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 = intl.formatMessage(\n        {\n          defaultMessage:\n            defaultEnglishMessages[\"otpUi.VehicleRentalOverlay.floatingBike\"],\n          description: \"Popup title for a free-floating bike\",\n          id: \"otpUi.VehicleRentalOverlay.floatingBike\"\n        },\n        { name: stationName }\n      );\n    } else if (station.isFloatingCar) {\n      stationName = intl.formatMessage(\n        {\n          defaultMessage:\n            defaultEnglishMessages[\"otpUi.VehicleRentalOverlay.floatingCar\"],\n          description: \"Popup title for a free-floating car\",\n          id: \"otpUi.VehicleRentalOverlay.floatingCar\"\n        },\n        {\n          company: stationNetworks,\n          name: stationName\n        }\n      );\n    } else if (station.isFloatingVehicle) {\n      // assumes that all floating vehicles are E-scooters\n      stationName = intl.formatMessage(\n        {\n          defaultMessage:\n            defaultEnglishMessages[\n              \"otpUi.VehicleRentalOverlay.floatingEScooter\"\n            ],\n          description: \"Popup title for a free-floating e-scooter\",\n          id: \"otpUi.VehicleRentalOverlay.floatingEScooter\"\n        },\n        { company: stationNetworks }\n      );\n    }\n    return stationName;\n  };\n}\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, intl, setLocation } = this.props;\n    const getStationNameFunc =\n      getStationName || makeDefaultGetStationName(intl);\n    const stationName = getStationNameFunc(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: null,\n  mapSymbols: [\n    {\n      zoom: 0,\n      symbol: GenericMarker\n    }\n  ],\n  refreshVehicles: null,\n  stations: [],\n  visible: false\n};\n\nexport default withLeaflet(injectIntl(VehicleRentalOverlay));\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.tsx"],"names":["DETAILED_MARKER_CUTOFF","getColorForStation","v","isFloatingCar","isFloatingVehicle","bikesAvailable","undefined","isFloatingBike","checkIfPositionInViewport","bounds","lat","lng","PADDING","sw","ne","_sw","_ne","VehicleRentalOverlay","props","mainMap","zoom","getZoom","getBounds","configCompanies","companies","getStationName","id","refreshVehicles","setLocation","stations","visible","layerId","clickedVehicle","setClickedVehicle","setInterval","VEHICLE_LAYERS","forEach","stopLayer","on","getCanvas","style","cursor","event","features","properties","length","vehiclesGeoJSON","type","filter","vehicle","networks","includes","map","JSON","stringify","color","geometry","coordinates","x","y","station","location","spacesAvailable","parse"],"mappings":"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","sourcesContent":["import { Source, Layer, useMap, Popup } from \"react-map-gl\";\nimport { EventData } from \"mapbox-gl\";\nimport React, { useEffect, useState } from \"react\";\nimport {\n  Company,\n  Station,\n  MapLocationActionArg,\n  ConfiguredCompany\n} from \"@opentripplanner/types\";\nimport { MarkerWithPopup } from \"@opentripplanner/base-map\";\nimport StationPopup from \"./StationPopup\";\nimport { BaseBikeRentalIcon, StationMarker } from \"./styled\";\n\n// TODO: Make configurable?\nconst DETAILED_MARKER_CUTOFF = 16;\n\nconst getColorForStation = (v: Station) => {\n  if (v.isFloatingCar) return \"#009cde\";\n  if (v.isFloatingVehicle) return \"#f5a729\";\n  // TODO: nicer color to match transitive\n  if (v.bikesAvailable !== undefined || v.isFloatingBike) return \"#f00\";\n  return \"gray\";\n};\n\nconst checkIfPositionInViewport = (\n  bounds: mapboxgl.LngLatBounds,\n  lat: number,\n  lng: number\n): boolean => {\n  const PADDING = 0.001;\n  // @ts-expect-error types appear to be wrong? version issue?\n  // eslint-disable-next-line no-underscore-dangle\n  const [sw, ne] = [bounds._sw, bounds._ne];\n  if (!sw || !ne) return false;\n\n  return (\n    lat >= sw.lat - PADDING &&\n    lat <= ne.lat + PADDING &&\n    lng >= sw.lng - PADDING &&\n    lng <= ne.lng + PADDING\n  );\n};\n\ntype Props = {\n  /**\n   * The entire companies config array.\n   */\n  configCompanies: ConfiguredCompany[];\n  /**\n   * A list of companies that are applicable to just this instance of the\n   * overlay.\n   */\n  companies?: string[];\n  /**\n   * An id, used to make this layer uniquely identifiable\n   */\n  id: string;\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?: (configCompanies: Company[], station: Station) => string;\n  /**\n   * If specified, a function that will be triggered every 30 seconds whenever this layer is\n   * visible.\n   */\n  refreshVehicles?: () => void;\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?: (arg: MapLocationActionArg) => void;\n  /**\n   * A list of the vehicle rental stations specific to this overlay instance.\n   */\n  stations: Station[];\n  /**\n   * Whether the overlay is currently visible.\n   */\n  visible?: boolean;\n  /**\n   * TODO: Add props for overriding symbols?\n   */\n};\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 */\nconst VehicleRentalOverlay = (props: Props): JSX.Element => {\n  const { mainMap } = useMap();\n  const zoom = mainMap?.getZoom();\n  const bounds = mainMap?.getBounds();\n\n  const {\n    configCompanies,\n    companies,\n    getStationName,\n    id,\n    refreshVehicles,\n    setLocation,\n    stations,\n    visible\n  } = props;\n  const layerId = `rental-vehicles-${id}`;\n  const [clickedVehicle, setClickedVehicle] = useState(null);\n\n  useEffect(() => {\n    // TODO: Make 30s configurable?\n    if (!refreshVehicles || typeof refreshVehicles !== \"function\") {\n      return;\n    }\n\n    refreshVehicles();\n    setInterval(refreshVehicles, 30_000);\n  }, [refreshVehicles]);\n\n  useEffect(() => {\n    const VEHICLE_LAYERS = [layerId];\n    VEHICLE_LAYERS.forEach(stopLayer => {\n      mainMap?.on(\"mouseenter\", stopLayer, () => {\n        mainMap.getCanvas().style.cursor = \"pointer\";\n      });\n      mainMap?.on(\"mouseleave\", stopLayer, () => {\n        mainMap.getCanvas().style.cursor = \"\";\n      });\n      mainMap?.on(\"click\", stopLayer, (event: EventData) => {\n        setClickedVehicle(event.features?.[0].properties);\n      });\n    });\n  }, [mainMap]);\n\n  // Don't render if no map or no stops are defined.\n  if (visible === false || !stations || stations.length === 0) {\n    return <></>;\n  }\n\n  const vehiclesGeoJSON: GeoJSON.FeatureCollection = {\n    type: \"FeatureCollection\",\n    features: stations\n      .filter(\n        vehicle =>\n          // Include specified companies only if companies is specified and network info is available\n          !companies ||\n          !vehicle.networks ||\n          companies.includes(vehicle.networks[0])\n      )\n      .map(vehicle => ({\n        type: \"Feature\",\n        properties: {\n          ...vehicle,\n          networks: JSON.stringify(vehicle.networks),\n          \"stroke-width\":\n            vehicle.isFloatingBike || vehicle.isFloatingVehicle ? 1 : 2,\n          color: getColorForStation(vehicle)\n        },\n        geometry: { type: \"Point\", coordinates: [vehicle.x, vehicle.y] }\n      }))\n  };\n\n  return (\n    <>\n      {zoom < DETAILED_MARKER_CUTOFF && (\n        <Source type=\"geojson\" data={vehiclesGeoJSON}>\n          <Layer\n            id={layerId}\n            type=\"circle\"\n            paint={{\n              \"circle-color\": [\"get\", \"color\"],\n              \"circle-opacity\": 0.9,\n              \"circle-stroke-width\": [\"get\", \"stroke-width\"],\n              \"circle-stroke-color\": \"#333\"\n            }}\n          />\n          {/* this is where we add the symbols layer. add a second layer that gets swapped in and out dynamically */}\n        </Source>\n      )}\n      {zoom >= DETAILED_MARKER_CUTOFF &&\n        stations\n          .filter(station =>\n            checkIfPositionInViewport(bounds, station.y, station.x)\n          )\n          .map(station => (\n            <MarkerWithPopup\n              key={station.id}\n              position={[station.y, station.x]}\n              popupContents={\n                <StationPopup\n                  configCompanies={configCompanies}\n                  setLocation={location => {\n                    setClickedVehicle(null);\n                    setLocation(location);\n                  }}\n                  getStationName={getStationName}\n                  station={station}\n                />\n              }\n            >\n              {station.bikesAvailable !== undefined &&\n              !station.isFloatingBike &&\n              !station.isFloatingVehicle &&\n              station.spacesAvailable !== undefined ? (\n                <BaseBikeRentalIcon\n                  percent={\n                    station?.bikesAvailable /\n                    (station?.bikesAvailable + station?.spacesAvailable)\n                  }\n                />\n              ) : (\n                <StationMarker width={12} color={getColorForStation(station)} />\n              )}\n            </MarkerWithPopup>\n          ))}\n      {clickedVehicle && (\n        <Popup\n          onClose={() => {\n            setClickedVehicle(null);\n          }}\n          longitude={clickedVehicle.x}\n          latitude={clickedVehicle.y}\n          maxWidth=\"100%\"\n        >\n          <StationPopup\n            configCompanies={configCompanies}\n            setLocation={location => {\n              setClickedVehicle(null);\n              setLocation(location);\n            }}\n            getStationName={getStationName}\n            station={{\n              ...clickedVehicle,\n              networks: JSON.parse(clickedVehicle.networks)\n            }}\n          />\n        </Popup>\n      )}\n    </>\n  );\n};\nexport default VehicleRentalOverlay;\n"],"file":"index.js"}

package/lib/styled.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Bike rental icons are different from other vehicle rental types since they
+ * typically have stations in addition to free-floating bikes. The stations are
+ * drawn as svgs marking how full the stations are while the floating bikes have
+ * their own unique icon.
+ */
+export declare const BaseBikeRentalIcon: import("styled-components").StyledComponent<"div", any, {
+    percent: number;
+}, never>;
+export declare const StationMarker: import("styled-components").StyledComponent<import("@styled-icons/styled-icon").StyledIcon, any, {}, never>;
+//# sourceMappingURL=styled.d.ts.map

package/lib/styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AA+BA;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;aAAyB,MAAM;SAQ7D,CAAC;AAEF,eAAO,MAAM,aAAa,6GAIzB,CAAC"}