fix: use alpha versions

opentripplanner · Oct 24, 2023 · 8e11fa3 · 8e11fa3
1 parent f52f435
commit 8e11fa3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/packages/stops-overlay/src/StopsOverlay.story.tsx b/packages/stops-overlay/src/StopsOverlay.story.tsx
@@ -13,14 +13,16 @@ 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}
       visible
     />
   );

diff --git a/packages/stops-overlay/src/index.tsx b/packages/stops-overlay/src/index.tsx
@@ -16,6 +16,10 @@ 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;
   /**
    * The list of stops to create stop markers for.
    */
@@ -51,6 +55,7 @@ const StopsOverlay = (props: Props): JSX.Element => {
   const {
     activeStop,
     color,
+    highlightedStop,
     minZoom,
     refreshStops,
     setLocation,
@@ -127,7 +132,8 @@ 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] }
       }))
@@ -157,6 +163,19 @@ const StopsOverlay = (props: Props): JSX.Element => {
           }}
           type="circle"
         />
+        <Layer
+          id="higlightedStop"
+          filter={["==", "highlighted", true]}
+          paint={{
+            "circle-color": color || "#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"