Draw aircraft locations in the new map.

https://github.com/dcs-liberation/dcs_liberation/issues/2039

client/src/components/aircraft/Aircraft.tsx

@@ -0,0 +1,32 @@
+import { Flight } from "../../api/flight";
+import { Icon, Point } from "leaflet";
+import { Symbol } from "milsymbol";
+import { Marker } from "react-leaflet";
+
+function iconForFlight(flight: Flight) {
+  const symbol = new Symbol(flight.sidc, {
+    size: 16,
+  });
+
+  return new Icon({
+    iconUrl: symbol.toDataURL(),
+    iconAnchor: new Point(symbol.getAnchor().x, symbol.getAnchor().y),
+  });
+}
+
+interface AircraftProps {
+  flight: Flight;
+}
+
+export default function Aircraft(props: AircraftProps) {
+  if (!props.flight.position) {
+    return <></>;
+  }
+
+  return (
+    <Marker
+      position={props.flight.position}
+      icon={iconForFlight(props.flight)}
+    />
+  );
+}

client/src/components/aircraft/index.ts

@@ -0,0 +1 @@
+export { default } from "./Aircraft";

client/src/components/aircraftlayer/AircraftLayer.tsx

@@ -0,0 +1,18 @@
+import { selectFlights } from "../../api/flightsSlice";
+import { useAppSelector } from "../../app/hooks";
+import Aircraft from "../aircraft";
+import { LayerGroup } from "react-leaflet";
+
+export default function AircraftLayer() {
+  const atos = useAppSelector(selectFlights);
+  return (
+    <LayerGroup>
+      {Object.values(atos.blue).map((flight) => {
+        return <Aircraft key={flight.id} flight={flight} />;
+      })}
+      {Object.values(atos.red).map((flight) => {
+        return <Aircraft key={flight.id} flight={flight} />;
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/aircraftlayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./AircraftLayer";

client/src/components/liberationmap/LiberationMap.tsx

@@ -1,3 +1,4 @@
+import AircraftLayer from "../aircraftlayer";
 import AirDefenseRangeLayer from "../airdefenserangelayer";
 import ControlPointsLayer from "../controlpointslayer";
 import FlightPlansLayer from "../flightplanslayer";
@@ -30,6 +31,9 @@ export default function LiberationMap(props: GameProps) {
         <LayersControl.Overlay name="Control points" checked>
           <ControlPointsLayer />
         </LayersControl.Overlay>
+        <LayersControl.Overlay name="Aircraft" checked>
+          <AircraftLayer />
+        </LayersControl.Overlay>
         <LayersControl.Overlay name="Air defenses" checked>
           <TgosLayer categories={["aa"]} />
         </LayersControl.Overlay>