Filter on airport category

weather-ui/src/components/MetarMap.tsx

@@ -18,7 +18,6 @@ export default function Map() {
       zoom={8}
       maxZoom={12}
       minZoom={1}
-      zoomControl={false}
       style={{ height: '96.5vh' }}
       className='overflow-y-hidden overflow-x-hidden'
       attributionControl={false}
@@ -35,8 +34,9 @@ function MapTiles() {
   const map = useMap();
 
   const mapEvents = useMapEvents({
-    zoomend: () => {
+    zoomend: async () => {
       setZoomLevel(mapEvents.getZoom());
+      await updateAirports(mapEvents.getBounds());
     },
     movestart: () => {
       // setDragging(true);
@@ -51,10 +51,10 @@ function MapTiles() {
     const ne = bounds.getNorthEast();
     const sw = bounds.getSouthWest();
     const _airports = await getAirports({
-      ne_lat: ne.lat,
-      ne_lon: ne.lng,
-      sw_lat: sw.lat,
-      sw_lon: sw.lng,
+      bounds: {
+        northEast: { lat: ne.lat, lon: ne.lng },
+        southWest: { lat: sw.lat, lon: sw.lng }
+      },
       limit: 100,
       page: 1
     });

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

@@ -2,14 +2,22 @@ import axios from 'axios';
 import { Airport } from './airport.types';
 
 interface GetAirportsProps {
-  ne_lat: number;
-  ne_lon: number;
-  sw_lat: number;
-  sw_lon: number;
+  bounds?: Bounds;
+  category?: string;
   page?: number;
   limit?: number;
 }
 
+export interface Bounds {
+  northEast: Coordinate;
+  southWest: Coordinate;
+}
+
+export interface Coordinate {
+  lat: number;
+  lon: number;
+}
+
 interface GetAirportProps {
   icao: string;
 }
@@ -19,16 +27,19 @@ export async function getAirport({ icao }: GetAirportProps) {
   return response?.data;
 }
 
-export async function getAirports({
-  ne_lat,
-  ne_lon,
-  sw_lat,
-  sw_lon,
-  limit = 10,
-  page = 1
-}: GetAirportsProps): Promise<Airport[]> {
+export async function getAirports({ bounds, category, limit = 10, page = 1 }: GetAirportsProps): Promise<Airport[]> {
   const response = await axios
-    .get(`http://localhost:5000/airports`, { params: { ne_lat, ne_lon, sw_lat, sw_lon, limit, page } })
+    .get(`http://localhost:5000/airports`, {
+      params: {
+        ne_lat: bounds?.northEast.lat,
+        ne_lon: bounds?.northEast.lon,
+        sw_lat: bounds?.southWest.lat,
+        sw_lon: bounds?.southWest.lon,
+        category,
+        limit,
+        page
+      }
+    })
     .catch((error) => console.error(error));
   return response?.data || [];
 }

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

@@ -1,8 +1,14 @@
 import { Metar } from './metar.types';
 
+export enum AirportCategory {
+  SMALL = 'small_airport',
+  MEDIUM = 'medium_airport',
+  LARGE = 'large_airport'
+}
+
 export interface Airport {
   icao: string;
-  category: string;
+  category: AirportCategory;
   full_name: string;
   elevation_ft: string;
   continent: string;