From 78b080063efbcb7600a5e8271ffb8f03c98e643e Mon Sep 17 00:00:00 2001
From: Dan Albert <dan@gingerhq.net>
Date: Tue, 1 Mar 2022 23:25:02 -0800
Subject: [PATCH] Add layer control.

This isn't the grouped layer control that we have in the non-react map.
The react variant of that hasn't been updated in years and won't work
with our base maps (and may not work at all). We'll need to fix that or
write our own if we want to use that. This will do for now though.

https://github.com/dcs-liberation/dcs_liberation/issues/2039
---
 .../liberationmap/LiberationMap.tsx           | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/client/src/components/liberationmap/LiberationMap.tsx b/client/src/components/liberationmap/LiberationMap.tsx
index fa1f222f..81c010f2 100644
--- a/client/src/components/liberationmap/LiberationMap.tsx
+++ b/client/src/components/liberationmap/LiberationMap.tsx
@@ -1,6 +1,6 @@
 import "./LiberationMap.css";
 
-import { MapContainer, ScaleControl } from "react-leaflet";
+import { LayersControl, MapContainer, ScaleControl } from "react-leaflet";
 
 import { BasemapLayer } from "react-esri-leaflet";
 import ControlPointsLayer from "../controlpointslayer";
@@ -14,11 +14,23 @@ interface GameProps {
 export default function LiberationMap(props: GameProps) {
   return (
     <MapContainer zoom={8} center={props.mapCenter} zoomControl={false}>
-      <BasemapLayer name="ImageryClarity" />
       <ScaleControl />
-      <ControlPointsLayer />
-      <FlightPlansLayer blue={true} />
-      <FlightPlansLayer blue={false} />
+      <LayersControl collapsed={false}>
+        <LayersControl.BaseLayer name="Imagery Clarity" checked>
+          <BasemapLayer name="ImageryClarity" />
+        </LayersControl.BaseLayer>
+        <LayersControl.BaseLayer name="Imagery Firefly">
+          <BasemapLayer name="ImageryFirefly" />
+        </LayersControl.BaseLayer>
+        <LayersControl.BaseLayer name="Topographic">
+          <BasemapLayer name="Topographic" />
+        </LayersControl.BaseLayer>
+        <LayersControl.Overlay name="Control points" checked>
+          <ControlPointsLayer />
+        </LayersControl.Overlay>
+        <FlightPlansLayer blue={true} />
+        <FlightPlansLayer blue={false} />
+      </LayersControl>
     </MapContainer>
   );
 }