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