Support terrain zones on the new map.

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

client/src/components/liberationmap/LiberationMap.tsx

@@ -8,6 +8,7 @@ import FlightPlansLayer from "../flightplanslayer";
 import FrontLinesLayer from "../frontlineslayer";
 import NavMeshLayer from "../navmesh/NavMeshLayer";
 import SupplyRoutesLayer from "../supplyrouteslayer";
+import TerrainZonesLayers from "../terrainzones/TerrainZonesLayers";
 import TgosLayer from "../tgoslayer/TgosLayer";
 import { CoalitionThreatZones } from "../threatzones";
 import "./LiberationMap.css";
@@ -94,6 +95,7 @@ export default function LiberationMap() {
         <LayersControl.Overlay name="Red navmesh">
           <NavMeshLayer blue={false} />
         </LayersControl.Overlay>
+        <TerrainZonesLayers />
       </LayersControl>
     </MapContainer>
   );

client/src/components/terrainzones/TerrainZonesLayers.tsx

@@ -0,0 +1,71 @@
+import { useGetTerrainZonesQuery } from "../../api/liberationApi";
+import { LatLngLiteral } from "leaflet";
+import { LayerGroup, LayersControl, Polygon } from "react-leaflet";
+
+interface TerrainZoneLayerProps {
+  zones: LatLngLiteral[][];
+  color: string;
+  fillColor: string;
+}
+
+function TerrainZoneLayer(props: TerrainZoneLayerProps) {
+  return (
+    <LayerGroup>
+      {props.zones.map((poly, idx) => {
+        return (
+          <Polygon
+            key={idx}
+            positions={poly}
+            color={props.color}
+            fillColor={props.fillColor}
+            fillOpacity={1}
+            interactive={false}
+          />
+        );
+      })}
+    </LayerGroup>
+  );
+}
+
+export default function TerrainZonesLayers() {
+  const { data, error, isLoading } = useGetTerrainZonesQuery();
+  var exclusion = <></>;
+  var inclusion = <></>;
+  var sea = <></>;
+
+  if (error) {
+    console.error("Error while loading terrain zones", error);
+  } else if (isLoading) {
+  } else if (!data) {
+    console.log("Empty response when loading terrain zones");
+  } else {
+    exclusion = (
+      <TerrainZoneLayer
+        zones={data.exclusion}
+        color="#969696"
+        fillColor="#303030"
+      />
+    );
+    inclusion = (
+      <TerrainZoneLayer
+        zones={data.inclusion}
+        color="#969696"
+        fillColor="#4b4b4b"
+      />
+    );
+    sea = (
+      <TerrainZoneLayer zones={data.sea} color="#344455" fillColor="#344455" />
+    );
+  }
+  return (
+    <>
+      <LayersControl.Overlay name="Inclusion zones">
+        {exclusion}
+      </LayersControl.Overlay>
+      <LayersControl.Overlay name="Exclusion zones">
+        {inclusion}
+      </LayersControl.Overlay>
+      <LayersControl.Overlay name="Sea zones">{sea}</LayersControl.Overlay>
+    </>
+  );
+}

client/src/components/terrainzones/index.ts

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