updating api formats

weather-ui/src/app/_components/Metars/MapTiles.tsx

@@ -118,7 +118,15 @@ export default function MapTiles() {
           position={[airport.point.y, airport.point.x]}
           icon={icon(airport)}
           eventHandlers={{
-            click: () => handleOpen(airport)
+            click: () => {
+              mapEvents.eachLayer((l) => {
+                if (l.getTooltip() && l.isTooltipOpen()) {
+                  console.log('l', l);
+                  l.closeTooltip();
+                }
+              });
+              handleOpen(airport);
+            }
           }}
         >
           {!isOpen && (

weather-ui/src/app/_components/Metars/MetarDialog.tsx

@@ -36,12 +36,16 @@ export default function MetarDialog({ airport, isOpen, onClose }: MetarDialogPro
   }
 
   function windColor(metar: Metar | undefined) {
-    if (Number(metar?.wind_speed_kt) <= 9) {
-      return 'bg-green-300';
-    } else if (Number(metar?.wind_speed_kt) > 9) {
-      return 'bg-orange-300';
-    } else if (Number(metar?.wind_speed_kt) > 12) {
-      return 'bg-red-300';
+    if (metar) {
+      if (Number(metar.wind_speed_kt) <= 9) {
+        return 'bg-green-300';
+      } else if (Number(metar.wind_speed_kt) <= 12) {
+        return 'bg-orange-300';
+      } else {
+        return 'bg-red-300';
+      }
+    } else {
+      return 'gb-gray-100';
     }
   }
   return (

weather-ui/src/app/_components/Metars/MetarMap.tsx

@@ -9,8 +9,8 @@ export default function Map({ className = '' }: { className?: string }) {
       <MapContainer
         center={[38.7209, -77.5133]}
         zoom={8}
-        maxZoom={12}
-        minZoom={1}
+        maxZoom={14} // Zoomed in
+        minZoom={3} // Zoomed out
         id='map-container'
         style={{ height: '94.5vh' }}
         className={`${className} overflow-y-hidden overflow-x-hidden`}