Add threat zone support to the new map.

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

client/src/components/liberationmap/LiberationMap.tsx

@@ -8,6 +8,11 @@ import FlightPlansLayer from "../flightplanslayer";
 import FrontLinesLayer from "../frontlineslayer";
 import SupplyRoutesLayer from "../supplyrouteslayer";
 import TgosLayer from "../tgoslayer/TgosLayer";
+import { CoalitionThreatZones } from "../threatzones";
+import {
+  ThreatZonesLayer,
+  ThreatZoneFilter,
+} from "../threatzones/ThreatZonesLayer";
 import "./LiberationMap.css";
 import { Map } from "leaflet";
 import { useEffect, useRef } from "react";
@@ -83,6 +88,10 @@ export default function LiberationMap() {
           <FlightPlansLayer blue={false} />
         </LayersControl.Overlay>
       </LayersControl>
+      <LayersControl position="topleft">
+        <CoalitionThreatZones blue={true} />
+        <CoalitionThreatZones blue={false} />
+      </LayersControl>
     </MapContainer>
   );
 }

client/src/components/threatzones/CoalitionThreatZones.tsx

@@ -0,0 +1,35 @@
+import { ThreatZoneFilter, ThreatZonesLayer } from "./ThreatZonesLayer";
+import { LayersControl } from "react-leaflet";
+
+interface CoalitionThreatZonesProps {
+  blue: boolean;
+}
+
+export function CoalitionThreatZones(props: CoalitionThreatZonesProps) {
+  const color = props.blue ? "Blue" : "Red";
+  return (
+    <>
+      <LayersControl.Overlay name={`${color} threat zones: full`}>
+        <ThreatZonesLayer blue={props.blue} filter={ThreatZoneFilter.FULL} />
+      </LayersControl.Overlay>
+      <LayersControl.Overlay name={`${color} threat zones: aircraft`}>
+        <ThreatZonesLayer
+          blue={props.blue}
+          filter={ThreatZoneFilter.AIRCRAFT}
+        />
+      </LayersControl.Overlay>
+      <LayersControl.Overlay name={`${color} threat zones: air defenses`}>
+        <ThreatZonesLayer
+          blue={props.blue}
+          filter={ThreatZoneFilter.AIR_DEFENSES}
+        />
+      </LayersControl.Overlay>
+      <LayersControl.Overlay name={`${color} threat zones: radar SAMs`}>
+        <ThreatZonesLayer
+          blue={props.blue}
+          filter={ThreatZoneFilter.RADAR_SAMS}
+        />
+      </LayersControl.Overlay>
+    </>
+  );
+}

client/src/components/threatzones/ThreatZone.tsx

@@ -0,0 +1,24 @@
+import { LatLng } from "leaflet";
+import { Polygon } from "react-leaflet";
+
+interface ThreatZoneProps {
+  poly: number[][];
+  blue: boolean;
+}
+
+export default function ThreatZone(props: ThreatZoneProps) {
+  const color = props.blue ? "#0084ff" : "#c85050";
+  // TODO: Fix response model so the type can be used directly.
+  const positions = props.poly.map(([lat, lng]) => new LatLng(lat, lng));
+  return (
+    <Polygon
+      positions={positions}
+      color={color}
+      weight={1}
+      fill
+      fillOpacity={0.4}
+      noClip
+      interactive={false}
+    />
+  );
+}

client/src/components/threatzones/ThreatZonesLayer.tsx

@@ -0,0 +1,43 @@
+import { selectThreatZones } from "../../api/threatZonesSlice";
+import { useAppSelector } from "../../app/hooks";
+import ThreatZone from "./ThreatZone";
+import { LayerGroup } from "react-leaflet";
+
+export enum ThreatZoneFilter {
+  FULL,
+  AIRCRAFT,
+  AIR_DEFENSES,
+  RADAR_SAMS,
+}
+
+interface ThreatZonesLayerProps {
+  blue: boolean;
+  filter: ThreatZoneFilter;
+}
+
+export function ThreatZonesLayer(props: ThreatZonesLayerProps) {
+  const allZones = useAppSelector(selectThreatZones).zones;
+  const zones = props.blue ? allZones.blue : allZones.red;
+  var filtered;
+  switch (props.filter) {
+    case ThreatZoneFilter.FULL:
+      filtered = zones.full;
+      break;
+    case ThreatZoneFilter.AIRCRAFT:
+      filtered = zones.aircraft;
+      break;
+    case ThreatZoneFilter.AIR_DEFENSES:
+      filtered = zones.air_defenses;
+      break;
+    case ThreatZoneFilter.RADAR_SAMS:
+      filtered = zones.radar_sams;
+      break;
+  }
+  return (
+    <LayerGroup>
+      {filtered.map((poly, idx) => (
+        <ThreatZone key={idx} poly={poly} blue={props.blue} />
+      ))}
+    </LayerGroup>
+  );
+}

client/src/components/threatzones/index.ts

@@ -0,0 +1,2 @@
+export { ThreatZonesLayer, ThreatZoneFilter } from "./ThreatZonesLayer";
+export { CoalitionThreatZones } from "./CoalitionThreatZones";