Airports & Weather Overlay

// packages/shared/src/airport.ts
export type AirportType = "large_airport" | "medium_airport" | "small_airport" | "heliport" | "seaplane_base" | "closed";

export interface Airport {
  id: number;
  ident: string;
  type: AirportType;
  name: string;
  lat: number;
  lon: number;
  elevationFt: number | null;
  icaoCode: string | null;
  iataCode: string | null;
  municipality: string | null;
  countryCode: string | null;
}

// packages/shared/src/geo.ts (add to the Module 4 version)

/** A simple lat/lon bounding box, used for airport-by-viewport queries. */
export interface BoundingBox {
  minLat: number;
  maxLat: number;
  minLon: number;
  maxLon: number;
}

// apps/server/src/db/seedAirports.ts
import { parse } from "csv-parse/sync";
import { db, pool } from "./client.js";
import { airports } from "./schema.js";
import type { AirportType } from "@skywatch/shared";

/**
 * Populates the `airports` table from OurAirports' open dataset (public
 * domain). We only keep large/medium/small airports and heliports/seaplane
 * bases with an ICAO or IATA code -- closed airports and the enormous long
 * tail of unpaved private strips would bloat the map overlay for no benefit.
 */
const SOURCE_URL = "https://davidmegginson.github.io/ourairports-data/airports.csv";

const KEEP_TYPES = new Set<AirportType>([
  "large_airport",
  "medium_airport",
  "small_airport",
  "heliport",
  "seaplane_base",
]);

interface OurAirportsRow {
  id: string;
  ident: string;
  type: string;
  name: string;
  latitude_deg: string;
  longitude_deg: string;
  elevation_ft: string;
  municipality: string;
  iso_country: string;
  gps_code: string;
  iata_code: string;
}

async function main() {
  console.log(`Fetching airport data from ${SOURCE_URL} ...`);
  const resp = await fetch(SOURCE_URL);
  if (!resp.ok) {
    throw new Error(`Failed to fetch airport data: HTTP ${resp.status}`);
  }
  const csvText = await resp.text();
  const rows: OurAirportsRow[] = parse(csvText, { columns: true, skip_empty_lines: true });

  const filtered = rows.filter((r) => {
    if (!KEEP_TYPES.has(r.type as AirportType)) return false;
    // Skip small_airport entries with no useful code -- these are almost
    // always unpaved private strips that would dominate the marker count.
    if (r.type === "small_airport" && !r.gps_code && !r.iata_code) return false;
    const lat = Number(r.latitude_deg);
    const lon = Number(r.longitude_deg);
    return Number.isFinite(lat) && Number.isFinite(lon);
  });

  const truncate = (s: string | null, max: number) => (s ? s.slice(0, max) : null);
  const values = filtered.map((r) => ({
    ident: truncate(r.ident, 10)!,
    type: r.type,
    name: truncate(r.name, 160)!,
    lat: Number(r.latitude_deg),
    lon: Number(r.longitude_deg),
    elevationFt: r.elevation_ft ? Number(r.elevation_ft) : null,
    icaoCode: truncate(r.gps_code || null, 4),
    iataCode: truncate(r.iata_code || null, 3),
    municipality: truncate(r.municipality || null, 120),
    countryCode: truncate(r.iso_country || null, 2),
  }));

  // ident has a unique index; the source data shouldn't have duplicates but
  // dedupe defensively (last row wins) rather than let one bad row abort the batch.
  const byIdent = new Map(values.map((v) => [v.ident, v]));
  const deduped = [...byIdent.values()];

  console.log("Clearing existing airports table...");
  await db.delete(airports);

  const BATCH_SIZE = 1000;
  for (let i = 0; i < deduped.length; i += BATCH_SIZE) {
    const batch = deduped.slice(i, i + BATCH_SIZE);
    await db.insert(airports).values(batch).onConflictDoNothing();
    console.log(`Inserted ${Math.min(i + BATCH_SIZE, deduped.length)} / ${deduped.length}`);
  }

  console.log("Airport seed complete.");
  await pool.end();
}

main().catch((err) => {
  console.error("Airport seed failed:", err);
  process.exit(1);
});

// apps/server/src/db/repos/airportsRepo.ts
import { and, gte, lte, inArray } from "drizzle-orm";
import type { Airport, AirportType, BoundingBox } from "@skywatch/shared";
import { db } from "../client.js";
import { airports } from "../schema.js";

function toApi(row: typeof airports.$inferSelect): Airport {
  return {
    id: row.id,
    ident: row.ident,
    type: row.type as AirportType,
    name: row.name,
    lat: row.lat,
    lon: row.lon,
    elevationFt: row.elevationFt,
    icaoCode: row.icaoCode,
    iataCode: row.iataCode,
    municipality: row.municipality,
    countryCode: row.countryCode,
  };
}

export async function queryAirportsInBounds(
  bbox: BoundingBox,
  types: AirportType[]
): Promise<Airport[]> {
  const rows = await db
    .select()
    .from(airports)
    .where(
      and(
        gte(airports.lat, bbox.minLat),
        lte(airports.lat, bbox.maxLat),
        gte(airports.lon, bbox.minLon),
        lte(airports.lon, bbox.maxLon),
        types.length > 0 ? inArray(airports.type, types) : undefined
      )
    )
    .limit(2000);
  return rows.map(toApi);
}

// apps/server/src/routes/airports.ts
import type { FastifyInstance } from "fastify";
import { z } from "zod";
import type { AirportType } from "@skywatch/shared";
import { queryAirportsInBounds } from "../db/repos/airportsRepo.js";

const VALID_TYPES: AirportType[] = [
  "large_airport",
  "medium_airport",
  "small_airport",
  "heliport",
  "seaplane_base",
  "closed",
];

const querySchema = z
  .object({
    minLat: z.coerce.number().min(-90).max(90),
    maxLat: z.coerce.number().min(-90).max(90),
    minLon: z.coerce.number().min(-180).max(180),
    maxLon: z.coerce.number().min(-180).max(180),
    // comma-separated list, e.g. "large_airport,medium_airport"
    types: z
      .string()
      .optional()
      .transform((s) => (s ? s.split(",").filter((t): t is AirportType => VALID_TYPES.includes(t as AirportType)) : [])),
  })
  .refine((v) => v.maxLat >= v.minLat && v.maxLon >= v.minLon, { message: "invalid bounding box" });

export function registerAirportRoutes(app: FastifyInstance): void {
  app.get("/airports", async (req, reply) => {
    const parsed = querySchema.safeParse(req.query);
    if (!parsed.success) {
      return reply.status(400).send({ error: "invalid bounding box", issues: parsed.error.issues });
    }
    const { minLat, maxLat, minLon, maxLon, types } = parsed.data;
    const airports = await queryAirportsInBounds({ minLat, maxLat, minLon, maxLon }, types);
    return { airports };
  });
}

// apps/server/src/routes/index.ts
import { registerAirportRoutes } from "./airports.js";
// ...
registerAirportRoutes(api);

// apps/web/src/components/AirportLayer.tsx
"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { Marker, Tooltip, useMap, useMapEvents } from "react-leaflet";
import type { Airport } from "@skywatch/shared";
import { apiUrl } from "@/lib/serverUrl";
import { makeAirportIcon } from "@/lib/airportIcon";
import { useAppStore } from "@/store/useAppStore";
import { AirportWeatherBadge } from "./AirportWeatherBadge";

const DEBOUNCE_MS = 400;
const SMALL_AIRPORT_MIN_ZOOM = 8;
// Below this zoom the bounding box spans most of a continent -- airports
// would just be visual noise (and a large fetch), so skip the overlay.
const MIN_ZOOM_TO_SHOW = 5;
// METAR badges add a second marker + fetch per airport, so they're gated to
// a closer zoom than the airport diamonds themselves -- only large fields
// (which is all we query for below this) get a badge either way.
const METAR_MIN_ZOOM = 7;

/**
 * Airport reference-data overlay (OurAirports dataset, seeded via
 * `npm run db:seed:airports`). Refetches for the current viewport on pan/
 * zoom, same debounce pattern as ViewportFeed. Purely additive -- doesn't
 * touch the aircraft feed or free-pan state at all.
 */
export function AirportLayer() {
  const map = useMap();
  const showAirports = useAppStore((s) => s.showAirports);
  const [airports, setAirports] = useState<Airport[]>([]);
  const [zoom, setZoom] = useState(() => map.getZoom());
  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const fetchForCurrentView = useCallback(() => {
    // Skip the fetch entirely while hidden -- the toggle is a display
    // preference, not just a render guard, so panning around with airports
    // off shouldn't keep hitting the API for markers nobody will see.
    if (!showAirports) return;
    const zoom = map.getZoom();
    setZoom(zoom);
    if (zoom < MIN_ZOOM_TO_SHOW) {
      setAirports([]);
      return;
    }
    const bounds = map.getBounds();
    const types = zoom >= SMALL_AIRPORT_MIN_ZOOM ? "large_airport,medium_airport,small_airport" : "large_airport,medium_airport";
    const params = new URLSearchParams({
      minLat: String(bounds.getSouth()),
      maxLat: String(bounds.getNorth()),
      minLon: String(bounds.getWest()),
      maxLon: String(bounds.getEast()),
      types,
    });
    fetch(apiUrl(`/api/airports?${params.toString()}`))
      .then((r) => r.json())
      .then((data: { airports: Airport[] }) => setAirports(data.airports ?? []))
      .catch((err) => console.error("[airports] fetch failed:", err));
  }, [map, showAirports]);

  useMapEvents({
    moveend: () => {
      if (debounceTimer.current) clearTimeout(debounceTimer.current);
      debounceTimer.current = setTimeout(fetchForCurrentView, DEBOUNCE_MS);
    },
  });

  useEffect(() => {
    fetchForCurrentView();
    return () => {
      if (debounceTimer.current) clearTimeout(debounceTimer.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Re-fetch the moment the toggle flips back on, for the current viewport
  // -- otherwise airports would stay empty until the next pan/zoom, since
  // the fetch above was skipped for however long the layer was hidden.
  useEffect(() => {
    if (showAirports) fetchForCurrentView();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [showAirports]);

  if (!showAirports) return null;

  return (
    <>
      {airports.map((a) => (
        <Marker key={a.id} position={[a.lat, a.lon]} icon={makeAirportIcon(a.type)}>
          <Tooltip direction="top" offset={[0, -4]} opacity={0.95}>
            <span className="font-mono text-[11px]">
              {a.icaoCode ?? a.ident}
              {a.iataCode ? ` / ${a.iataCode}` : ""} · {a.name}
            </span>
          </Tooltip>
        </Marker>
      ))}
      {zoom >= METAR_MIN_ZOOM &&
        airports
          .filter((a) => a.type === "large_airport" && a.icaoCode)
          .map((a) => <AirportWeatherBadge key={`metar-${a.id}`} airport={a} />)}
    </>
  );
}

// apps/web/src/components/MapPanel.tsx (inside MapContainer)
<TileLayer ... />
<AirportLayer />
<TrailLayer />
<AircraftMarkers />

// apps/server/src/lib/weather.ts
import type { MetarInfo } from "@skywatch/shared";
import { fetchJson } from "./http.js";

const BASE = "https://aviationweather.gov/api/data/metar";

interface AwcMetar {
  icaoId?: string;
  obsTime?: number; // unix seconds
  temp?: number;
  wdir?: number | string;
  wspd?: number;
  visib?: number | string;
  fltCat?: string;
  rawOb?: string;
}

/**
 * Fetches the latest METAR for an airport ICAO code from aviationweather.gov
 * (open CORS, no API key). Not cached in Postgres -- weather changes on the
 * order of an hour, so an in-memory cache with a short TTL (see routes/weather.ts)
 * is more appropriate than a durable table.
 */
export async function fetchMetar(icao: string): Promise<MetarInfo | null> {
  const data = await fetchJson<AwcMetar[]>(`${BASE}?ids=${encodeURIComponent(icao)}&format=json`);
  const m = data[0];
  if (!m || !m.rawOb) return null;

  return {
    icao: m.icaoId ?? icao,
    raw: m.rawOb,
    observedAt: m.obsTime ? new Date(m.obsTime * 1000).toISOString() : null,
    tempC: typeof m.temp === "number" ? m.temp : null,
    windDirDeg: typeof m.wdir === "number" ? m.wdir : null,
    windSpeedKt: typeof m.wspd === "number" ? m.wspd : null,
    visibilityMi: typeof m.visib === "number" ? m.visib : typeof m.visib === "string" ? Number(m.visib) || null : null,
    flightCategory: m.fltCat ?? null,
  };
}

// apps/server/src/routes/weather.ts
import type { FastifyInstance } from "fastify";
import { z } from "zod";
import type { MetarInfo } from "@skywatch/shared";
import { fetchMetar } from "../lib/weather.js";
import { MemoryCache } from "../lib/memoryCache.js";

const paramsSchema = z.object({ icao: z.string().trim().length(4) });

const cache = new MemoryCache<MetarInfo | null>(10 * 60 * 1000); // METAR updates roughly hourly; 10min is plenty fresh

export function registerWeatherRoutes(app: FastifyInstance): void {
  app.get("/weather/:icao", async (req, reply) => {
    const parsed = paramsSchema.safeParse(req.params);
    if (!parsed.success) return reply.status(400).send({ error: "invalid ICAO code" });
    const icao = parsed.data.icao.toUpperCase();

    const cached = cache.get(icao);
    if (cached !== undefined) {
      if (!cached) return reply.status(404).send({ error: "not found" });
      return cached;
    }

    try {
      const metar = await fetchMetar(icao);
      cache.set(icao, metar);
      if (!metar) return reply.status(404).send({ error: "not found" });
      return metar;
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);
      return reply.status(502).send({ error: message });
    }
  });
}

// apps/web/src/hooks/useAirportMetar.ts
"use client";

import { useEffect, useState } from "react";
import type { MetarInfo } from "@skywatch/shared";
import { apiUrl } from "@/lib/serverUrl";

const cache = new Map<string, MetarInfo | null>();

/**
 * Latest METAR for an airport via our server's aviation-weather proxy
 * (Postgres-cached ~10min upstream). Keyed by ICAO code. Falls back to null
 * on any failure/404 -- callers should treat that as "no data," not "clear
 * skies."
 */
export function useAirportMetar(icao: string | null): MetarInfo | null {
  const [info, setInfo] = useState<MetarInfo | null>(icao ? (cache.get(icao) ?? null) : null);

  useEffect(() => {
    if (!icao) {
      setInfo(null);
      return;
    }
    if (cache.has(icao)) {
      setInfo(cache.get(icao) ?? null);
      return;
    }

    let cancelled = false;
    fetch(apiUrl(`/api/weather/${encodeURIComponent(icao)}`))
      .then((r) => (r.ok ? (r.json() as Promise<MetarInfo>) : null))
      .then((data) => {
        cache.set(icao, data);
        if (!cancelled) setInfo(data);
      })
      .catch(() => {
        if (!cancelled) setInfo(null);
      });
    return () => {
      cancelled = true;
    };
  }, [icao]);

  return info;
}

// apps/web/src/components/AirportWeatherBadge.tsx
"use client";

import { Marker, Tooltip } from "react-leaflet";
import type { Airport } from "@skywatch/shared";
import { useAirportMetar } from "@/hooks/useAirportMetar";
import { makeMetarIcon } from "@/lib/metarIcon";

/**
 * Renders a single airport's live METAR flight-category dot, once loaded.
 * Split out from AirportLayer so each badge's fetch/cache/render cycle is
 * independent -- one airport's slow or failed lookup doesn't block others,
 * and React can key/reconcile them individually as the viewport's airport
 * list changes.
 */
export function AirportWeatherBadge({ airport }: { airport: Airport }) {
  const metar = useAirportMetar(airport.icaoCode);
  if (!metar) return null;

  return (
    <Marker position={[airport.lat, airport.lon]} icon={makeMetarIcon(metar.flightCategory)}>
      <Tooltip direction="top" offset={[0, -4]} opacity={0.95}>
        <div className="font-mono text-[11px] leading-snug">
          <div className="font-semibold">
            {airport.icaoCode} · {metar.flightCategory ?? "—"}
          </div>
          <div>{metar.raw}</div>
        </div>
      </Tooltip>
    </Marker>
  );
}

// apps/web/src/store/useAppStore.ts (additions to the previous chapter's version)

interface AppState {
  // ...existing fields...

  /** Whether AirportLayer renders airport diamonds + METAR badges, on both the primary map and multi-region compare panes. Persisted to localStorage by useAirportsVisibility; defaults to shown, same hydration pattern as the theme toggle. */
  showAirports: boolean;

  setShowAirports: (show: boolean) => void;
  toggleShowAirports: () => void;
}

export const useAppStore = create<AppState>((set) => ({
  // ...existing fields...
  showAirports: true,

  setShowAirports: (show) => set({ showAirports: show }),
  toggleShowAirports: () => set((state) => ({ showAirports: !state.showAirports })),
}));

// apps/web/src/components/AirportsToggle.tsx
"use client";

import { useAppStore } from "@/store/useAppStore";

/**
 * Shows/hides AirportLayer's diamonds + METAR badges on every map that
 * renders it (the primary MapPanel and each pane of the multi-region
 * compare view) -- a single store flag, so one click affects both. Purely
 * a display preference: hiding airports doesn't stop AirportLayer's
 * viewport fetch or touch the aircraft feed at all.
 */
export function AirportsToggle() {
  const shown = useAppStore((s) => s.showAirports);
  const toggle = useAppStore((s) => s.toggleShowAirports);

  return (
    <button
      type="button"
      onClick={toggle}
      aria-pressed={shown}
      aria-label={shown ? "Hide airports" : "Show airports"}
      title={shown ? "Airports shown -- click to hide" : "Airports hidden -- click to show"}
      className={`flex h-7 w-7 items-center justify-center rounded-sm border transition-colors ${
        shown
          ? "border-phosphor-dim text-phosphor"
          : "border-line text-text-dim hover:border-phosphor-dim hover:text-phosphor"
      }`}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        {/* Diamond, matching AirportLayer's own marker shape (lib/airportIcon.ts) */}
        <rect x="7" y="7" width="10" height="10" transform="rotate(45 12 12)" strokeLinejoin="round" />
        {!shown && <line x1="3" y1="21" x2="21" y2="3" strokeLinecap="round" />}
      </svg>
    </button>
  );
}

// apps/web/src/hooks/useAirportsVisibility.ts
"use client";

import { useEffect, useRef } from "react";
import { useAppStore } from "@/store/useAppStore";

const STORAGE_KEY = "skywatch:show-airports";

/**
 * Persists the "show airports" preference (AirportsToggle in the header)
 * across sessions -- hydrate-on-mount/write-on-change. Mount once near the
 * root (Dashboard). Defaults to shown, matching the store's SSR default, so
 * there's no flash-of-hidden-airports before this effect runs client-side.
 */
export function useAirportsVisibility(): void {
  const showAirports = useAppStore((s) => s.showAirports);
  const setShowAirports = useAppStore((s) => s.setShowAirports);

  const skippedFirstPersist = useRef(false);

  useEffect(() => {
    try {
      const stored = window.localStorage.getItem(STORAGE_KEY);
      if (stored != null) setShowAirports(stored === "true");
    } catch {
      // localStorage unavailable (private mode, etc.) -- just keep the default.
    }
  }, [setShowAirports]);

  useEffect(() => {
    if (!skippedFirstPersist.current) {
      skippedFirstPersist.current = true;
      return;
    }
    try {
      window.localStorage.setItem(STORAGE_KEY, String(showAirports));
    } catch {
      // ignore
    }
  }, [showAirports]);
}

// apps/web/src/components/Dashboard.tsx (add)
import { useAirportsVisibility } from "@/hooks/useAirportsVisibility";
// ...
useAirportsVisibility();

// apps/web/src/components/Header.tsx (add, both the desktop and mobile icon rows)
import { AirportsToggle } from "./AirportsToggle";
// ...
<AirportsToggle />
<ThemeToggle />