Populate FlightsMapStartPage markers from dictionaries with zoom tiers

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

@@ -20,6 +20,7 @@ import { useFlightsMapSearch } from "../hooks/useFlightsMapSearch.js";
 import { useFlightsMapCalendar } from "../hooks/useFlightsMapCalendar.js";
 import { useDictionaries } from "@/shared/dictionaries/index.js";
 import { getEnv } from "@/env/index.js";
+import { getCityZoomLevel } from "../cityCategory.js";
 import type {
   IFlightsMapFilterState,
   FlightsMapSearchParams,
@@ -67,7 +68,7 @@ export const FlightsMapStartPage: FC = () => {
   const lang = routeParams.lang ?? "ru";
 
   const {
-    dictionaries: _dictionaries,
+    dictionaries,
     loading: dictionariesLoading,
     error: dictionariesError,
   } = useDictionaries(lang);
@@ -129,9 +130,33 @@ export const FlightsMapStartPage: FC = () => {
     [filterState.departure, filterState.arrival],
   );
 
-  // Build markers and polylines from routes (placeholder -- real city
-  // coordinates come from a dictionaries service in a future iteration)
-  const markers = useMemo<IMapMarker[]>(() => [], []);
+  const markers = useMemo<IMapMarker[]>(() => {
+    if (!dictionaries) return [];
+
+    return dictionaries.cities
+      .filter(
+        (c) =>
+          typeof c.location?.lat === "number" &&
+          typeof c.location?.lon === "number",
+      )
+      .map((city) => {
+        const isHighlighted =
+          city.code === filterState.departure ||
+          city.code === filterState.arrival;
+        return {
+          id: city.code,
+          lat: city.location.lat,
+          lng: city.location.lon,
+          label: city.name,
+          tooltipPermanent: true,
+          style: isHighlighted ? "orange" : "blue-small",
+          zoomLevel: getCityZoomLevel(city.code),
+          countryType: city.country_code === "RU" ? "ru" : "other",
+          highlighted: isHighlighted,
+        };
+      });
+  }, [dictionaries, filterState.departure, filterState.arrival]);
+
   const polylines = useMemo<IMapPolyline[]>(() => [], []);
 
   // Tile URL from env or default
@@ -191,6 +216,8 @@ export const FlightsMapStartPage: FC = () => {
                   tileUrl={tileUrl}
                   onMarkerClick={handleMarkerClick}
                   className="flights-map-start__map"
+                  domestic={filterState.domestic}
+                  international={filterState.international}
                 />
               </Suspense>
             </ClientOnly>