@opentripplanner/vehicle-rental-overlay 1.4.4 → 2.0.0-alpha.2

package/esm/StationPopup.js

@@ -0,0 +1,99 @@
+import { Styled as BaseMapStyled } from "@opentripplanner/base-map";
+import coreUtils from "@opentripplanner/core-utils";
+import FromToLocationPicker from "@opentripplanner/from-to-location-picker";
+import flatten from "flat";
+import { FormattedMessage, useIntl } from "react-intl";
+import React from "react"; // Load the default messages.
+// @ts-expect-error why is this failing?
+
+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);
+
+function makeDefaultGetStationName(intl) {
+  return function defaultGetStationName(configCompanies, station) {
+    var stationNetworks = coreUtils.itinerary.getCompaniesLabelFromNetworks((station === null || station === void 0 ? void 0 : station.networks) || [], configCompanies);
+    var stationName = station.name || station.id; // If the station name or id is a giant UUID (with more than 3 "-" characters)
+    // best not to show that at all and instead use the network name.
+
+    if ((stationName.match(/-/g) || []).length > 3) {
+      stationName = stationNetworks;
+    }
+
+    if (station.isFloatingBike) {
+      stationName = intl.formatMessage({
+        defaultMessage: defaultEnglishMessages["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: defaultEnglishMessages["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: defaultEnglishMessages["otpUi.VehicleRentalOverlay.floatingEScooter"],
+        description: "Popup title for a free-floating e-scooter",
+        id: "otpUi.VehicleRentalOverlay.floatingEScooter"
+      }, {
+        company: stationNetworks
+      });
+    }
+
+    return stationName;
+  };
+}
+
+/**
+ * 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.
+ */
+var StationPopup = function StationPopup(props) {
+  var intl = useIntl();
+  var configCompanies = props.configCompanies,
+      getStationName = props.getStationName,
+      setLocation = props.setLocation,
+      station = props.station;
+  var stationIsHub = station.bikesAvailable !== undefined && !station.isFloatingBike;
+  var getStationNameFunc = getStationName || makeDefaultGetStationName(intl);
+  var stationName = getStationNameFunc(configCompanies, station);
+  var location = {
+    lat: station.y,
+    lon: station.x,
+    name: stationName
+  };
+  return /*#__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
+  })));
+};
+
+export default StationPopup;
+//# sourceMappingURL=StationPopup.js.map

package/esm/StationPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/StationPopup.tsx"],"names":["Styled","BaseMapStyled","coreUtils","FromToLocationPicker","flatten","FormattedMessage","useIntl","React","defaultEnglishMessages","defaultMessages","makeDefaultGetStationName","intl","defaultGetStationName","configCompanies","station","stationNetworks","itinerary","getCompaniesLabelFromNetworks","networks","stationName","name","id","match","length","isFloatingBike","formatMessage","defaultMessage","description","isFloatingCar","company","isFloatingVehicle","StationPopup","props","getStationName","setLocation","stationIsHub","bikesAvailable","undefined","getStationNameFunc","location","lat","y","lon","x","value","spacesAvailable"],"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 {\n  Company,\n  ConfiguredCompany,\n  MapLocationActionArg,\n  Station\n} from \"@opentripplanner/types\";\nimport flatten from \"flat\";\nimport { FormattedMessage, IntlShape, useIntl } from \"react-intl\";\nimport React from \"react\";\n\n// Load the default messages.\n// @ts-expect-error why is this failing?\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: IntlShape) {\n  return function defaultGetStationName(\n    configCompanies: Company[],\n    station: Station\n  ) {\n    const stationNetworks = coreUtils.itinerary.getCompaniesLabelFromNetworks(\n      station?.networks || [],\n      configCompanies\n    );\n    let stationName = station.name || station.id;\n    // If the station name or id is a giant UUID (with more than 3 \"-\" characters)\n    // best not to show that at all and instead use the network name.\n    if ((stationName.match(/-/g) || []).length > 3) {\n      stationName = stationNetworks;\n    }\n\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\ntype Props = {\n  configCompanies: ConfiguredCompany[];\n  getStationName: (configCompanies: Company[], station: Station) => string;\n  setLocation: (arg: MapLocationActionArg) => void;\n  station: Station;\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 */\nconst StationPopup = (props: Props): JSX.Element => {\n  const intl = useIntl();\n  const { configCompanies, getStationName, setLocation, station } = props;\n  const stationIsHub =\n    station.bikesAvailable !== undefined && !station.isFloatingBike;\n  const getStationNameFunc = 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    <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  );\n};\n\nexport default StationPopup;\n"],"file":"StationPopup.js"}

package/esm/index.js

@@ -1,378 +1,170 @@
-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";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-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; } }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-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, injectIntl } from "react-intl";
-import { FeatureGroup, MapLayer, Popup, withLeaflet } from "react-leaflet";
-import { GenericMarker, HubAndFloatingBike, SharedBikeCircle } from "./DefaultMarkers"; // Load the default messages.
+import { MarkerWithPopup } from "@opentripplanner/base-map";
+import React, { useEffect, useState } from "react";
+import { Layer, Popup, Source, useMap } from "react-map-gl";
+import StationPopup from "./StationPopup";
+import { BaseBikeRentalIcon, StationMarker } from "./styled"; // TODO: Make configurable?
 
-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 DETAILED_MARKER_CUTOFF = 16;
 
-var defaultMessages = flatten(defaultEnglishMessages);
+var getColorForStation = function 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) {
-    var stationNetworks = coreUtils.itinerary.getCompaniesLabelFromNetworks(station.networks, configCompanies);
-    var stationName = station.name || station.id; // If the station name or id is a giant UUID (with more than 3 "-" characters)
-    // best not to show that at all and instead use the network name.
+  if (v.bikesAvailable !== undefined || v.isFloatingBike) return "#f00";
+  return "gray";
+};
 
-    if ((stationName.match(/-/g) || []).length > 3) {
-      stationName = stationNetworks;
-    }
+var checkIfPositionInViewport = function checkIfPositionInViewport(bounds, lat, lng) {
+  var 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: defaultEnglishMessages["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: defaultEnglishMessages["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: defaultEnglishMessages["otpUi.VehicleRentalOverlay.floatingEScooter"],
-        description: "Popup title for a free-floating e-scooter",
-        id: "otpUi.VehicleRentalOverlay.floatingEScooter"
-      }, {
-        company: stationNetworks
-      });
-    }
+  var _ref = [bounds._sw, bounds._ne],
+      sw = _ref[0],
+      ne = _ref[1];
+  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.
  */
-
-
-var VehicleRentalOverlay = /*#__PURE__*/function (_MapLayer) {
-  _inherits(VehicleRentalOverlay, _MapLayer);
-
-  var _super = _createSuper(VehicleRentalOverlay);
-
-  function VehicleRentalOverlay(props) {
-    var _this;
-
-    _classCallCheck(this, VehicleRentalOverlay);
-
-    _this = _super.call(this, props);
-
-    _this.renderSymbolWithPopup = function (_Symbol) {
-      var SymbolWrapper = function SymbolWrapper(_ref) {
-        var station = _ref.entity,
-            zoom = _ref.zoom;
-        return /*#__PURE__*/React.createElement(_Symbol, {
-          entity: station,
-          zoom: zoom
-        }, _this.renderPopupForStation(station, station.bikesAvailable !== undefined && !station.isFloatingBike));
-      };
-
-      SymbolWrapper.propTypes = {
-        // entity: coreUtils.types.stationType.isRequired,
-        zoom: PropTypes.number.isRequired
-      };
-      return SymbolWrapper;
-    };
-
-    _this.convertToZoomMarkerSymbols = function (mapSymbols) {
-      return mapSymbols.map(function (mapSymbol) {
-        // If mapSymbol uses zoomBasedSymbolType, use it as is.
-        if (mapSymbol.symbol) {
-          return mapSymbol;
-        } // Otherwise, convert into zoomBasedType (no support for symbols by type).
-
-
-        var symbol;
-
-        switch (mapSymbol.type) {
-          case "circle":
-            symbol = SharedBikeCircle(mapSymbol);
-            break;
-
-          case "hubAndFloatingBike":
-            symbol = HubAndFloatingBike;
-            break;
-
-          default:
-            symbol = GenericMarker(mapSymbol);
-        }
-
-        return {
-          minZoom: mapSymbol.minZoom,
-          symbol: symbol
-        };
-      });
-    };
-
-    _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,
-          configCompanies = _this$props.configCompanies,
-          getStationName = _this$props.getStationName,
-          intl = _this$props.intl,
-          setLocation = _this$props.setLocation;
-      var getStationNameFunc = getStationName || makeDefaultGetStationName(intl);
-      var stationName = getStationNameFunc(configCompanies, station);
-      var location = {
-        lat: station.y,
-        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, /*#__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",
-    value: function createLeafletElement() {}
-  }, {
-    key: "updateLeafletElement",
-    value: function updateLeafletElement() {}
-  }, {
-    key: "startRefreshing",
-    value: function startRefreshing() {
-      var refreshVehicles = this.props.refreshVehicles; // 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(function () {
-          refreshVehicles();
-        }, 30000); // defaults to every 30 sec. TODO: make this configurable?
-      }
-    }
-  }, {
-    key: "stopRefreshing",
-    value: function stopRefreshing() {
-      if (this.refreshTimer) clearInterval(this.refreshTimer);
+var VehicleRentalOverlay = function VehicleRentalOverlay(_ref2) {
+  var companies = _ref2.companies,
+      configCompanies = _ref2.configCompanies,
+      getStationName = _ref2.getStationName,
+      id = _ref2.id,
+      refreshVehicles = _ref2.refreshVehicles,
+      _setLocation = _ref2.setLocation,
+      stations = _ref2.stations,
+      visible = _ref2.visible;
+
+  var _useMap = useMap(),
+      map = _useMap.current;
+
+  var zoom = map === null || map === void 0 ? void 0 : map.getZoom();
+  var bounds = map === null || map === void 0 ? void 0 : map.getBounds();
+  var layerId = "rental-vehicles-".concat(id);
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      clickedVehicle = _useState2[0],
+      setClickedVehicle = _useState2[1];
+
+  useEffect(function () {
+    // TODO: Make 30s configurable?
+    if (!refreshVehicles || typeof refreshVehicles !== "function") {
+      return;
     }
-    /**
-     * When the layer is added (or toggled on, or its visibility becomes true),
-     * start refreshing vehicle positions.
-     */
 
-  }, {
-    key: "componentDidMount",
-    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()
+    refreshVehicles();
+    setInterval(refreshVehicles, 30000);
+  }, [refreshVehicles]);
+  useEffect(function () {
+    var VEHICLE_LAYERS = [layerId];
+    VEHICLE_LAYERS.forEach(function (stopLayer) {
+      map === null || map === void 0 ? void 0 : map.on("mouseenter", stopLayer, function () {
+        map.getCanvas().style.cursor = "pointer";
       });
-      if (visible) this.startRefreshing();
-
-      if (typeof registerOverlay === "function") {
-        registerOverlay(this);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      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
-     * applicable to other regions.
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      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.
-
-      var filteredStations = stations;
-
-      if (companies) {
-        filteredStations = stations.filter(function (station) {
-          return station.networks.filter(function (value) {
-            return companies.includes(value);
-          }).length > 0;
-        });
-      }
+      map === null || map === void 0 ? void 0 : map.on("mouseleave", stopLayer, function () {
+        map.getCanvas().style.cursor = "";
+      });
+      map === null || map === void 0 ? void 0 : map.on("click", stopLayer, function (event) {
+        var _event$features;
 
-      if (!filteredStations || filteredStations.length === 0) {
-        return /*#__PURE__*/React.createElement(FeatureGroup, null);
-      } // Convert map symbols for this overlay to zoomBasedSymbolType.
+        setClickedVehicle((_event$features = event.features) === null || _event$features === void 0 ? void 0 : _event$features[0].properties);
+      });
+    });
+  }, [map]); // Don't render if no map or no stops are defined.
 
+  if (visible === false || !stations || stations.length === 0) {
+    // Null can't be returned here -- react-map-gl dislikes null values as children
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
 
-      var symbols = this.convertToZoomMarkerSymbols(mapSymbols);
-      return /*#__PURE__*/React.createElement(FeatureGroup, null, /*#__PURE__*/React.createElement(ZoomBasedMarkers, {
-        entities: filteredStations,
-        symbols: symbols,
-        symbolTransform: this.renderSymbolWithPopup,
-        zoom: zoom
-      }));
+  var vehiclesGeoJSON = {
+    type: "FeatureCollection",
+    features: stations.filter(function (vehicle) {
+      return (// Include specified companies only if companies is specified and network info is available
+        !companies || !vehicle.networks || companies.includes(vehicle.networks[0])
+      );
+    }).map(function (vehicle) {
+      return {
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [vehicle.x, vehicle.y]
+        },
+        properties: _objectSpread(_objectSpread({}, vehicle), {}, {
+          networks: JSON.stringify(vehicle.networks),
+          "stroke-width": vehicle.isFloatingBike || vehicle.isFloatingVehicle ? 1 : 2,
+          color: getColorForStation(vehicle)
+        })
+      };
+    })
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, zoom < DETAILED_MARKER_CUTOFF && /*#__PURE__*/React.createElement(Source, {
+    type: "geojson",
+    data: vehiclesGeoJSON
+  }, /*#__PURE__*/React.createElement(Layer, {
+    id: layerId,
+    paint: {
+      "circle-color": ["get", "color"],
+      "circle-opacity": 0.9,
+      "circle-stroke-color": "#333",
+      "circle-stroke-width": ["get", "stroke-width"]
+    },
+    type: "circle"
+  })), zoom >= DETAILED_MARKER_CUTOFF && stations.filter(function (station) {
+    return checkIfPositionInViewport(bounds, station.y, station.x);
+  }).map(function (station) {
+    return /*#__PURE__*/React.createElement(MarkerWithPopup, {
+      key: station.id,
+      popupContents: /*#__PURE__*/React.createElement(StationPopup, {
+        configCompanies: configCompanies,
+        setLocation: function setLocation(location) {
+          setClickedVehicle(null);
+
+          _setLocation(location);
+        },
+        getStationName: getStationName,
+        station: station
+      }),
+      position: [station.y, station.x]
+    }, station.bikesAvailable !== undefined && !station.isFloatingBike && !station.isFloatingVehicle && station.spacesAvailable !== undefined ? /*#__PURE__*/React.createElement(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.createElement(StationMarker, {
+      width: 12,
+      color: getColorForStation(station)
+    }));
+  }), clickedVehicle && /*#__PURE__*/React.createElement(Popup, {
+    latitude: clickedVehicle.y,
+    longitude: clickedVehicle.x,
+    maxWidth: "100%",
+    onClose: function onClose() {
+      setClickedVehicle(null);
     }
-  }]);
-
-  return VehicleRentalOverlay;
-}(MapLayer);
-
-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.arrayOf(PropTypes.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.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.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.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.bool
-};
-VehicleRentalOverlay.defaultProps = {
-  getStationName: null,
-  mapSymbols: [{
-    zoom: 0,
-    symbol: GenericMarker
-  }],
-  refreshVehicles: null,
-  stations: [],
-  visible: false
+  }, /*#__PURE__*/React.createElement(StationPopup, {
+    configCompanies: configCompanies,
+    getStationName: getStationName,
+    setLocation: function setLocation(location) {
+      setClickedVehicle(null);
+
+      _setLocation(location);
+    },
+    station: _objectSpread(_objectSpread({}, clickedVehicle), {}, {
+      networks: JSON.parse(clickedVehicle.networks)
+    })
+  })));
 };
-export default withLeaflet(injectIntl(VehicleRentalOverlay));
+
+export default VehicleRentalOverlay;
 //# sourceMappingURL=index.js.map