Working on metars, updating ui drawer

ui/src/components/AirportMarker.tsx

@@ -3,17 +3,20 @@ import { Marker, Popup } from 'react-leaflet';
 import L from 'leaflet';
 import { useRef } from 'react';
 import { getMarkerColor } from '@lib/metar.types.ts';
+import { LayerInfo } from '@/App.tsx';
 
 export default function AirportMarker({
   index,
   airport,
-  setAirport
+  setAirport,
+  selectedLayer,
 }: {
   index: number;
   airport: Airport;
   setAirport: (airport: Airport) => void;
+  selectedLayer: LayerInfo;
 }) {
-  const icon = createCustomIcon(airport);
+  const icon = createCustomIcon(airport, selectedLayer);
   const markerRef = useRef<L.Marker>(null);
 
   return (
@@ -35,7 +38,7 @@ export default function AirportMarker({
   );
 }
 
-function createCustomIcon(airport: Airport): L.DivIcon {
+function createCustomIcon(airport: Airport, selectedLayer: LayerInfo): L.DivIcon {
   if (airport.category === AirportCategory.HELIPORT) {
     return L.divIcon({
       html: `
@@ -44,7 +47,7 @@ function createCustomIcon(airport: Airport): L.DivIcon {
           height: 14px;
           border-radius: 50%;
           border: 2px solid black;
-          background-color: white;
+          background-color: ${selectedLayer.markerOutline};
           display: flex;
           align-items: center;
           justify-content: center;
@@ -83,7 +86,7 @@ function createCustomIcon(airport: Airport): L.DivIcon {
           width: 18px;
           height: 18px;
           border-radius: 50%;
-          border: 2px solid #fff;
+          border: 2px solid ${selectedLayer.markerOutline};
           z-index: {info[1]}">
         </div>
       `,