58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
"use client";
|
|
import "leaflet/dist/leaflet.css";
|
|
import "./mapStyles.css";
|
|
import { useMapStore } from "_store/mapStore";
|
|
import { MapContainer } from "react-leaflet";
|
|
import { BaseMaps } from "_components/map/BaseMaps";
|
|
import { ContextMenu } from "_components/map/ContextMenu";
|
|
import { MissionLayer } from "_components/map/MissionMarkers";
|
|
import { SearchElements } from "_components/map/SearchElements";
|
|
import { AircraftLayer } from "_components/map/AircraftMarker";
|
|
import { MarkerCluster } from "_components/map/_components/MarkerCluster";
|
|
import { useEffect, useRef } from "react";
|
|
import { Map as TMap } from "leaflet";
|
|
import { DistanceLayer } from "_components/map/Measurement";
|
|
import { MapAdditionals } from "_components/map/MapAdditionals";
|
|
|
|
const Map = () => {
|
|
const ref = useRef<TMap | null>(null);
|
|
const { map, setMap } = useMapStore();
|
|
useEffect(() => {
|
|
// Sync map zoom and center with the map store
|
|
if (ref.current) {
|
|
ref.current.setView(map.center, map.zoom);
|
|
}
|
|
}, [map, setMap]);
|
|
|
|
useEffect(() => {
|
|
if (ref.current) {
|
|
const center = ref.current?.getCenter();
|
|
const zoom = ref.current?.getZoom();
|
|
if (!center.equals(map.center) || zoom !== map.zoom) {
|
|
ref.current.setView(map.center, map.zoom);
|
|
}
|
|
}
|
|
}, [map.center, map.zoom]);
|
|
|
|
return (
|
|
<MapContainer
|
|
ref={ref}
|
|
className="flex-1 bg-base-200"
|
|
center={map.center}
|
|
zoom={map.zoom}
|
|
fadeAnimation={false}
|
|
>
|
|
<BaseMaps />
|
|
<SearchElements />
|
|
<ContextMenu />
|
|
<MarkerCluster />
|
|
<MissionLayer />
|
|
<AircraftLayer />
|
|
<DistanceLayer />
|
|
<MapAdditionals />
|
|
</MapContainer>
|
|
);
|
|
};
|
|
|
|
export default Map;
|