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 (
);
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"
/>
+