feat: Icons

components/mainComponent/MapComponent.js

@@ -24,6 +24,7 @@ import { useMapComponentState } from "@/components/hooks/useMapComponentState.js
 import CoordinatePopup from "@/components/contextmenu/CoordinatePopup.js";
 //----------Ui Widgets----------------
 import MapLayersControlPanel from "@/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
+import BaseMapPanel from "@/components/uiWidgets/baseMapPanel/BaseMapPanel.js";
 import CoordinateInput from "@/components/uiWidgets/CoordinateInput.js";
 import VersionInfoModal from "@/components/uiWidgets/VersionInfoModal.js";
 //----------Daten aus API--------------------
@@ -171,6 +172,24 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       return true;
     }
   });
+  // Sichtbarkeit des Base-Map Panels (oben rechts, unter Toolbar)
+  const [showBaseMapPanel, setShowBaseMapPanel] = useState(() => {
+    try {
+      const v = localStorage.getItem("showBaseMapPanel");
+      return v === null ? false : v === "true";
+    } catch (_) {
+      return false;
+    }
+  });
+  // Sichtbarkeit der Koordinaten-Suche (Lupe)
+  const [showCoordinateInput, setShowCoordinateInput] = useState(() => {
+    try {
+      const v = localStorage.getItem("showCoordinateInput");
+      return v === null ? false : v === "true";
+    } catch (_) {
+      return false;
+    }
+  });
 
   // Flag, ob Nutzer die Polyline-Checkbox manuell betätigt hat
   // Nutzer-Flag global auf window, damit auch Redux darauf zugreifen kann
@@ -249,6 +268,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       localStorage.setItem("showLayersPanel", String(showLayersPanel));
     } catch (_) {}
   }, [showLayersPanel]);
+  // Persistiere Sichtbarkeit des Base-Map Panels
+  useEffect(() => {
+    try {
+      localStorage.setItem("showBaseMapPanel", String(showBaseMapPanel));
+    } catch (_) {}
+  }, [showBaseMapPanel]);
+  // Persistiere Sichtbarkeit der Koordinaten-Suche
+  useEffect(() => {
+    try {
+      localStorage.setItem("showCoordinateInput", String(showCoordinateInput));
+    } catch (_) {}
+  }, [showCoordinateInput]);
 
   //--------------------------------------------
 
@@ -1108,38 +1139,10 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           />
         )}
 
-      <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
+      {showCoordinateInput && <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />}
       <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
-      {/* Top-right controls: info toggle + hamburger (layers) */}
+      {/* Top-right controls: layers, info, expand, edit, and base map stack */}
       <div className="absolute top-3 right-3 z-50 pointer-events-auto flex items-center gap-2">
-        <button
-          onClick={() => setShowLayersPanel(v => !v)}
-          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"}
-        >
-          <Icon icon="material-symbols:menu-rounded" className="h-8 w-8 text-blue-900" />
-        </button>
-        <button
-          onClick={() => setShowAppInfoCard(v => !v)}
-          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"}
-        >
-          <Icon
-            icon="material-symbols:info-rounded"
-            className="text-blue-900 h-8 w-8 pr-1"
-            title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
-          />
-        </button>
-        <button
-          onClick={handleExpandClick}
-          aria-label="Karte auf Standardansicht"
-          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
-          title="Karte auf Standardansicht"
-        >
-          <img src="/img/expand-icon.svg" alt="Expand" className="h-8 w-8" />
-        </button>
         <button
           onClick={toggleEditMode}
           aria-label={editMode ? "Bearbeitungsmodus deaktivieren" : "Bearbeitungsmodus aktivieren"}
@@ -1162,7 +1165,79 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
             className="h-8 w-8 text-blue-900"
           />
         </button>
+        <button
+          onClick={handleExpandClick}
+          aria-label="Karte auf Standardansicht"
+          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
+          title="Karte auf Standardansicht"
+        >
+          <img src="/img/expand-icon.svg" alt="Expand" className="h-8 w-8" />
+        </button>
+        <button
+          onClick={() => setShowBaseMapPanel(v => !v)}
+          aria-label={
+            showBaseMapPanel ? "Kartenhintergrund ausblenden" : "Kartenhintergrund wählen"
+          }
+          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
+          title={showBaseMapPanel ? "Kartenhintergrund ausblenden" : "Kartenhintergrund wählen"}
+        >
+          <Icon icon="material-symbols:layers-rounded" className="h-8 w-8 text-blue-900" />
+        </button>
+        <button
+          onClick={() => setShowLayersPanel(v => !v)}
+          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"}
+        >
+          <Icon icon="material-symbols:menu-rounded" className="h-8 w-8 text-blue-900" />
+        </button>
+        {/* Lupe: Koordinaten-Suche ein-/ausblenden */}
+        <button
+          onClick={() => setShowCoordinateInput(v => !v)}
+          aria-label={
+            showCoordinateInput ? "Koordinatensuche ausblenden" : "Koordinatensuche einblenden"
+          }
+          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
+          title={
+            showCoordinateInput ? "Koordinatensuche ausblenden" : "Koordinatensuche einblenden"
+          }
+        >
+          <Icon icon="material-symbols:search-rounded" className="h-8 w-8 text-blue-900" />
+        </button>
+        {/* Marker-Icon (line-md) */}
+        <button
+          onClick={() => {}}
+          aria-label="Marker"
+          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
+          title="Marker"
+        >
+          <Icon icon="line-md:map-marker-filled" className="h-8 w-8 text-blue-900" />
+        </button>
+        {/* Alarm-Icon (mdi) */}
+        <button
+          onClick={() => {}}
+          aria-label="Alarm"
+          className="rounded-full bg-white/90 hover:bg-white shadow p-1"
+          title="Alarm"
+        >
+          <Icon icon="mdi:alarm-light-outline" className="h-8 w-8 text-blue-900" />
+        </button>
+        <button
+          onClick={() => setShowAppInfoCard(v => !v)}
+          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"}
+        >
+          <Icon
+            icon="material-symbols:info-rounded"
+            className="text-blue-900 h-8 w-8 pr-1"
+            title={showAppInfoCard ? "Info ausblenden" : "Info einblenden"}
+          />
+        </button>
       </div>
+      {showBaseMapPanel && map && (
+        <BaseMapPanel map={map} onClose={() => setShowBaseMapPanel(false)} />
+      )}
       <CoordinatePopup isOpen={isPopupOpen} coordinates={currentCoordinates} onClose={closePopup} />
 
       {showAppInfoCard && (