Textinhalt der Dropdown-Option mit der Marker-Eigenschaft überein und Reinzoomen, funktioniert noch nicht bei alle Dropdown-Elemente

components/MapComponent.js

@@ -13,6 +13,7 @@ import { useRecoilState, useRecoilValue } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/gisStationState";
 import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
+import { selectedAreaState } from "../store/selectedAreaState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -739,6 +740,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
               iconAnchor: [12, 41],
               popupAnchor: [1, -34],
             }),
+            areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
             zIndexOffset: zIndexOffset,
             bounceOnAdd: !!statis,
           });
@@ -1454,6 +1456,26 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);
 
   //------------------------------------------ */
+  const selectedArea = useRecoilValue(selectedAreaState);
+
+  useEffect(() => {
+    if (selectedArea && map) {
+      // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
+      const marker = talasMarkers.find(
+        (marker) => marker.options.areaName === selectedArea
+      );
+      if (marker) {
+        map.flyTo(marker.getLatLng(), 14); // Zoomstufe anpassen nach Bedarf
+      }
+    }
+  }, [selectedArea, map]); // Abhängigkeiten beinhalten selectedArea und map
+
+  const findMyMarker = (areaName) => {
+    // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
+    return talasMarkers.find((marker) => marker.options.areaName === areaName);
+  };
+
+  //------------------------------------------
 
   return (
     <>