completed Marker conflikt handler

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

@@ -37,17 +37,14 @@ export const AircraftMarker = (props: any) => {
 	);
 	const aircrafts = useAircraftsStore((state) => state.aircrafts);
 	const map = useMap();
-	const [markersAdjusted, setMarkersAdjusted] = useState(false);
 
 	const getMarkerHTML = (
 		aircraft: Aircraft,
 		anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
 	) => {
 		return `<div 
-					data-aircraft-id="${aircraft.id}"
-					id="aircraft-marker-${aircraft.id}"
 					class="${cn(
-						"aircraft-marker relative w-[140px] transform  flex items-center gap-2 px-2 z-100",
+						" relative w-[140px] transform flex items-center gap-2 px-2 z-100",
 						anchor.includes("right") && "-translate-x-full",
 						anchor.includes("bottom") && "-translate-y-full",
 					)}"
@@ -55,18 +52,18 @@ export const AircraftMarker = (props: any) => {
 						background-color: ${FMS_STATUS_COLORS[aircraft.fmsStatus]};
 						${openAircraftMarker.includes(aircraft.id) ? "opacity: 0;" : ""}
 					">
+					
 					<div 
 						class="${cn(
-							"absolute   w-4 h-4 z-99",
+							"absolute w-4 h-4 z-99",
 							anchor.includes("left") ? "-left-[2px]" : "-right-[2px]",
 							anchor.includes("top") ? "-top-[2px]" : "-bottom-[2px]",
 						)}" 
 						style="
 							${anchor.includes("left") ? `border-left: 3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};` : `border-right: 3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};`}
 							${anchor.includes("top") ? `border-top: 3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};` : `border-bottom: 3px solid ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};`}
-							
+						"
-						">
+					></div>
-					</div>
 					<span 
 						class="font-semibold text-xl"
 						style="color: ${FMS_STATUS_TEXT_COLORS[aircraft.fmsStatus]};"
@@ -76,6 +73,15 @@ export const AircraftMarker = (props: any) => {
 					<span class="text-white text-[15px]">
 						${aircraft.bosName}
 					</span>
+					<div 
+						data-aircraft-id="${aircraft.id}"
+						id="aircraft-marker-${aircraft.id}" 
+						class="${cn(
+							"aircraft-marker absolute w-[200%] h-[200%] top-0 left-0 transform",
+							anchor.includes("left") && "-translate-x-1/2",
+							anchor.includes("top") && "-translate-y-1/2",
+						)}"
+					></div>
 				</div>`;
 	};
 
@@ -110,29 +116,7 @@ export const AircraftMarker = (props: any) => {
 		>("topleft");
 
 		useEffect(() => {
-			/* const testRef = setInterval(() => {
-				positionMarker();
-			}, 1000); */
-
 			const handleZoom = () => {
-				setAnchor("topleft");
-				setMarkersAdjusted(false);
-			};
-			map.on("zoom", handleZoom);
-
-			return () => {
-				map.off("zoom", handleZoom);
-			};
-
-			/* return () => {
-				clearInterval(testRef);
-			}; */
-		}, [map]);
-
-		useEffect(() => {
-			if (markersAdjusted) return;
-			for (let i = 0; i < 3; i++) {
-				console.log(`Iteration ${i}`);
 				const otherMarkers = document.querySelectorAll(".aircraft-marker");
 				// get markers and check if they are overlapping
 				const ownMarker = document.querySelector(
@@ -141,7 +125,7 @@ export const AircraftMarker = (props: any) => {
 
 				if (!otherMarkers || !ownMarker) return;
 
-				const overlappingMarkers = Array.from(otherMarkers).filter((marker) => {
+				const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
 					// if (marker.id === `aircraft-marker-${aircraft.id}`) return false;
 					const rect1 = (marker as HTMLElement).getBoundingClientRect();
 					const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
@@ -154,7 +138,7 @@ export const AircraftMarker = (props: any) => {
 					);
 				});
 				// get the center of all overlapping markers
-				const markersPosition = overlappingMarkers.map((marker) => {
+				const markersPosition = marksersInCluster.map((marker) => {
 					const rect = (marker as HTMLElement).getBoundingClientRect();
 					return {
 						x: rect.left + rect.width / 2,
@@ -182,13 +166,8 @@ export const AircraftMarker = (props: any) => {
 						y: 0,
 					},
 				);
-				console.log(
+				if (marksersInCluster.length > 1) {
-					"overlapping markers",
+					if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
-					centerOfOverlappingMarkers,
-					ownMarkerPosition,
-				);
-				if (overlappingMarkers.length >= 1) {
-					if (centerOfOverlappingMarkers.y > ownMarkerPosition.y) {
 						if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
 							setAnchor("topright");
 						} else {
@@ -201,14 +180,17 @@ export const AircraftMarker = (props: any) => {
 							setAnchor("bottomleft");
 						}
 					}
+				} else {
+					// Default
+					setAnchor("topleft");
 				}
-				// TODO: Once markers are readjusted they dont overlap to these they did in the first iteration, but when all markers are adjusted they overlap whit ones they didnt in the first interation
+			};
-			}
+			map.on("zoom", handleZoom);
-			setMarkersAdjusted(true);
-		}, [setAnchor, setMarkersAdjusted, aircraft.id, markersAdjusted]);
-
-		// EG. if 3 markers are overlapping and they are left and right
 
+			return () => {
+				map.off("zoom", handleZoom);
+			};
+		}, [map]);
 		return (
 			<Fragment key={aircraft.id}>
 				<Marker