added Callback and custon notification Toast, client notification event handler

apps/dispatch/app/_components/map/Map.tsx

@@ -0,0 +1,78 @@
+"use client";
+import "leaflet/dist/leaflet.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";
+
+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);
+			/* ref.current.on("moveend", () => {
+				const center = ref.current?.getCenter();
+				const zoom = ref.current?.getZoom();
+				if (center && zoom) {
+					setMap({
+						center: [center.lat, center.lng],
+						zoom,
+					});
+				}
+			});
+			ref.current.on("zoomend", () => {
+				const zoom = ref.current?.getZoom();
+				const center = ref.current?.getCenter();
+
+				if (zoom && center) {
+					setMap({
+						center,
+						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"
+			center={map.center}
+			zoom={map.zoom}
+			fadeAnimation={false}
+		>
+			<BaseMaps />
+			<SearchElements />
+			<ContextMenu />
+			<MarkerCluster />
+			<MissionLayer />
+			<AircraftLayer />
+		</MapContainer>
+	);
+};
+
+export default Map;