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
This commit is contained in:
Dan Albert 2022-03-01 23:25:02 -08:00
parent 98c36c8b03
commit 78b080063e

View File

@ -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 />
<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>
);
}