Working on queries to get latest metar airports first

ui/src/components/AirportMarker.tsx

@@ -2,6 +2,7 @@ import { Airport, AirportCategory } from '@lib/airport.types.ts';
 import { Marker, Popup } from 'react-leaflet';
 import L from 'leaflet';
 import { useRef } from 'react';
+import { getMarkerColor } from '@lib/metar.types.ts';
 
 export default function AirportMarker({
   index,
@@ -34,21 +35,6 @@ export default function AirportMarker({
   );
 }
 
-function getMarkerInfo(flightCategory: 'VFR' | 'MVFR' | 'LIFR' | 'IFR' | 'UNKN'): [string, number] {
-  switch (flightCategory) {
-    case 'IFR':
-      return ['#ff0100', 5];
-    case 'LIFR':
-      return ['#7f007f', 6];
-    case 'MVFR':
-      return ['#00f', 7];
-    case 'VFR':
-      return ['#018000', 8];
-    case 'UNKN':
-      return ['#696969', 4];
-  }
-}
-
 function createCustomIcon(airport: Airport): L.DivIcon {
   if (airport.category === AirportCategory.HELIPORT) {
     return L.divIcon({
@@ -73,12 +59,12 @@ function createCustomIcon(airport: Airport): L.DivIcon {
   } else {
     // Default to a filled circle.
     const flightCategory = airport.latest_metar?.flight_category || 'UNKN';
-    const info = getMarkerInfo(flightCategory);
+    const color = getMarkerColor(flightCategory);
     if (flightCategory == 'UNKN') {
       return L.divIcon({
         html: `
         <div style="
-          background-color: ${info[0]};
+          background-color: ${color};
           width: 10px;
           height: 10px;
           border-radius: 50%;
@@ -93,7 +79,7 @@ function createCustomIcon(airport: Airport): L.DivIcon {
       return L.divIcon({
         html: `
         <div style="
-          background-color: ${info[0]};
+          background-color: ${color};
           width: 18px;
           height: 18px;
           border-radius: 50%;