Fixed Marker collision

apps/dispatch/app/_components/SmartPopup.tsx

@@ -24,7 +24,7 @@ export const useSmartPopup = () => {
 export const calculateAnchor = (
 	id: string,
 	mode: "popup" | "marker",
-	ignoreMarker?: boolean,
+	options?: { ignoreMarker?: boolean; ignoreCluster?: boolean },
 ) => {
 	const otherMarkers = document.querySelectorAll(".map-collision");
 	// get markers and check if they are overlapping
@@ -37,7 +37,8 @@ export const calculateAnchor = (
 
 	const marksersInCluster = Array.from(otherMarkers).filter((marker) => {
 		if (mode === "popup" && marker.id === `marker-${id}`) return false;
-		if (ignoreMarker && marker.id.startsWith("marker")) return false;
+		if (options?.ignoreMarker && marker.id.startsWith("marker")) return false;
+		if (options?.ignoreCluster && marker.id.startsWith("cluster")) return false;
 
 		const rect1 = (marker as HTMLElement).getBoundingClientRect();
 		const rect2 = (ownMarker as HTMLElement).getBoundingClientRect();
@@ -76,12 +77,6 @@ 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) {
@@ -107,24 +102,25 @@ export interface SmartPopupRef {
 }
 
 export const SmartPopup = (
-	props: PopupProps & { ignoreMarker?: boolean } & RefAttributes<LPopup> & {
+	props: PopupProps & {
+		options?: { ignoreMarker?: boolean; ignoreCluster?: boolean };
+	} & RefAttributes<LPopup> & {
 			smartPopupRef?: Ref<SmartPopupRef>;
 			id: string;
 			wrapperClassName?: string;
 		},
 ) => {
 	const [showContent, setShowContent] = useState(false);
-	const { smartPopupRef, id, className, wrapperClassName, ignoreMarker } =
-		props;
+	const { smartPopupRef, id, className, wrapperClassName, options } = props;
 
 	const [anchor, setAnchor] = useState<
 		"topleft" | "topright" | "bottomleft" | "bottomright"
 	>("topleft");
 
 	const handleConflict = useCallback(() => {
-		const newAnchor = calculateAnchor(id, "popup", ignoreMarker);
+		const newAnchor = calculateAnchor(id, "popup", options);
 		setAnchor(newAnchor);
-	}, [id, ignoreMarker]);
+	}, [id, options]);
 
 	useImperativeHandle(smartPopupRef, () => ({
 		handleConflict,

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

@@ -356,6 +356,9 @@ const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
 			/>
 			{openAircraftMarker.some((m) => m.id === aircraft.id) && !hideMarker && (
 				<SmartPopup
+					options={{
+						ignoreCluster: true,
+					}}
 					id={`aircraft-${aircraft.id}`}
 					ref={popupRef}
 					position={[aircraft.location.lat, aircraft.location.lng]}

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

@@ -342,6 +342,9 @@ const MissionMarker = ({ mission }: { mission: Mission }) => {
 			/>
 			{openMissionMarker.some((m) => m.id === mission.id) && !hideMarker && (
 				<SmartPopup
+					options={{
+						ignoreCluster: true,
+					}}
 					id={`cluster-${mission.id.toString()}`}
 					ref={popupRef}
 					position={[mission.addressLat, mission.addressLng]}

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

@@ -258,7 +258,9 @@ export const MarkerCluster = () => {
 		<>
 			{cluster.map((c, i) => (
 				<SmartPopup
-					ignoreMarker
+					options={{
+						ignoreMarker: true,
+					}}
 					id={`cluster-${i}`}
 					wrapperClassName="relative"
 					key={i}