fixed border mission marker; changed type of mapStore for State management in marker

apps/dispatch/app/_components/SmartPopup.tsx

@@ -21,8 +21,8 @@ export const useConflict = (id: string, mode: "popup" | "marker") => {
 	// get markers and check if they are overlapping
 	const ownMarker =
 		mode === "popup"
-			? document.querySelector(`#popup-${id}`)
-			: document.querySelector(`#marker-${id}`);
+			? document.querySelector(`#popup-domain-${id}`)
+			: document.querySelector(`#marker-domain-${id}`);
 
 	if (!otherMarkers || !ownMarker) return "topleft";
 
@@ -55,18 +55,16 @@ export const useConflict = (id: string, mode: "popup" | "marker") => {
 	};
 
 	const centerOfOverlappingMarkers = markersPosition.reduce(
-		(acc, pos) => {
-			if (acc.x === 0 && acc.y === 0) return pos;
-			return {
-				x: (acc.x + pos.x) / 2,
-				y: (acc.y + pos.y) / 2,
-			};
-		},
-		{
-			x: 0,
-			y: 0,
-		},
+		(acc, pos) => ({
+			x: acc.x + pos.x,
+			y: acc.y + pos.y,
+		}),
+		{ x: 0, y: 0 },
 	);
+
+	centerOfOverlappingMarkers.x /= markersPosition.length;
+	centerOfOverlappingMarkers.y /= markersPosition.length;
+
 	if (marksersInCluster.length > 1) {
 		if (centerOfOverlappingMarkers.y < ownMarkerPosition.y) {
 			if (centerOfOverlappingMarkers.x > ownMarkerPosition.x) {
@@ -137,7 +135,7 @@ export const SmartPopup = (
 			>
 				<div
 					data-id={id}
-					id={`popup-${id}`}
+					id={`popup-domain-${id}`}
 					className={cn(
 						"map-collision absolute w-[200%] h-[200%] top-0 left-0 transform pointer-events-none",
 						anchor.includes("left") && "-translate-x-1/2",