Erweiterte Suchfunktion in Dropdownmenü für selectedArea über alle Layergruppen hinweg

components/MapComponent.js

@@ -335,6 +335,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   const zoomIn = (e) => {
     initMap.flyTo(e.latlng, 12);
+    console.log("ZoomIn koordinaten in MapComponent", e.latlng);
   };
 
   const zoomOut = (e) => {
@@ -1458,22 +1459,45 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   //------------------------------------------ */
   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
+// Combine all markers into a single array
+const allMarkers = [
+  ...talasMarkers,
+  ...eciMarkers,
+  ...gsmModemMarkers,
+  ...ciscoRouterMarkers,
+  ...wagoMarkers,
+  ...siemensMarkers,
+  ...otdrMarkers,
+  ...wdmMarkers,
+  ...gmaMarkers,
+  ...messstellenMarkers,
+  ...talasiclMarkers,
+  ...dauzMarkers,
+  ...smsfunkmodemMarkers,
+  ...sonstigeMarkers,
+  ...ulafMarkers,
+];
 
-  const findMyMarker = (areaName) => {
+// Function to find a marker by areaName across all groups
+const findMyMarker = (areaName) => {
+  return allMarkers.find((marker) => marker.options.areaName === areaName);
+};
+
+// Effect to handle navigation to selected area
+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
+
+
+/*   const findMyMarker = (areaName) => {
     // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
     return talasMarkers.find((marker) => marker.options.areaName === areaName);
-  };
+  }; */
 
   //------------------------------------------