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

config/config.js

@@ -31,7 +31,7 @@ if (typeof window !== "undefined") {
   user = url.searchParams.get("u") || "484"; // Ein weiterer Parameter aus der URL, Standardwert ist '484 admin zu testen von Stationen ausblenden und einblenden in der Card'
 
   // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
-  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
+  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; //idMap: 10, idUser: 484
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;

states/gisStationState.js

@@ -1,7 +0,0 @@
-// Pfad: states/gisStationState.js
-import { atom } from "recoil";
-
-export const gisStationsStaticDistrictState = atom({
-  key: "gisStationsStaticDistrict", // Eindeutiger Schlüssel (innerhalb des Projekts)
-  default: [], // Standardwert (Anfangszustand)
-});

states/gisSystemState.js

@@ -1,7 +0,0 @@
-// Pfad: states/gisStationState.js
-import { atom } from "recoil";
-
-export const gisSystemStaticState = atom({
-  key: "gisSystemStatic", // Eindeutiger Schlüssel (innerhalb des Projekts)
-  default: [], // Standardwert (Anfangszustand)
-});

states/mapLayersState.js

@@ -1,24 +0,0 @@
-// states/mapLayersState.js
-import { atom } from "recoil";
-
-export const mapLayersState = atom({
-  key: "mapLayersState", // Eindeutiger Schlüssel für das Atom
-  default: {
-    // Standardwerte für jeden Layer
-    show_TALAS: true,
-    show_ECI: true,
-    // show_ULAF: false,
-    show_GSMModem: true,
-    show_CiscoRouter: true,
-    show_WAGO: true,
-    show_Siemens: true,
-    show_OTDR: true,
-    show_WDM: true,
-    show_GMA: true,
-    show_Messstellen: true,
-    show_TALASICL: true,
-    show_DAUZ: true,
-    show_SMSFunkmodem: true,
-    show_Sonstige: true,
-  },
-});

store/selectedAreaState.js

@@ -0,0 +1,7 @@
+// In deinem Recoil store
+import { atom } from "recoil";
+
+export const selectedAreaState = atom({
+  key: "selectedAreaState", // unique ID (with respect to other atoms/selectors)
+  default: null, // default value (aka initial value)
+});