resolves #103

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

@@ -122,7 +122,7 @@ const HeliportsLayer = () => {
 		};
 
 		const filterVisibleHeliports = () => {
-			const bounds = map.getBounds();
+			const bounds = map?.getBounds();
 			if (!heliports?.length) return;
 			// Filtere die Heliports, die innerhalb der Kartenansicht liegen
 			const visibleHeliports = heliports.filter((heliport) => {

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

@@ -12,6 +12,7 @@ import { useDispatchConnectionStore } from "_store/dispatch/connectionStore";
 export const MapAdditionals = () => {
 	const { isOpen, missionFormValues } = usePannelStore((state) => state);
 	const dispatcherConnectionState = useDispatchConnectionStore((state) => state.status);
+
 	const { data: missions = [] } = useQuery({
 		queryKey: ["missions"],
 		queryFn: () =>
@@ -35,7 +36,8 @@ export const MapAdditionals = () => {
 			m.state === "draft" &&
 			m.hpgLocationLat &&
 			dispatcherConnectionState === "connected" &&
-			m.hpgLocationLng,
+			m.hpgLocationLng &&
+			mapStore.openMissionMarker.find((openMission) => openMission.id === m.id),
 	);
 
 	return (
@@ -56,7 +58,7 @@ export const MapAdditionals = () => {
 					key={mission.id}
 					position={[mission.hpgLocationLat!, mission.hpgLocationLng!]}
 					icon={L.icon({
-						iconUrl: "/icons/mapMarker.png",
+						iconUrl: "/icons/mapMarkerAttention.png",
 						iconSize: [40, 40],
 						iconAnchor: [20, 35],
 					})}

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

@@ -23,7 +23,7 @@ export const MISSION_STATUS_COLORS: Record<MissionState | "attention", string> =
 	draft: "#0092b8",
 	running: "#155dfc",
 	finished: "#155dfc",
-	attention: "rgb(186,105,0)",
+	attention: "#ba6900",
 };
 
 export const MISSION_STATUS_TEXT_COLORS: Record<MissionState, string> = {