From 8e11fa3040db6d398c0c164a2c247f49fd894c58 Mon Sep 17 00:00:00 2001
From: Daniel Heppner <daniel.heppner@ibigroup.com>
Date: Thu, 28 Sep 2023 13:55:14 -0700
Subject: [PATCH] fix: use alpha versions

---
 .../stops-overlay/src/StopsOverlay.story.tsx  |  4 +++-
 packages/stops-overlay/src/index.tsx          | 21 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/stops-overlay/src/StopsOverlay.story.tsx b/packages/stops-overlay/src/StopsOverlay.story.tsx
index 60beada72f..651749e2dd 100644
--- a/packages/stops-overlay/src/StopsOverlay.story.tsx
+++ b/packages/stops-overlay/src/StopsOverlay.story.tsx
@@ -13,7 +13,8 @@ const Example = ({
   minZoom = 15,
   setLocation = action("setLocation"),
   setViewedStop = action("setViewedStop"),
-  stops = mockStops
+  stops = mockStops,
+  highlightedStop = "8338"
 }: StopProps & { mapCenter?: [number, number] }) => {
   return (
     <StopsOverlay
@@ -21,6 +22,7 @@ const Example = ({
       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
index 5bec2c1e03..938c482c9a 100644
--- 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"