Added live metar data updates

weather-ui/src/components/MetarMap.tsx

@@ -17,7 +17,7 @@ export default function Map() {
       center={[38.7209, -77.5133]}
       zoom={8}
       maxZoom={12}
-      minZoom={3}
+      minZoom={1}
       zoomControl={false}
       style={{ height: '96.5vh' }}
       className='overflow-y-hidden overflow-x-hidden'
@@ -55,13 +55,17 @@ function MapTiles() {
       ne_lon: ne.lng,
       sw_lat: sw.lat,
       sw_lon: sw.lng,
-      limit: 10,
+      limit: 100,
       page: 1
     });
     const metars = await getMetars(_airports);
-    for (let i = 0; i < metars.length; i++) {
-      _airports[i].metar = metars[i];
-    }
+    metars.forEach((metar) => {
+      _airports.forEach((airport) => {
+        if (metar.station_id == airport.icao) {
+          airport.metar = metar;
+        }
+      });
+    });
     setAirports(_airports);
   }
 
@@ -89,7 +93,7 @@ function MapTiles() {
     } else if (metar?.flight_category == 'LIFR') {
       return 'text-red-700';
     } else {
-      return 'text-black';
+      return 'text-black/50';
     }
   }
 
@@ -141,15 +145,15 @@ function MapTiles() {
         url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
       />
       {airports.map((airport) => (
-        <Marker key={airport.icao} position={[airport.latitude, airport.longitude]} icon={icon(airport)}>
+        <Marker key={airport.icao} position={[airport.point.y, airport.point.x]} icon={icon(airport)}>
           <Tooltip className='metar-tooltip' direction='top' offset={[5, -5]} opacity={1}>
-            {airport.icao}
+            <b>{airport.icao}</b> - {airport.full_name}
           </Tooltip>
           <Popup>
             <div className='min-w-0 flex-1 select-none'>
               <Link href={`/airport/${airport.icao}`}>
                 <h1 className='text-base text-gray-900 pb-1'>
-                  <span className='font-semibold'>{airport.icao}</span> {airport.name}
+                  <span className='font-semibold'>{airport.icao}</span> {airport.full_name}
                 </h1>
               </Link>
               <hr />

weather-ui/src/js/api/airport.ts

@@ -28,7 +28,7 @@ export async function getAirports({
   page = 1
 }: GetAirportsProps): Promise<Airport[]> {
   const response = await axios
-    .get(`http://localhost:5000/airports`, { params: { ne_lat, ne_lon, sw_lat, sw_lon, page, limit } })
+    .get(`http://localhost:5000/airports`, { params: { ne_lat, ne_lon, sw_lat, sw_lon, limit, page } })
     .catch((error) => console.error(error));
-  return response?.data;
+  return response?.data || [];
 }

weather-ui/src/js/api/airport.types.ts

@@ -1,9 +1,21 @@
 import { Metar } from './metar.types';
 
 export interface Airport {
-  name: string;
   icao: string;
-  latitude: number;
-  longitude: number;
+  category: string;
+  full_name: string;
+  elevation_ft: string;
+  continent: string;
+  iso_country: string;
+  iso_region: string;
+  municipality: string;
+  gps_code: string;
+  iata_code: string;
+  local_code: string;
+  point: {
+    x: number;
+    y: number;
+    srid: number;
+  };
   metar?: Metar;
 }

weather-ui/src/js/api/metar.ts

@@ -6,5 +6,5 @@ export async function getMetars(airports: Airport[]): Promise<Metar[]> {
   const stationICAOs: string = airports.map((airport) => airport.icao).join(',');
   const url = `http://localhost:5000/metars/${stationICAOs}`;
   const response = await axios.get(url).catch((error) => console.error(error));
-  return response?.data;
+  return response?.data || [];
 }