chore: alle Panels zu den selben Position bringen

components/mainComponent/MapComponent.js

@@ -165,7 +165,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
   const [showPopup, setShowPopup] = useState(false);
-  const [showAreaDropdown, setShowAreaDropdown] = useState(false);
+  const [showAreaDropdown, setShowAreaDropdown] = useState(() => {
+    try {
+      const v = localStorage.getItem("showAreaDropdown");
+      return v === null ? false : v === "true";
+    } catch (_) {
+      return false;
+    }
+  });
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
   const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
   const [map, setMap] = useState(null); // Zustand der Karteninstanz
@@ -199,6 +206,29 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     }
   });
 
+  // Zentrale Steuerung: Nur ein Overlay gleichzeitig
+  // Mögliche Werte: null | 'area' | 'layers' | 'coord' | 'info'
+  const [overlay, setOverlay] = useState(null);
+
+  // Initiale Bestimmung des aktiven Overlays basierend auf bestehenden Flags
+  useEffect(() => {
+    if (showAreaDropdown) setOverlay("area");
+    else if (showLayersPanel) setOverlay("layers");
+    else if (showCoordinateInput) setOverlay("coord");
+    else if (showAppInfoCard) setOverlay("info");
+    else setOverlay(null);
+    // nur beim Mount ausführen
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Flags mit Overlay-State synchronisieren (persistiert weiterhin in bestehenden Effects)
+  useEffect(() => {
+    setShowAreaDropdown(overlay === "area");
+    setShowLayersPanel(overlay === "layers");
+    setShowCoordinateInput(overlay === "coord");
+    setShowAppInfoCard(overlay === "info");
+  }, [overlay]);
+
   // Flag, ob Nutzer die Polyline-Checkbox manuell betätigt hat
   // Nutzer-Flag global auf window, damit auch Redux darauf zugreifen kann
   if (typeof window !== "undefined" && window.userToggledPolyline === undefined) {
@@ -270,6 +300,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       localStorage.setItem("showAppInfoCard", String(showAppInfoCard));
     } catch (_) {}
   }, [showAppInfoCard]);
+  // Persistiere Sichtbarkeit des Area-Dropdowns (Marker-Overlay)
+  useEffect(() => {
+    try {
+      localStorage.setItem("showAreaDropdown", String(showAreaDropdown));
+    } catch (_) {}
+  }, [showAreaDropdown]);
   // Persistiere Sichtbarkeit des Layer-Panels
   useEffect(() => {
     try {
@@ -1160,23 +1196,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         )}
         {/* Marker-Icon (line-md) */}
         <button
-          onClick={() =>
-            setShowAreaDropdown(v => {
-              const next = !v;
-              if (next) setShowLayersPanel(false); // Dropdown öffnen -> Panel schließen
-              return next;
-            })
-          }
+          onClick={() => setOverlay(prev => (prev === "area" ? null : "area"))}
           aria-label="Marker"
           className="rounded-full bg-white/90 hover:bg-white shadow p-1"
           title="Marker"
         >
           <MapMarkerIcon className="h-8 w-8" />
         </button>
-        {showAreaDropdown && <AreaDropdown onClose={() => setShowAreaDropdown(false)} />}
+        {overlay === "area" && <AreaDropdown onClose={() => setOverlay(null)} />}
         {/*Lupe: Koordinatensuche ein-/ausblenden */}
         <button
-          onClick={() => setShowCoordinateInput(v => !v)}
+          onClick={() => setOverlay(prev => (prev === "coord" ? null : "coord"))}
           aria-label={
             showCoordinateInput ? "Koordinatensuche ausblenden" : "Koordinatensuche einblenden"
           }
@@ -1217,13 +1247,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         </button>
         {/* Lupe: Koordinaten-Suche ein-/ausblenden */}
         <button
-          onClick={() =>
-            setShowLayersPanel(v => {
-              const next = !v;
-              if (next) setShowAreaDropdown(false); // Panel öffnen -> Dropdown schließen
-              return next;
-            })
-          }
+          onClick={() => setOverlay(prev => (prev === "layers" ? null : "layers"))}
           aria-label={showLayersPanel ? "Layer-Panel ausblenden" : "Layer-Panel einblenden"}
           className="rounded-full bg-white/90 hover:bg-white shadow p-1"
           title={showLayersPanel ? "Layer-Panel ausblenden" : "Layer-Panel einblenden"}
@@ -1232,7 +1256,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         </button>
 
         <button
-          onClick={() => setShowAppInfoCard(v => !v)}
+          onClick={() => setOverlay(prev => (prev === "info" ? null : "info"))}
           aria-label={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
           className="rounded-full bg-white/90 hover:bg-white shadow p-1"
           title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
@@ -1247,7 +1271,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       <CoordinatePopup isOpen={isPopupOpen} coordinates={currentCoordinates} onClose={closePopup} />
 
       {showAppInfoCard && (
-        <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
+        <div className="absolute top-16 right-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
           <div className="flex justify-between items-center">
             <div>
               <span className="text-black text-lg font-semibold"> TALAS.Map </span>