Nearby view support

packages/core-utils/src/planQuery.graphql

@@ -1,3 +1,12 @@
+fragment StopParameters on Stop {
+  code
+  gtfsId
+  name
+  id
+  lat
+  lon
+}
+
 query Plan(
   $arriveBy: Boolean
   $banned: InputBanned
@@ -100,9 +109,7 @@ query Plan(
               effectiveStartDate
               id
             }
-            code
-            gtfsId
-            id
+            ...StopParameters
           }
           vertexType
         }
@@ -202,25 +209,21 @@ query Plan(
               effectiveStartDate
               id
             }
-            code
-            gtfsId
-            id
+            ...StopParameters
           }
           vertexType
         }
         transitLeg
         trip {
           arrivalStoptime {
             stop {
-              gtfsId
-              id
+              ...StopParameters
             }
             stopPosition
           }
           departureStoptime {
             stop {
-              gtfsId
-              id
+              ...StopParameters
             }
             stopPosition
           }

packages/itinerary-body/src/otp-react-redux/transit-leg-subheader.tsx

@@ -26,7 +26,7 @@ export default function TransitLegSubheader({
         }}
       />
       {!isFlex(leg) && (
-        <ViewStopButton onStopClick={onStopClick} stopId={from.stopId} />
+        <ViewStopButton onStopClick={onStopClick} stop={from.stop} />
       )}
     </S.PlaceSubheader>
   );

packages/itinerary-body/src/otp-react-redux/view-stop-button.tsx

@@ -1,18 +1,19 @@
 import React, { Component, ReactElement } from "react";
+import { Stop } from "@opentripplanner/types";
 import { FormattedMessage } from "react-intl";
 
 import * as S from "../styled";
 import { defaultMessages } from "../util";
 
 interface Props {
-  onStopClick: ({ stopId: string }) => void;
-  stopId: string;
+  onStopClick: (stop: Stop) => void;
+  stop: Stop;
 }
 
 export default class ViewStopButton extends Component<Props> {
   onClick = (): void => {
-    const { onStopClick, stopId } = this.props;
-    onStopClick({ stopId });
+    const { onStopClick, stop } = this.props;
+    onStopClick(stop);
   };
 
   render(): ReactElement {

packages/itinerary-body/src/types.ts

@@ -8,6 +8,7 @@ import {
   Leg,
   LegIconComponent,
   Place,
+  Stop,
   TransitOperator
 } from "@opentripplanner/types";
 
@@ -84,7 +85,7 @@ export type SetViewedTripFunction = (tripSection: TripSection) => void;
 
 export interface TransitLegSubheaderProps {
   leg: Leg;
-  onStopClick?: ({ stopId: string }) => void;
+  onStopClick?: (stop: Stop) => void;
 }
 
 export interface TransitLegSummaryProps {

packages/map-popup/src/index.tsx

@@ -61,16 +61,16 @@ const StationHubDetails = ({ station }: { station: Station }) => {
 const StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => void; }) => {
   return (
     <BaseMapStyled.PopupRow>
-        <strong>
-          <FormattedMessage
-            defaultMessage={defaultMessages["otpUi.MapPopup.stopId"]}
-            description="Displays the stop id"
-            id="otpUi.MapPopup.stopId"
-            values={{
-              stopId: id
-            }}
-          />
-        </strong>
+      <strong>
+        <FormattedMessage
+          defaultMessage={defaultMessages["otpUi.MapPopup.stopId"]}
+          description="Displays the stop id"
+          id="otpUi.MapPopup.stopId"
+          values={{
+            stopId: id
+          }}
+        />
+      </strong>
       <S.ViewStopButton onClick={setViewedStop}>
         <FormattedMessage
           defaultMessage={defaultMessages["otpUi.MapPopup.stopViewer"]}
@@ -88,9 +88,13 @@ type Props = {
   entity: Entity
   getEntityName?: (entity: Entity, configCompanies: Company[],) => string;
   setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;
-  setViewedStop?: ({ stopId }: { stopId: string }) => void;
+  setViewedStop?: (stop: Stop) => void;
 };
 
+function entityIsStation(entity: Entity): entity is Station {
+  return "bikesAvailable" in entity
+}
+
 /**
  * Renders a map popup for a stop, scooter, or shared bike
  */
@@ -102,9 +106,8 @@ export function MapPopup({ configCompanies, entity, getEntityName, setLocation,
   const name = getNameFunc(entity, configCompanies);
 
 
-  const bikesAvailablePresent = "bikesAvailable" in entity
+  const bikesAvailablePresent = entityIsStation(entity)
   const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;
-  // @ts-expect-error ts doesn't understand entityIsStop
   const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(":")[1] || entity.id
 
   return (
@@ -114,7 +117,12 @@ export function MapPopup({ configCompanies, entity, getEntityName, setLocation,
       {entityIsStationHub && <StationHubDetails station={entity} />}
 
       {/* render stop viewer link if available */}
-      {setViewedStop && !bikesAvailablePresent && <StopDetails id={stopId} setViewedStop={useCallback(() => setViewedStop({ stopId: entity.id }), [entity.id])} />}
+      {setViewedStop && !bikesAvailablePresent && (
+        <StopDetails
+          id={stopId}
+          setViewedStop={useCallback(() => setViewedStop(entity), [entity])}
+        />
+      )}
 
       {/* The "Set as [from/to]" ButtonGroup */}
       {setLocation && (

packages/otp2-tile-overlay/package.json

@@ -16,7 +16,7 @@
     "react-map-gl": "^7.0.15"
   },
   "dependencies": {
-    "@opentripplanner/map-popup": "^2.0.5"
+    "@opentripplanner/map-popup": "^2.0.7-alpha.1"
   },
   "devDependencies": {
     "@opentripplanner/base-map": "^3.0.14",

packages/otp2-tile-overlay/src/index.tsx

@@ -2,6 +2,7 @@ import EntityPopup from "@opentripplanner/map-popup"
 import {
   ConfiguredCompany,
   MapLocationActionArg,
+  Stop,
 } from "@opentripplanner/types"
 // eslint-disable-next-line prettier/prettier
 import type { EventData } from "mapbox-gl"
@@ -52,7 +53,7 @@ const OTP2TileLayerWithPopup = ({
    * A method fired when the stop viewer is opened in the default popup. If this method is
    * not passed, the stop viewer link will not be shown.
    */
-  setViewedStop?: ({ stopId }: { stopId: string }) => void
+  setViewedStop?: (stop: Stop) => void
   /**
    * Determines which layer of the OTP2 tile data to display. Also determines icon color.
    */
@@ -173,7 +174,7 @@ const generateOTP2TileLayers = (
   layers: { color?: string; name?: string; network?: string; type: string, initiallyVisible?: boolean }[],
   endpoint: string,
   setLocation?: (location: MapLocationActionArg) => void,
-  setViewedStop?: ({ stopId }: { stopId: string }) => void,
+  setViewedStop?: (stop: Stop) => void,
   configCompanies?: ConfiguredCompany[]
 ): JSX.Element[] => {
   return [

packages/stops-overlay/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "@opentripplanner/base-map": "^3.0.14",
     "@opentripplanner/from-to-location-picker": "^2.1.8",
-    "@opentripplanner/map-popup": "^2.0.5",
+    "@opentripplanner/map-popup": "^2.0.7-alpha.1",
     "flat": "^5.0.2"
   },
   "devDependencies": {

packages/stops-overlay/src/StopsOverlay.story.tsx

@@ -13,14 +13,17 @@ const Example = ({
   minZoom = 15,
   setLocation = action("setLocation"),
   setViewedStop = action("setViewedStop"),
-  stops = mockStops
+  stops = mockStops,
+  highlightedStop = "8338"
 }: StopProps & { mapCenter?: [number, number] }) => {
   return (
     <StopsOverlay
       minZoom={minZoom}
       setLocation={setLocation}
       setViewedStop={setViewedStop}
       stops={stops}
+      highlightedStop={highlightedStop}
+      highlightedStopColor="#0000ff"
       visible
     />
   );

packages/stops-overlay/src/index.tsx

@@ -16,6 +16,14 @@ type Props = {
    * An optional id to override the active stop with
    */
   activeStop?: string;
+  /**
+   * An optional id to highlight a stop on the map
+   */
+  highlightedStop?: string;
+  /**
+   * A color to use for the highlighted stop
+   */
+  highlightedStopColor?: string;
   /**
    * The list of stops to create stop markers for.
    */
@@ -40,7 +48,7 @@ type Props = {
   /**
    * A method fired when the stop viewer is opened in the popup
    */
-  setViewedStop?: ({ stopId: string }) => void;
+  setViewedStop?: (stop: Stop) => void;
 };
 
 /**
@@ -51,6 +59,8 @@ const StopsOverlay = (props: Props): JSX.Element => {
   const {
     activeStop,
     color,
+    highlightedStop,
+    highlightedStopColor,
     minZoom,
     refreshStops,
     setLocation,
@@ -127,12 +137,13 @@ const StopsOverlay = (props: Props): JSX.Element => {
         type: "Feature",
         properties: {
           ...stop,
-          flex: isGeoJsonFlex(stop?.geometries?.geoJson)
+          flex: isGeoJsonFlex(stop?.geometries?.geoJson),
+          highlighted: stop.id === highlightedStop
         },
         geometry: { type: "Point", coordinates: [stop.lon, stop.lat] }
       }))
     }),
-    [stops]
+    [stops, highlightedStop]
   );
 
   // Don't render if no map or no stops are defined.
@@ -157,6 +168,19 @@ const StopsOverlay = (props: Props): JSX.Element => {
           }}
           type="circle"
         />
+        <Layer
+          id="higlightedStop"
+          filter={["==", "highlighted", true]}
+          paint={{
+            "circle-color": highlightedStopColor || "#ff0000",
+            "circle-opacity": 1,
+            "circle-radius": 10,
+            // TODO: Use tinycolor to generate outline with appropriate contrast.
+            "circle-stroke-color": color ? "#fff" : "#333",
+            "circle-stroke-width": 2
+          }}
+          type="circle"
+        />
         <Layer
           filter={["==", "flex", true]}
           id="flex-stops"

packages/types/src/index.ts

@@ -238,9 +238,22 @@ export type Place = {
   name: string;
   networks?: string[];
   rentalVehicle?: { network: string };
+  stop?: Stop;
+  /**
+   * @deprecated Only for OTP1 support, removal is immenent
+   */
   stopCode?: string;
+  /**
+   * @deprecated Only for OTP1 support, removal is immenent
+   */
   stopId?: string;
+  /**
+   * @deprecated Only for OTP1 support, removal is immenent
+   */
   stopIndex?: number;
+  /**
+   * @deprecated Only for OTP1 support, removal is immenent
+   */
   stopSequence?: number;
   vertexType: string;
   zoneId?: string;
@@ -473,10 +486,11 @@ export type Stop = {
   dist?: number;
   geometries?: { geoJson?: GeoJSON.Polygon };
   id: string;
-  lat: number;
-  lon: number;
+  lat?: number;
+  lon?: number;
   name: string;
   routes?: Route[];
+  gtfsId: string;
 };
 
 export type Agency = {

yarn.lock

@@ -3241,6 +3241,16 @@
   resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
   integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
 
+"@opentripplanner/map-popup@^2.0.7-alpha.1":
+  version "2.0.7-alpha.1"
+  resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-2.0.7-alpha.1.tgz#c8e771989ecad23b1614e83b4ee4831c7c019491"
+  integrity sha512-YXNoE1R30ClgaPuj5khWlKv7bcBBbJETuniqrg+55AeL8dpMEndUQPsmDWexr9XkY5xOmqhrrfjJ6aew00gYOQ==
+  dependencies:
+    "@opentripplanner/base-map" "^3.0.14"
+    "@opentripplanner/core-utils" "^11.0.2"
+    "@opentripplanner/from-to-location-picker" "^2.1.8"
+    flat "^5.0.2"
+
 "@opentripplanner/[email protected]":
   version "7.0.0-alpha.2"
   resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-7.0.0-alpha.2.tgz#d10c69f99b2da6d1e80ab5989520bde8e558627b"