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

package/src/VehicleRentalOverlay.story.tsx

@@ -0,0 +1,124 @@
+import BaseMap from "@opentripplanner/base-map";
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { boolean } from "@storybook/addon-knobs";
+
+import { Company, Station } from "@opentripplanner/types";
+import VehicleRentalOverlay from ".";
+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";
+
+const center: [number, number] = [45.518092, -122.671202];
+const configCompanies = [
+  {
+    id: "BIKETOWN",
+    label: "Biketown",
+    modes: "BICYCLE_RENT"
+  },
+  {
+    id: "CAR2GO",
+    label: "car2go",
+    modes: "CAR_RENT"
+  },
+  {
+    id: "RAZOR",
+    label: "Razor",
+    modes: "MICROMOBILITY_RENT"
+  },
+  {
+    id: "SHARED",
+    label: "Shared",
+    modes: "MICROMOBILITY_RENT"
+  }
+];
+const setLocation = action("setLocation");
+
+const INITIAL_ZOOM = 13;
+
+type StoryProps = {
+  companies: string[];
+  getStationName?: (configCompanies: Company[], station: Station) => string;
+  refreshVehicles: () => void;
+  stations: Station[];
+  visible?: boolean;
+};
+
+const ZoomControlledMapWithVehicleRentalOverlay = ({
+  companies,
+  getStationName,
+  refreshVehicles,
+  stations,
+  visible
+}: StoryProps) => (
+  // Caution, <BaseMap> must be a direct parent of <VehicleRentalOverlay>.
+  // Therefore, do not place <BaseMap> in a decorator at this time.
+  <BaseMap center={center} forceMaxHeight zoom={INITIAL_ZOOM}>
+    <VehicleRentalOverlay
+      configCompanies={configCompanies}
+      companies={companies}
+      getStationName={getStationName}
+      setLocation={setLocation}
+      refreshVehicles={refreshVehicles}
+      stations={stations}
+      visible={visible}
+    />
+  </BaseMap>
+);
+
+function customStationName(_, station) {
+  return `🛴 (ID: ${station.id})`;
+}
+
+export default {
+  title: "VehicleRentalOverlay",
+  component: VehicleRentalOverlay
+};
+
+export const RentalBicycles = () => (
+  <ZoomControlledMapWithVehicleRentalOverlay
+    companies={["BIKETOWN"]}
+    refreshVehicles={action("refresh bicycles")}
+    stations={bikeRentalStations}
+  />
+);
+
+export const RentalBicyclesVisibilityControlledByKnob = () => {
+  const isOverlayVisible = boolean(
+    "Toggle visibility of vehicle rental overlay",
+    false
+  );
+  return (
+    <ZoomControlledMapWithVehicleRentalOverlay
+      companies={["BIKETOWN"]}
+      refreshVehicles={action("refresh bicycles")}
+      stations={bikeRentalStations}
+      visible={isOverlayVisible}
+    />
+  );
+};
+
+export const RentalCars = () => (
+  <ZoomControlledMapWithVehicleRentalOverlay
+    companies={["CAR2GO"]}
+    refreshVehicles={action("refresh cars")}
+    stations={carRentalStations}
+  />
+);
+
+export const RentalEScooters = () => (
+  <ZoomControlledMapWithVehicleRentalOverlay
+    companies={["SHARED"]}
+    refreshVehicles={action("refresh E-scooters")}
+    stations={eScooterStations}
+  />
+);
+
+export const RentalEScootersWithCustomNaming = () => (
+  <ZoomControlledMapWithVehicleRentalOverlay
+    companies={["SHARED"]}
+    getStationName={customStationName}
+    refreshVehicles={action("refresh E-scooters")}
+    stations={eScooterStations}
+  />
+);

package/src/index.tsx

@@ -0,0 +1,255 @@
+import { Source, Layer, useMap, Popup } from "react-map-gl";
+import { EventData } from "mapbox-gl";
+import React, { useEffect, useState } from "react";
+import {
+  Company,
+  Station,
+  MapLocationActionArg,
+  ConfiguredCompany
+} from "@opentripplanner/types";
+import { MarkerWithPopup } from "@opentripplanner/base-map";
+import StationPopup from "./StationPopup";
+import { BaseBikeRentalIcon, StationMarker } from "./styled";
+
+// TODO: Make configurable?
+const DETAILED_MARKER_CUTOFF = 16;
+
+const getColorForStation = (v: Station) => {
+  if (v.isFloatingCar) return "#009cde";
+  if (v.isFloatingVehicle) return "#f5a729";
+  // TODO: nicer color to match transitive
+  if (v.bikesAvailable !== undefined || v.isFloatingBike) return "#f00";
+  return "gray";
+};
+
+const checkIfPositionInViewport = (
+  bounds: mapboxgl.LngLatBounds,
+  lat: number,
+  lng: number
+): boolean => {
+  const PADDING = 0.001;
+  // @ts-expect-error types appear to be wrong? version issue?
+  // eslint-disable-next-line no-underscore-dangle
+  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
+  );
+};
+
+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;
+  /**
+   * TODO: Add props for overriding symbols?
+   */
+};
+
+/**
+ * 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.
+ */
+const VehicleRentalOverlay = (props: Props): JSX.Element => {
+  const { mainMap } = useMap();
+  const zoom = mainMap?.getZoom();
+  const bounds = mainMap?.getBounds();
+
+  const {
+    configCompanies,
+    companies,
+    getStationName,
+    id,
+    refreshVehicles,
+    setLocation,
+    stations,
+    visible
+  } = props;
+  const layerId = `rental-vehicles-${id}`;
+  const [clickedVehicle, setClickedVehicle] = useState(null);
+
+  useEffect(() => {
+    // TODO: Make 30s configurable?
+    if (!refreshVehicles || typeof refreshVehicles !== "function") {
+      return;
+    }
+
+    refreshVehicles();
+    setInterval(refreshVehicles, 30_000);
+  }, [refreshVehicles]);
+
+  useEffect(() => {
+    const VEHICLE_LAYERS = [layerId];
+    VEHICLE_LAYERS.forEach(stopLayer => {
+      mainMap?.on("mouseenter", stopLayer, () => {
+        mainMap.getCanvas().style.cursor = "pointer";
+      });
+      mainMap?.on("mouseleave", stopLayer, () => {
+        mainMap.getCanvas().style.cursor = "";
+      });
+      mainMap?.on("click", stopLayer, (event: EventData) => {
+        setClickedVehicle(event.features?.[0].properties);
+      });
+    });
+  }, [mainMap]);
+
+  // Don't render if no map or no stops are defined.
+  if (visible === false || !stations || stations.length === 0) {
+    return <></>;
+  }
+
+  const vehiclesGeoJSON: GeoJSON.FeatureCollection = {
+    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 (
+    <>
+      {zoom < DETAILED_MARKER_CUTOFF && (
+        <Source type="geojson" data={vehiclesGeoJSON}>
+          <Layer
+            id={layerId}
+            type="circle"
+            paint={{
+              "circle-color": ["get", "color"],
+              "circle-opacity": 0.9,
+              "circle-stroke-width": ["get", "stroke-width"],
+              "circle-stroke-color": "#333"
+            }}
+          />
+          {/* this is where we add the symbols layer. add a second layer that gets swapped in and out dynamically */}
+        </Source>
+      )}
+      {zoom >= DETAILED_MARKER_CUTOFF &&
+        stations
+          .filter(station =>
+            checkIfPositionInViewport(bounds, station.y, station.x)
+          )
+          .map(station => (
+            <MarkerWithPopup
+              key={station.id}
+              position={[station.y, station.x]}
+              popupContents={
+                <StationPopup
+                  configCompanies={configCompanies}
+                  setLocation={location => {
+                    setClickedVehicle(null);
+                    setLocation(location);
+                  }}
+                  getStationName={getStationName}
+                  station={station}
+                />
+              }
+            >
+              {station.bikesAvailable !== undefined &&
+              !station.isFloatingBike &&
+              !station.isFloatingVehicle &&
+              station.spacesAvailable !== undefined ? (
+                <BaseBikeRentalIcon
+                  percent={
+                    station?.bikesAvailable /
+                    (station?.bikesAvailable + station?.spacesAvailable)
+                  }
+                />
+              ) : (
+                <StationMarker width={12} color={getColorForStation(station)} />
+              )}
+            </MarkerWithPopup>
+          ))}
+      {clickedVehicle && (
+        <Popup
+          onClose={() => {
+            setClickedVehicle(null);
+          }}
+          longitude={clickedVehicle.x}
+          latitude={clickedVehicle.y}
+          maxWidth="100%"
+        >
+          <StationPopup
+            configCompanies={configCompanies}
+            setLocation={location => {
+              setClickedVehicle(null);
+              setLocation(location);
+            }}
+            getStationName={getStationName}
+            station={{
+              ...clickedVehicle,
+              networks: JSON.parse(clickedVehicle.networks)
+            }}
+          />
+        </Popup>
+      )}
+    </>
+  );
+};
+export default VehicleRentalOverlay;

package/src/styled.ts

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+import { MapMarkerAlt } from "@styled-icons/fa-solid/MapMarkerAlt";
+
+const getPctIcon = (percent: number) => {
+  switch (Math.floor(percent * 10)) {
+    case 0:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+");';
+    case 1:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==");';
+    case 2:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMjwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+")';
+    case 3:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMzwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==");';
+    case 4:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI3LjExIDIxLjcxIDM2LjY4IDM4LjQ1IDM5LjA0IDM1LjE1IDI3LjI5IDQuMTggNy4xMSAyMS43MSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==");';
+    case 5:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjU0LjU1IDQuNjkgNDIuODYgMzYuNTkgMzguOTIgMzUuNiAyNy44MyA0LjM5IDU0LjU1IDQuNjkiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNDEuMSA4MC4wNyA0MS4xNSA0Ni4wOSAzNy4xMSA0NS42NSAxNS45MiA3MS4xMSA0MS4xIDgwLjA3Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjE1Ljk2IDcwLjc4IDM3LjkxIDQ0Ljg1IDM1LjExIDQxLjkxIDIuNDkgNDcuNjkgMTUuOTYgNzAuNzgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMi45MiA0OC4wNyAzNi4zOCA0Mi4xNyAzNi4xIDM4LjEyIDcuMzMgMjEuNyAyLjkyIDQ4LjA3Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjcuMTEgMjEuNzEgMzYuNjggMzguNDUgMzkuMDQgMzUuMTUgMjcuMjkgNC4xOCA3LjExIDIxLjcxIi8+PHBhdGggY2xhc3M9ImNscy0zIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+");';
+    case 6:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNjwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=");';
+    case 7:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItNzwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc5LjQzIDQ4LjI4IDQ1Ljk3IDQyLjM4IDQ2LjI1IDM4LjMzIDc1LjAyIDIxLjkyIDc5LjQzIDQ4LjI4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=");';
+    case 8:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItODwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjY2LjM5IDcxIDQ0LjQ0IDQ1LjA2IDQ3LjI0IDQyLjEzIDc5Ljg2IDQ3LjkxIDY2LjM5IDcxIi8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc5LjQzIDQ4LjI4IDQ1Ljk3IDQyLjM4IDQ2LjI1IDM4LjMzIDc1LjAyIDIxLjkyIDc5LjQzIDQ4LjI4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9Ijc1LjI0IDIxLjkyIDQ1LjY3IDM4LjY2IDQzLjMxIDM1LjM2IDU1LjA2IDQuMzkgNzUuMjQgMjEuOTIiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNTQuNTUgNC42OSA0Mi44NiAzNi41OSAzOC45MiAzNS42IDI3LjgzIDQuMzkgNTQuNTUgNC42OSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0MS4xIDgwLjA3IDQxLjE1IDQ2LjA5IDM3LjExIDQ1LjY1IDE1LjkyIDcxLjExIDQxLjEgODAuMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMTUuOTYgNzAuNzggMzcuOTEgNDQuODUgMzUuMTEgNDEuOTEgMi40OSA0Ny42OSAxNS45NiA3MC43OCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIyLjkyIDQ4LjA3IDM2LjM4IDQyLjE3IDM2LjEgMzguMTIgNy4zMyAyMS43IDIuOTIgNDguMDciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNy4xMSAyMS43MSAzNi42OCAzOC40NSAzOS4wNCAzNS4xNSAyNy4yOSA0LjE4IDcuMTEgMjEuNzEiLz48cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04My40LDQzQTQxLjI1LDQxLjI1LDAsMSwwLDI5LjUsODIuM0w0My40LDk2LjUsNTUuMyw4Mi4xQTQxLjI5LDQxLjI5LDAsMCwwLDgzLjQsNDNaTTY1LjcsNzAuNkw0Ni41LDQ3LjdhNiw2LDAsMCwwLDEuOC0zLjJsMjkuNCw1LjJBMzYuMzMsMzYuMzMsMCwwLDEsNjUuNyw3MC42Wk02LjUsNDkuN2wyOS40LTUuMmE2LjgzLDYuODMsMCwwLDAsMS44LDMuMkwxOC41LDcwLjZBMzYuMzMsMzYuMzMsMCwwLDEsNi41LDQ5LjdaTTUuOSw0M2EzNS44MiwzNS44MiwwLDAsMSw0LjctMTcuOEwzNi40LDQwLjFhNS45Miw1LjkyLDAsMCwwLS43LDIuOXYwLjdMNi4zLDQ5QTM5LjQ1LDM5LjQ1LDAsMCwxLDUuOSw0M1pNMjkuNCw5LjFsMTAuMiwyOGE2LDYsMCwwLDAtMi44LDIuNEwxMC45LDI0LjZBMzYuNjIsMzYuNjIsMCwwLDEsMjkuNCw5LjFaTTQyLjEsNi44YTM0LDM0LDAsMCwxLDEyLDIuMWwtMTAuMiwyOGE1LjY2LDUuNjYsMCwwLDAtMS44LS4zLDUuMjMsNS4yMywwLDAsMC0xLjguM0wzMC4xLDguOUEzNCwzNCwwLDAsMSw0Mi4xLDYuOFpNNzMuMywyNC42TDQ3LjUsMzkuNWE3LjIsNy4yLDAsMCwwLTIuOC0yLjRsMTAuMi0yOEEzNi44LDM2LjgsMCwwLDEsNzMuMywyNC42Wk0xOS4xLDcxTDM4LjMsNDguMWE3LjA5LDcuMDksMCwwLDAsMy41LDEuM1Y3OS4yQTM1LjQ0LDM1LjQ0LDAsMCwxLDE5LjEsNzFabTIzLjQsOC4zVjQ5LjRBNi4yNSw2LjI1LDAsMCwwLDQ2LDQ4LjFMNjUuMSw3MUEzNiwzNiwwLDAsMSw0Mi41LDc5LjNabTYtMzUuNVY0My4xYTcuMjcsNy4yNywwLDAsMC0uNy0yLjlMNzMuNiwyNS4zYTM1LjgyLDM1LjgyLDAsMCwxLDQuNywxNy44LDM4LjA4LDM4LjA4LDAsMCwxLS41LDUuOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjkgLTEuOCkiLz48L3N2Zz4=");';
+    case 9:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiNmZjJkMjk7fS5jbHMtM3tmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItOTwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjI1IDgwLjI4IDQxLjIgNDYuMzEgNDUuMjQgNDUuODcgNjYuNDMgNzEuMzIgNDEuMjUgODAuMjgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNjYuMzkgNzEgNDQuNDQgNDUuMDYgNDcuMjQgNDIuMTMgNzkuODYgNDcuOTEgNjYuMzkgNzEiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNzkuNDMgNDguMjggNDUuOTcgNDIuMzggNDYuMjUgMzguMzMgNzUuMDIgMjEuOTIgNzkuNDMgNDguMjgiLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iNzUuMjQgMjEuOTIgNDUuNjcgMzguNjYgNDMuMzEgMzUuMzYgNTUuMDYgNC4zOSA3NS4yNCAyMS45MiIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI1NC41NSA0LjY5IDQyLjg2IDM2LjU5IDM4LjkyIDM1LjYgMjcuODMgNC4zOSA1NC41NSA0LjY5Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjQxLjEgODAuMDcgNDEuMTUgNDYuMDkgMzcuMTEgNDUuNjUgMTUuOTIgNzEuMTEgNDEuMSA4MC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxNS45NiA3MC43OCAzNy45MSA0NC44NSAzNS4xMSA0MS45MSAyLjQ5IDQ3LjY5IDE1Ljk2IDcwLjc4Ii8+PHBvbHlnb24gY2xhc3M9ImNscy0yIiBwb2ludHM9IjIuOTIgNDguMDcgMzYuMzggNDIuMTcgMzYuMSAzOC4xMiA3LjMzIDIxLjcgMi45MiA0OC4wNyIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI3LjExIDIxLjcxIDM2LjY4IDM4LjQ1IDM5LjA0IDM1LjE1IDI3LjI5IDQuMTggNy4xMSAyMS43MSIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTgzLjQsNDNBNDEuMjUsNDEuMjUsMCwxLDAsMjkuNSw4Mi4zTDQzLjQsOTYuNSw1NS4zLDgyLjFBNDEuMjksNDEuMjksMCwwLDAsODMuNCw0M1pNNjUuNyw3MC42TDQ2LjUsNDcuN2E2LDYsMCwwLDAsMS44LTMuMmwyOS40LDUuMkEzNi4zMywzNi4zMywwLDAsMSw2NS43LDcwLjZaTTYuNSw0OS43bDI5LjQtNS4yYTYuODMsNi44MywwLDAsMCwxLjgsMy4yTDE4LjUsNzAuNkEzNi4zMywzNi4zMywwLDAsMSw2LjUsNDkuN1pNNS45LDQzYTM1LjgyLDM1LjgyLDAsMCwxLDQuNy0xNy44TDM2LjQsNDAuMWE1LjkyLDUuOTIsMCwwLDAtLjcsMi45djAuN0w2LjMsNDlBMzkuNDUsMzkuNDUsMCwwLDEsNS45LDQzWk0yOS40LDkuMWwxMC4yLDI4YTYsNiwwLDAsMC0yLjgsMi40TDEwLjksMjQuNkEzNi42MiwzNi42MiwwLDAsMSwyOS40LDkuMVpNNDIuMSw2LjhhMzQsMzQsMCwwLDEsMTIsMi4xbC0xMC4yLDI4YTUuNjYsNS42NiwwLDAsMC0xLjgtLjMsNS4yMyw1LjIzLDAsMCwwLTEuOC4zTDMwLjEsOC45QTM0LDM0LDAsMCwxLDQyLjEsNi44Wk03My4zLDI0LjZMNDcuNSwzOS41YTcuMiw3LjIsMCwwLDAtMi44LTIuNGwxMC4yLTI4QTM2LjgsMzYuOCwwLDAsMSw3My4zLDI0LjZaTTE5LjEsNzFMMzguMyw0OC4xYTcuMDksNy4wOSwwLDAsMCwzLjUsMS4zVjc5LjJBMzUuNDQsMzUuNDQsMCwwLDEsMTkuMSw3MVptMjMuNCw4LjNWNDkuNEE2LjI1LDYuMjUsMCwwLDAsNDYsNDguMUw2NS4xLDcxQTM2LDM2LDAsMCwxLDQyLjUsNzkuM1ptNi0zNS41VjQzLjFhNy4yNyw3LjI3LDAsMCwwLS43LTIuOUw3My42LDI1LjNhMzUuODIsMzUuODIsMCwwLDEsNC43LDE3LjgsMzguMDgsMzguMDgsMCwwLDEtLjUsNS45WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuOSAtMS44KSIvPjwvc3ZnPg==");';
+    case 10:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnNDYxOSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTUgMTcuMTQiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZjk0YTE1O308L3N0eWxlPjwvZGVmcz48dGl0bGU+YmlrZXNoYXJlX291dF9vZl9odWI8L3RpdGxlPjxwYXRoIGlkPSJjaXJjbGU0NjA0IiBjbGFzcz0iY2xzLTEiIGQ9Ik0xMS42OSwxLjM4YTEsMSwwLDEsMCwxLDFBMSwxLDAsMCwwLDExLjY5LDEuMzhabS0xLjg2LDJhMC41LDAuNSwwLDAsMC0uMzUuMTRMNi44NCw2YTAuNSwwLjUsMCwwLDAsMCwuNzZsMS44LDEuMzV2Mi43NWEwLjUsMC41LDAsMSwwLDEsMHYtM2EwLjUsMC41LDAsMCwwLS4yLTAuNEw4LjcyLDYuOWwxLjgyLTEuNzIsMC43NSwxYTAuNSwwLjUsMCwwLDAsLjQuMmgxLjVhMC41LDAuNSwwLDEsMCwwLTFIMTEuOTRsLTAuNzUtMS0wLjYtLjhhMC41LDAuNSwwLDAsMC0uMzgtMC4yMUg5LjgzWm0tNS4xNCw0YTMsMywwLDEsMCwzLDNBMywzLDAsMCwwLDQuNjksNy4zOFptOSwwYTMsMywwLDEsMCwzLDNBMywzLDAsMCwwLDEzLjY5LDcuMzhabS05LDFhMiwyLDAsMSwxLTIsMkEyLDIsMCwwLDEsNC42OSw4LjM4Wm05LDBhMiwyLDAsMSwxLTIsMkEyLDIsMCwwLDEsMTMuNjksOC4zOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xLjY5IC0xLjM4KSIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIzLjMgMTIuOTQgNy41IDE3LjE0IDExLjcgMTIuOTQgMy4zIDEyLjk0Ii8+PC9zdmc+");';
+    default:
+      return 'background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0id2hpdGVfYmciIGRhdGEtbmFtZT0id2hpdGUgYmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDgyLjUgOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiMzMzM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5odWItMDwvdGl0bGU+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI0MS4yNSIgY3k9IjQxLjIiIHI9IjM4LjE4Ii8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODMuNCw0M0E0MS4yNSw0MS4yNSwwLDEsMCwyOS41LDgyLjNMNDMuNCw5Ni41LDU1LjMsODIuMUE0MS4yOSw0MS4yOSwwLDAsMCw4My40LDQzWk02NS43LDcwLjZMNDYuNSw0Ny43YTYsNiwwLDAsMCwxLjgtMy4ybDI5LjQsNS4yQTM2LjMzLDM2LjMzLDAsMCwxLDY1LjcsNzAuNlpNNi41LDQ5LjdsMjkuNC01LjJhNi44Myw2LjgzLDAsMCwwLDEuOCwzLjJMMTguNSw3MC42QTM2LjMzLDM2LjMzLDAsMCwxLDYuNSw0OS43Wk01LjksNDNhMzUuODIsMzUuODIsMCwwLDEsNC43LTE3LjhMMzYuNCw0MC4xYTUuOTIsNS45MiwwLDAsMC0uNywyLjl2MC43TDYuMyw0OUEzOS40NSwzOS40NSwwLDAsMSw1LjksNDNaTTI5LjQsOS4xbDEwLjIsMjhhNiw2LDAsMCwwLTIuOCwyLjRMMTAuOSwyNC42QTM2LjYyLDM2LjYyLDAsMCwxLDI5LjQsOS4xWk00Mi4xLDYuOGEzNCwzNCwwLDAsMSwxMiwyLjFsLTEwLjIsMjhhNS42Niw1LjY2LDAsMCwwLTEuOC0uMyw1LjIzLDUuMjMsMCwwLDAtMS44LjNMMzAuMSw4LjlBMzQsMzQsMCwwLDEsNDIuMSw2LjhaTTczLjMsMjQuNkw0Ny41LDM5LjVhNy4yLDcuMiwwLDAsMC0yLjgtMi40bDEwLjItMjhBMzYuOCwzNi44LDAsMCwxLDczLjMsMjQuNlpNMTkuMSw3MUwzOC4zLDQ4LjFhNy4wOSw3LjA5LDAsMCwwLDMuNSwxLjNWNzkuMkEzNS40NCwzNS40NCwwLDAsMSwxOS4xLDcxWm0yMy40LDguM1Y0OS40QTYuMjUsNi4yNSwwLDAsMCw0Niw0OC4xTDY1LjEsNzFBMzYsMzYsMCwwLDEsNDIuNSw3OS4zWm02LTM1LjVWNDMuMWE3LjI3LDcuMjcsMCwwLDAtLjctMi45TDczLjYsMjUuM2EzNS44MiwzNS44MiwwLDAsMSw0LjcsMTcuOCwzOC4wOCwzOC4wOCwwLDAsMS0uNSw1LjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMC45IC0xLjgpIi8+PC9zdmc+");';
+  }
+};
+/**
+ * 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 const BaseBikeRentalIcon = styled.div<{ percent: number }>`
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  margin: auto;
+  width: 24px;
+  height: 24px;
+  ${props => getPctIcon(props.percent)}
+`;
+
+export const StationMarker = styled(MapMarkerAlt)`
+  height: 12;
+  width: 12;
+  color: ${props => props.color};
+`;

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./lib",
+    "rootDir": "./src",
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "references": [
+    {
+      "path": "../types"
+    }
+  ]
+}