Drive polylines and intermediateIds from useFlightsMapSearch routes

src/features/flights-map/components/FlightsMapStartPage.tsx

@@ -18,6 +18,7 @@ import { ClientOnly } from "./ClientOnly.js";
 import { FlightsMapFilter } from "./FlightsMapFilter.js";
 import { useFlightsMapSearch } from "../hooks/useFlightsMapSearch.js";
 import { useFlightsMapCalendar } from "../hooks/useFlightsMapCalendar.js";
+import { routesToPolylines, intermediateCityIds } from "../routesToPolylines.js";
 import { useDictionaries } from "@/shared/dictionaries/index.js";
 import { getEnv } from "@/env/index.js";
 import { getCityZoomLevel } from "../cityCategory.js";
@@ -159,7 +160,15 @@ export const FlightsMapStartPage: FC = () => {
       });
   }, [dictionaries, filterState.departure, filterState.arrival]);
 
-  const polylines = useMemo<IMapPolyline[]>(() => [], []);
+  const polylines = useMemo<IMapPolyline[]>(
+    () => routesToPolylines(routes, filterState),
+    [routes, filterState.departure, filterState.arrival],
+  );
+
+  const intermediateIds = useMemo<string[]>(
+    () => intermediateCityIds(routes),
+    [routes],
+  );
 
   // Tile URL from env or default
   const tileUrl = `${env.API_BASE_URL}/tiles/{z}/{x}/{y}.png`;
@@ -220,6 +229,7 @@ export const FlightsMapStartPage: FC = () => {
                   className="flights-map-start__map"
                   domestic={filterState.domestic}
                   international={filterState.international}
+                  intermediateIds={intermediateIds}
                 />
               </Suspense>
             </ClientOnly>