did something with markers

apps/dispatch/app/_components/SmartPopup.tsx

@@ -58,6 +58,7 @@ export const calculateAnchor = (
 			y: rect.top + rect.height / 2,
 		};
 	});
+
 	const ownMarkerBounds = (ownMarker as HTMLElement).getBoundingClientRect();
 	const ownMarkerPosition = {
 		x: ownMarkerBounds.left + ownMarkerBounds.width / 2,
@@ -75,6 +76,12 @@ export const calculateAnchor = (
 	centerOfOverlappingMarkers.x /= markersPosition.length;
 	centerOfOverlappingMarkers.y /= markersPosition.length;
 
+	if (id == "2") {
+		console.log("markersInCluser", marksersInCluster);
+		console.log("ownMarkerPosition", ownMarkerPosition);
+		console.log("centerOfOverlappingMarkers", centerOfOverlappingMarkers);
+	}
+
 	if (marksersInCluster.length > 1) {
 		if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
 			if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {

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

@@ -281,7 +281,6 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 
 		const handleZoom = () => {
 			const zoom = map.getZoom();
-			console.log("zoom", zoom);
 			setHideMarker(zoom < 9);
 			handleConflict();
 		};
@@ -331,6 +330,8 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 						</span>
 						<div 
 							data-id="${aircraft.id}"
+							data-anchor-lat="${aircraft.location.lat}"
+							data-anchor-lng="${aircraft.location.lng}"
 							id="marker-domain-${aircraft.id}" 
 							class="${cn(
 								"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",

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

@@ -8,9 +8,7 @@ export const ContextMenu = () => {
 	const map = useMap();
 	const { contextMenu, setContextMenu, setSearchElements, setSearchPopup } =
 		useMapStore();
-	const setMissionFormValues = usePannelStore(
-		(state) => state.setMissionFormValues,
-	);
+	const { setMissionFormValues, setOpen } = usePannelStore((state) => state);
 	useEffect(() => {
 		const handleContextMenu = (e: any) => {
 			setContextMenu({ lat: e.latlng.lat, lng: e.latlng.lng });
@@ -72,7 +70,7 @@ export const ContextMenu = () => {
 							place_rank: number;
 							type: string;
 						};
-						console.log(data);
+						setOpen(true);
 						setMissionFormValues({
 							addressLat: contextMenu.lat,
 							addressLng: contextMenu.lng,

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

@@ -277,6 +277,8 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 							${mission.missionKeywordAbbreviation} ${mission.missionKeywordName}
 						</span>
 						<div 
+						data-anchor-lat="${mission.addressLat}"
+							data-anchor-lng="${mission.addressLng}"
 							data-id="${mission.id}"
 							id="marker-domain-${mission.id}" 
 							class="${cn(

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

@@ -124,9 +124,7 @@ export const MarkerCluster = () => {
 				const existingClusterIndex = newCluster.findIndex(
 					(c) => Math.abs(c.lat - lat) < 1 && Math.abs(c.lng - lng) < 1,
 				);
-				console.log("existingClusterIndex", existingClusterIndex);
 				const existingCluster = newCluster[existingClusterIndex];
-				console.log("existingCluster", existingCluster, lat, lng);
 				if (existingCluster) {
 					newCluster = [...newCluster].map((c, i) => {
 						if (i === existingClusterIndex) {
@@ -218,7 +216,6 @@ export const MarkerCluster = () => {
 			map.off("zoomend", handleZoom);
 		};
 	}, [map, aircrafts, missions]);
-	console.log("cluster", cluster);
 	return (
 		<>
 			{cluster.map((c, i) => (