More

frontend/src/components/map/Map.tsx

@@ -46,6 +46,10 @@ interface MapProps {
   onPostcodeSearched?: (postcode: SearchedPostcode | null) => void;
   bounds?: Bounds | null;
   hideLegend?: boolean;
+  travelTimeEnabled?: boolean;
+  travelTimeDestination?: [number, number] | null;
+  travelTimeColorRange?: [number, number] | null;
+  travelTimeRange?: [number, number] | null;
 }
 
 interface Dimensions {
@@ -98,6 +102,10 @@ export default memo(function Map({
   onPostcodeSearched,
   bounds: viewportBounds,
   hideLegend = false,
+  travelTimeEnabled = false,
+  travelTimeDestination,
+  travelTimeColorRange,
+  travelTimeRange,
 }: MapProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [viewState, setViewState] = useState<ViewState>(initialViewState || INITIAL_VIEW_STATE);
@@ -176,6 +184,10 @@ export default memo(function Map({
     theme,
     searchedPostcode,
     bounds: viewportBounds,
+    travelTimeEnabled,
+    travelTimeDestination,
+    travelTimeColorRange,
+    travelTimeRange,
   });
 
   return (
@@ -204,7 +216,7 @@ export default memo(function Map({
               className="text-5xl font-bold text-white drop-shadow-lg"
               style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
             >
-              Your perfect postcodes
+              Your perfect postcode
             </h1>
           </div>
         ) : null
@@ -212,7 +224,17 @@ export default memo(function Map({
         <>
           <PostcodeSearch onFlyTo={handleFlyTo} onPostcodeSearched={onPostcodeSearched} />
           {!hideLegend &&
-            (viewFeature && colorRange && colorFeatureMeta ? (
+            (travelTimeEnabled && travelTimeDestination && travelTimeColorRange ? (
+              <MapLegend
+                featureLabel="Travel time"
+                range={travelTimeColorRange}
+                showCancel={false}
+                onCancel={onCancelPin}
+                mode="feature"
+                theme={theme}
+                suffix=" min"
+              />
+            ) : viewFeature && colorRange && colorFeatureMeta ? (
               <MapLegend
                 featureLabel={
                   viewSource === 'eye'