feat: AreaDropdown separate from MapLayerControlPanel

components/mainComponent/MapComponent.js

@@ -34,6 +34,7 @@ import CoordinatePopup from "@/components/contextmenu/CoordinatePopup.js";
 import MapLayersControlPanel from "@/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
 import CoordinateInput from "@/components/uiWidgets/CoordinateInput.js";
 import VersionInfoModal from "@/components/uiWidgets/VersionInfoModal.js";
+import AreaDropdown from "@/components/uiWidgets/AreaDropdown";
 //----------Daten aus API--------------------
 import { fetchPoiDataService } from "@/services/database/pois/fetchPoiDataByIdService.js";
 import AddPOIModal from "@/components/pois/AddPOIModal.js";
@@ -164,6 +165,7 @@ 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 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
@@ -1133,7 +1135,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       {GisStationsStaticDistrict &&
         GisStationsStaticDistrict.Points?.length > 0 &&
-        showLayersPanel && (
+        showLayersPanel &&
+        !showAreaDropdown && (
           <MapLayersControlPanel
             className="z-50"
             handlePolylineCheckboxChange={handlePolylineCheckboxChange}
@@ -1157,13 +1160,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         )}
         {/* Marker-Icon (line-md) */}
         <button
-          onClick={() => {}}
+          onClick={() => setShowAreaDropdown(v => !v)}
           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)} />}
         {/*Lupe: Koordinatensuche ein-/ausblenden */}
         <button
           onClick={() => setShowCoordinateInput(v => !v)}