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

components/DataSheet.js

@@ -1,10 +1,13 @@
+//components/DataSheet.js
 import React, { useEffect, useState } from "react";
-import { useRecoilState, useRecoilValue } from "recoil";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/gisStationState";
 import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
+import { selectedAreaState } from "../store/selectedAreaState";
 
 function DataSheet() {
+  const setSelectedArea = useSetRecoilState(selectedAreaState);
   const [mapLayersVisibility, setMapLayersVisibility] =
     useRecoilState(mapLayersState);
   const [stationListing, setStationListing] = useState([]);
@@ -13,6 +16,14 @@ function DataSheet() {
     gisStationsStaticDistrictState
   );
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
+  // In deiner Dropdown onChange Funktion
+  const handleAreaChange = (event) => {
+    const selectedIndex = event.target.options.selectedIndex;
+    const areaName = event.target.options[selectedIndex].text;
+    setSelectedArea(areaName);
+    console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole
+    console.log("event.target:", event.target);
+  };
 
   useEffect(() => {
     // Identify allowed system IDs
@@ -29,11 +40,11 @@ function DataSheet() {
         !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
       if (isUnique) {
         seenNames.add(item.Area_Name);
-        console.log("Unique area:", item.Area_Name);
+        //console.log("Unique area:", item.Area_Name);
       }
       return isUnique;
     });
-    console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
+    //console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
 
     // Set the station listings
     setStationListing(
@@ -77,9 +88,7 @@ function DataSheet() {
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
           <select
-            onChange={(event) =>
-              console.log("Station selected:", event.target.value)
-            }
+            onChange={handleAreaChange} // Verwenden der neuen handleAreaChange Funktion
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1"
           >

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 (
     <>