fix: define and initialize setSelectedArea to avoid ReferenceError

- Imported useSetRecoilState from Recoil
- Defined and initialized setSelectedArea using useSetRecoilState with selectedAreaState
- Ensured setSelectedArea is used to reset the selected area after moving the map

This resolves the ReferenceError: setSelectedArea is not defined.

components/DataSheet.js

@@ -1,4 +1,3 @@
-//components/DataSheet.js
 import React, { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
@@ -10,7 +9,6 @@ import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible";
 
 function DataSheet() {
   const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
-
   const setSelectedArea = useSetRecoilState(selectedAreaState);
   const [mapLayersVisibility, setMapLayersVisibility] =
     useRecoilState(mapLayersState);
@@ -20,92 +18,71 @@ function DataSheet() {
     gisStationsStaticDistrictState
   );
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
-  // In deiner Dropdown onChange Funktion
+  const setZoomTrigger = useSetRecoilState(zoomTriggerState);
+
   const handleAreaChange = (event) => {
     const selectedIndex = event.target.options.selectedIndex;
     const areaName = event.target.options[selectedIndex].text;
-    //useState selectedStation setzen
-
     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);
+    console.log("Area selected oder areaName in DataSheet.js:", areaName);
   };
 
   useEffect(() => {
-    // Identify allowed system IDs
     const allowedSystems = new Set(
       GisSystemStatic.filter((system) => system.Allow === 1).map(
         (system) => system.IdSystem
       )
     );
-    //console.log("allowedSystems:", allowedSystems);
-
-    // Filter unique areas that belong to allowed systems
     const seenNames = new Set();
     const filteredAreas = GisStationsStaticDistrict.filter((item) => {
       const isUnique =
         !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
       if (isUnique) {
         seenNames.add(item.Area_Name);
-        //console.log("Unique area:", item.Area_Name); //Dropdown menu
       }
       return isUnique;
     });
-    //console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
-
-    // Set the station listings
     setStationListing(
       filteredAreas.map((area, index) => ({
         id: index + 1,
         name: area.Area_Name,
       }))
     );
-
-    // Prepare system listings as before
     const seenSystemNames = new Set();
     const filteredSystems = GisSystemStatic.filter((item) => {
-      // Entferne alle Leerzeichen und Bindestriche aus dem Namen
       const formattedName = item.Name.replace(/[\s\-]+/g, "");
-      // Entferne alle Leerzeichen aus dem Namen, behalte Bindestriche
-      //const formattedName = item.Name.replace(/\s+/g, "");
       const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1;
       if (isUnique) {
-        seenSystemNames.add(formattedName); // Füge den formatierten Namen hinzu
-        //console.log("Unique system in DataSheet:", formattedName); // Zeige den formatierten Namen in der Konsole
+        seenSystemNames.add(formattedName);
       }
       return isUnique;
     });
-    //console.log("filteredSystems:", filteredSystems); // Logge die gefilterten Systeme
-
     setSystemListing(
       filteredSystems.map((system, index) => ({
         id: index + 1,
-        name: system.Name.replace(/[\s\-]+/g, ""), // Auch hier Leerzeichen und Bindestriche entfernen
+        name: system.Name.replace(/[\s\-]+/g, ""),
       }))
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
-  //---------------------------------------------------------
+
   const handleCheckboxChange = (name, event) => {
     const { checked } = event.target;
-    console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox
+    console.log(`Checkbox ${name} checked state:`, checked);
 
     setMapLayersVisibility((prev) => {
       const newState = {
         ...prev,
         [name]: checked,
       };
-      console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update
+      console.log(`New mapLayersVisibility state:`, newState);
       return newState;
     });
   };
-  //---------------------------------------------------------
-  const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
   const handleIconClick = () => {
-    setSelectedArea("Station wählen"); // Setzt die Dropdown-Auswahl zurück auf "Station wählen"
-    setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung
+    setSelectedArea("Station wählen");
+    setZoomTrigger((current) => current + 1);
   };
-  //---------------------------------------------------------
 
   return (
     <div
@@ -115,7 +92,7 @@ function DataSheet() {
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
           <select
-            onChange={handleAreaChange} // Verwenden der neuen handleAreaChange Funktion
+            onChange={handleAreaChange}
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1 font-semibold"
           >

components/MapComponent.js

@@ -698,6 +698,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //------------------------------------------
   //------------------------------------------ */
   const selectedArea = useRecoilValue(selectedAreaState);
+  const setSelectedArea = useSetRecoilState(selectedAreaState);
 
   // Combine all markers into a single array
   const allMarkers = [
@@ -2038,15 +2039,26 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //------------------------------------------ */
 
   // Effect to handle navigation to selected area
-  useEffect(() => {
+  /*   useEffect(() => {
     if (selectedArea && map) {
       const marker = findMyMarker(selectedArea);
       if (marker) {
         map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
       }
     }
-  }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies
+  }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies */
 
+  useEffect(() => {
+    if (selectedArea && map) {
+      const marker = findMyMarker(selectedArea);
+      if (marker) {
+        map.flyTo(marker.getLatLng(), 14);
+        map.once("moveend", () => {
+          setSelectedArea("Station wählen");
+        });
+      }
+    }
+  }, [selectedArea, map]);
   //------------------------------------------
 
   useEffect(() => {