apps/dispatch/app/_components/SmartPopup.tsx

@@ -26,6 +26,7 @@ export const calculateAnchor = (
 	mode: "popup" | "marker",
 	options?: { ignoreMarker?: boolean; ignoreCluster?: boolean },
 ) => {
+	console.log("calculateAnchor", id, mode, options);
 	const otherMarkers = document.querySelectorAll(".map-collision");
 	// get markers and check if they are overlapping
 	const ownMarker =
@@ -36,9 +37,9 @@ export const calculateAnchor = (
 	if (!otherMarkers || !ownMarker) return "topleft";
 
 	const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
-		if (mode === "popup" && marker.id === `marker-${id}`) return false;
+		if (mode === "popup" && marker.id === `marker-domain-${id}`) return false;
-		if (options?.ignoreMarker && marker.id.startsWith("marker")) return false;
+		if (options?.ignoreMarker && marker.id.includes("marker")) return false;
-		if (options?.ignoreCluster && marker.id.startsWith("cluster")) return false;
+		if (options?.ignoreCluster && marker.id.includes("cluster")) return false;
 
 		const rect1 = (marker as HTMLElement).getBoundingClientRect();
 		const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
@@ -51,6 +52,8 @@ export const calculateAnchor = (
 		);
 	});
 
+	if (id.includes("13")) console.log(ownMarker, marksersInCluster);
+
 	// get the center of all overlapping markers
 	const markersPosition = marksersInCluster.map((marker) => {
 		const rect = (marker as HTMLElement).getBoundingClientRect();
@@ -102,9 +105,9 @@ export interface SmartPopupRef {
 }
 
 export const SmartPopup = (
-	props: PopupProps & {
+	props: PopupProps &
-		options?: { ignoreMarker?: boolean; ignoreCluster?: boolean };
+		RefAttributes<LPopup> & {
-	} & RefAttributes<LPopup> & {
+			options?: { ignoreMarker?: boolean; ignoreCluster?: boolean };
 			smartPopupRef?: Ref<SmartPopupRef>;
 			id: string;
 			wrapperClassName?: string;

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

@@ -266,7 +266,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 	>("topleft");
 
 	const handleConflict = useCallback(() => {
-		const newAnchor = calculateAnchor(aircraft.id, "marker");
+		const newAnchor = calculateAnchor(`aircraft-${aircraft.id}`, "marker");
 		setAnchor(newAnchor);
 	}, [aircraft.id]);
 
@@ -296,7 +296,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 		anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
 	) => {
 		return `<div 
-						id="marker-${aircraft.id}"
+						id="marker-aircraft-${aircraft.id}"
 						class="${cn(
 							"relative w-auto transform inline-flex items-center gap-2 px-2 z-100",
 							anchor.includes("right") && "-translate-x-full",
@@ -332,7 +332,7 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 							data-id="${aircraft.id}"
 							data-anchor-lat="${aircraft.location.lat}"
 							data-anchor-lng="${aircraft.location.lng}"
-							id="marker-domain-${aircraft.id}" 
+							id="marker-domain-aircraft-${aircraft.id}" 
 							class="${cn(
 								"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
 								anchor.includes("left") && "-translate-x-1/2",

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

@@ -258,7 +258,10 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 	>("topleft");
 
 	const handleConflict = useCallback(() => {
-		const newAnchor = calculateAnchor(mission.id.toString(), "marker");
+		const newAnchor = calculateAnchor(
+			`mission-${mission.id.toString()}`,
+			"marker",
+		);
 		setAnchor(newAnchor);
 	}, [mission.id]);
 
@@ -288,7 +291,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 		anchor: "topleft" | "topright" | "bottomleft" | "bottomright",
 	) => {
 		return `<div 
-						id="marker-${mission.id}"
+						id="marker-mission-${mission.id}"
 						class="${cn(
 							"relative w-auto transform inline-flex items-center gap-2 px-2 z-100",
 							anchor.includes("right") && "-translate-x-full",
@@ -318,7 +321,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 						data-anchor-lat="${mission.addressLat}"
 							data-anchor-lng="${mission.addressLng}"
 							data-id="${mission.id}"
-							id="marker-domain-${mission.id}" 
+							id="marker-domain-mission-${mission.id}" 
 							class="${cn(
 								"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
 								anchor.includes("left") && "-translate-x-1/2",
@@ -345,7 +348,7 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 					options={{
 						ignoreCluster: true,
 					}}
-					id={`cluster-${mission.id.toString()}`}
+					id={`mission-${mission.id.toString()}`}
 					ref={popupRef}
 					position={[mission.addressLat, mission.addressLng]}
 					autoClose={false}