Updated UI with accounts and fixed routing

ui/src/components/AirportMarker.tsx

@@ -34,18 +34,18 @@ export default function AirportMarker({
   );
 }
 
-function getMarkerColor(flightCategory: 'VFR' | 'MVFR' | 'LIFR' | 'IFR' | 'UNKN'): string {
+function getMarkerInfo(flightCategory: 'VFR' | 'MVFR' | 'LIFR' | 'IFR' | 'UNKN'): [string, number] {
   switch (flightCategory) {
     case 'IFR':
-      return '#ff0100';
+      return ['#ff0100', 5];
     case 'LIFR':
-      return '#7f007f';
+      return ['#7f007f', 6];
     case 'MVFR':
-      return '#00f';
+      return ['#00f', 7];
     case 'VFR':
-      return '#018000';
+      return ['#018000', 8];
     case 'UNKN':
-      return '#696969';
+      return ['#696969', 4];
   }
 }
 
@@ -61,7 +61,8 @@ function createCustomIcon(airport: Airport): L.DivIcon {
           background-color: white;
           display: flex;
           align-items: center;
-          justify-content: center;">
+          justify-content: center;
+          z-index: {info[1]}">
           <span style="color: black; font-size: 8px; font-weight: bold;">H</span>
         </div>
       `,
@@ -72,15 +73,16 @@ function createCustomIcon(airport: Airport): L.DivIcon {
   } else {
     // Default to a filled circle.
     const flightCategory = airport.latest_metar?.flight_category || 'UNKN';
-    const color = getMarkerColor(flightCategory);
+    const info = getMarkerInfo(flightCategory);
     if (flightCategory == 'UNKN') {
       return L.divIcon({
         html: `
         <div style="
-          background-color: ${color};
+          background-color: ${info[0]};
           width: 10px;
           height: 10px;
-          border-radius: 50%;">
+          border-radius: 50%;
+          z-index: {info[1]}">
         </div>
       `,
         className: '',
@@ -91,11 +93,12 @@ function createCustomIcon(airport: Airport): L.DivIcon {
       return L.divIcon({
         html: `
         <div style="
-          background-color: ${color};
+          background-color: ${info[0]};
           width: 18px;
           height: 18px;
           border-radius: 50%;
-          border: 2px solid #fff;">
+          border: 2px solid #fff;
+          z-index: {info[1]}">
         </div>
       `,
         className: '',