Fixed marker-cluster position

apps/dispatch/app/_components/SmartPopup.tsx

@@ -26,7 +26,6 @@ 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 =
@@ -52,8 +51,6 @@ 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();

apps/dispatch/app/_store/missionsStore.ts

@@ -3,6 +3,7 @@ import { MissionOptionalDefaults } from "@repo/db/zod";
 import { serverApi } from "helpers/axios";
 import { create } from "zustand";
 import { toast } from "react-hot-toast";
+import axios from "axios";
 
 interface MissionStore {
 	missions: Mission[];
@@ -17,15 +18,8 @@ export const useMissionsStore = create<MissionStore>((set) => ({
 	missions: [],
 	setMissions: (missions) => set({ missions }),
 	createMission: async (mission) => {
-		const res = await fetch("/api/mission", {
-			method: "PUT",
-			headers: {
-				"Content-Type": "application/json",
-			},
-			body: JSON.stringify(mission),
-		});
-		if (!res.ok) return new Error("Failed to create mission");
-		const data = await res.json();
+		const { data } = await serverApi.put<Mission>("/mission", mission);
+
 		set((state) => ({ missions: [...state.missions, data] }));
 		return data;
 	},

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

@@ -224,7 +224,6 @@ const AircraftPopupContent = ({ aircraft }: { aircraft: Aircraft }) => {
 };
 
 const AircraftMarker = ({ aircraft }: { aircraft: Aircraft }) => {
-	const aircrafts = useAircraftsStore((state) => state.aircrafts);
 	const [hideMarker, setHideMarker] = useState(false);
 	const map = useMap();
 	const markerRef = useRef<LMarker>(null);

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

@@ -216,36 +216,34 @@ export const MarkerCluster = () => {
 				}
 			});
 
-			setCluster((prev) => {
-				return prev.map((c) => {
-					const aircraftPos = c.aircrafts.map((a) => [
-						a.location.lat,
-						a.location.lng,
-					]);
-					const missionPos = c.missions.map((m) => [
-						m.addressLat,
-						m.addressLng,
-					]);
-					const allPos = [...aircraftPos, ...missionPos];
+			const clusterWithAvgPos = newCluster.map((c) => {
+				const aircraftPos = c.aircrafts.map((a) => [
+					a.location.lat,
+					a.location.lng,
+				]);
+				const missionPos = c.missions.map((m) => [m.addressLat, m.addressLng]);
+				const allPos = [...aircraftPos, ...missionPos];
 
-					// Calculate the average position of all markers in the cluster
-					const avgLat =
-						allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
-					const avgLng =
-						allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
+				// Calculate the average position of all markers in the cluster
 
-					return {
-						...c,
-						lat: avgLat,
-						lng: avgLng,
-					};
-				});
+				const avgLat =
+					allPos.reduce((sum, pos) => sum + pos[0]!, 0) / allPos.length;
+				const avgLng =
+					allPos.reduce((sum, pos) => sum + pos[1]!, 0) / allPos.length;
+
+				console.log(allPos, { avgLat, avgLng });
+
+				return {
+					...c,
+					lat: avgLat,
+					lng: avgLng,
+				};
 			});
 
 			if (zoom >= 9) {
 				setCluster([]);
 			} else {
-				setCluster(newCluster);
+				setCluster(clusterWithAvgPos);
 			}
 		};
 		handleZoom();