Partial implementation of TGO display.

No threat/detection circles yet.

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

client/src/components/liberationmap/LiberationMap.tsx

@@ -6,6 +6,8 @@ import { BasemapLayer } from "react-esri-leaflet";
 import ControlPointsLayer from "../controlpointslayer";
 import FlightPlansLayer from "../flightplanslayer";
 import { LatLng } from "leaflet";
+import { TgoType } from "../../api/tgo";
+import TgosLayer from "../tgoslayer/TgosLayer";
 
 interface GameProps {
   mapCenter: LatLng;
@@ -28,6 +30,13 @@ export default function LiberationMap(props: GameProps) {
         <LayersControl.Overlay name="Control points" checked>
           <ControlPointsLayer />
         </LayersControl.Overlay>
+        {Object.values(TgoType).map((type) => {
+          return (
+            <LayersControl.Overlay name={type} checked>
+              <TgosLayer type={type as TgoType} />
+            </LayersControl.Overlay>
+          );
+        })}
         <LayersControl.Overlay name="All blue flight plans" checked>
           <FlightPlansLayer blue={true} />
         </LayersControl.Overlay>

client/src/components/tgos/Tgo.tsx

@@ -0,0 +1,37 @@
+import { Icon, Point } from "leaflet";
+import { Marker, Popup } from "react-leaflet";
+
+import { Symbol as MilSymbol } from "milsymbol";
+import { Tgo as TgoModel } from "../../api/tgo";
+
+function iconForTgo(cp: TgoModel) {
+  const symbol = new MilSymbol(cp.sidc, {
+    size: 24,
+  });
+
+  return new Icon({
+    iconUrl: symbol.toDataURL(),
+    iconAnchor: new Point(symbol.getAnchor().x, symbol.getAnchor().y),
+  });
+}
+
+interface TgoProps {
+  tgo: TgoModel;
+}
+
+export default function Tgo(props: TgoProps) {
+  return (
+    <Marker position={props.tgo.position} icon={iconForTgo(props.tgo)}>
+      <Popup>
+        {`${props.tgo.name} (${props.tgo.control_point_name})`}
+        <br />
+        {props.tgo.units.map((unit) => (
+          <>
+            {unit}
+            <br />
+          </>
+        ))}
+      </Popup>
+    </Marker>
+  );
+}

client/src/components/tgos/index.ts

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

client/src/components/tgoslayer/TgosLayer.tsx

@@ -0,0 +1,22 @@
+import { LayerGroup } from "react-leaflet";
+import Tgo from "../tgos/Tgo";
+import { TgoType } from "../../api/tgo";
+import { selectTgos } from "../../api/tgosSlice";
+import { useAppSelector } from "../../app/hooks";
+
+interface TgosLayerProps {
+  type: TgoType;
+}
+
+export default function TgosLayer(props: TgosLayerProps) {
+  const allTgos = useAppSelector(selectTgos);
+  const tgos = allTgos.tgosByType[props.type];
+  console.dir(Object.entries(TgoType));
+  return (
+    <LayerGroup>
+      {tgos.map((tgo) => {
+        return <Tgo key={tgo.name} tgo={tgo} />;
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/tgoslayer/index.ts

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