ea78b41510
Alarmieren aus Einsatz erstellen Maske Map-Tiles SDS sound: Status J SDS Nachricht: public-User Audio: Es kann nur ein Nutzer gleichzeitig Funken Select in Report und Chat: default value -> OnChange
60 lines
1.7 KiB
TypeScript
60 lines
1.7 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";
|
|
|
|
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(() => {
|
|
console.log("Map center or zoom changed");
|
|
|
|
if (ref.current) {
|
|
const center = ref.current?.getCenter();
|
|
const zoom = ref.current?.getZoom();
|
|
console.log("Map center or zoom changed", center.equals(map.center), zoom === map.zoom);
|
|
if (!center.equals(map.center) || zoom !== map.zoom) {
|
|
console.log("Updating map center and 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 />
|
|
</MapContainer>
|
|
);
|
|
};
|
|
|
|
export default Map;
|