Add pointer cursor to expand icon and link zoom-out functionality

components/DataSheet.js

@@ -5,6 +5,7 @@ import { gisStationsStaticDistrictState } from "../store/gisStationState";
 import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
 import { selectedAreaState } from "../store/selectedAreaState";
+import { zoomTriggerState } from "../store/zoomTriggerState";
 
 function DataSheet() {
   const setSelectedArea = useSetRecoilState(selectedAreaState);
@@ -72,20 +73,26 @@ function DataSheet() {
     );
   }, [GisStationsStaticDistrict, GisSystemStatic]);
 
-const handleCheckboxChange = (name, event) => {
+  const handleCheckboxChange = (name, event) => {
-  const { checked } = event.target;
+    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);  // Log the checked state of the checkbox
 
-  setMapLayersVisibility((prev) => {
+    setMapLayersVisibility((prev) => {
-    const newState = {
+      const newState = {
-      ...prev,
+        ...prev,
-      [name]: checked,
+        [name]: checked,
-    };
+      };
-    //console.log(`New mapLayersVisibility state:`, newState);  // Log the new state after update
+      //console.log(`New mapLayersVisibility state:`, newState);  // Log the new state after update
-    return newState;
+      return newState;
-  });
+    });
-};
+  };
+  //---------------------------------------------------------
+  const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
+  const handleIconClick = () => {
+    setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung
+  };
+  //---------------------------------------------------------
 
   return (
     <div
@@ -109,7 +116,8 @@ const handleCheckboxChange = (name, event) => {
           <img
             src="/img/expand-icon.svg"
             alt="Expand"
-            className="h-6 w-6 ml-2"
+            className="h-6 w-6 ml-2 cursor-pointer"
+            onClick={handleIconClick}
           />
         </div>
         <div>

components/MapComponent.js

@@ -14,6 +14,7 @@ import { gisStationsStaticDistrictState } from "../store/gisStationState";
 import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
 import { selectedAreaState } from "../store/selectedAreaState";
+import { zoomTriggerState } from "../store/zoomTriggerState";
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -1459,48 +1460,64 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   //------------------------------------------ */
   const selectedArea = useRecoilValue(selectedAreaState);
 
-// Combine all markers into a single array
+  // Combine all markers into a single array
-const allMarkers = [
+  const allMarkers = [
-  ...talasMarkers,
+    ...talasMarkers,
-  ...eciMarkers,
+    ...eciMarkers,
-  ...gsmModemMarkers,
+    ...gsmModemMarkers,
-  ...ciscoRouterMarkers,
+    ...ciscoRouterMarkers,
-  ...wagoMarkers,
+    ...wagoMarkers,
-  ...siemensMarkers,
+    ...siemensMarkers,
-  ...otdrMarkers,
+    ...otdrMarkers,
-  ...wdmMarkers,
+    ...wdmMarkers,
-  ...gmaMarkers,
+    ...gmaMarkers,
-  ...messstellenMarkers,
+    ...messstellenMarkers,
-  ...talasiclMarkers,
+    ...talasiclMarkers,
-  ...dauzMarkers,
+    ...dauzMarkers,
-  ...smsfunkmodemMarkers,
+    ...smsfunkmodemMarkers,
-  ...sonstigeMarkers,
+    ...sonstigeMarkers,
-  ...ulafMarkers,
+    ...ulafMarkers,
-];
+  ];
 
-// Function to find a marker by areaName across all groups
+  // Function to find a marker by areaName across all groups
-const findMyMarker = (areaName) => {
+  const findMyMarker = (areaName) => {
-  return allMarkers.find((marker) => marker.options.areaName === areaName);
+    return allMarkers.find((marker) => marker.options.areaName === areaName);
-};
+  };
 
-// Effect to handle navigation to selected area
+  // Effect to handle navigation to selected area
-useEffect(() => {
+  useEffect(() => {
-  if (selectedArea && map) {
+    if (selectedArea && map) {
-    const marker = findMyMarker(selectedArea);
+      const marker = findMyMarker(selectedArea);
-    if (marker) {
+      if (marker) {
-      map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
+        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
 
-
+  /*   const findMyMarker = (areaName) => {
-/*   const findMyMarker = (areaName) => {
     // Angenommen, jeder Marker hat eine option `areaName`, die beim Erstellen gesetzt wurde.
     return talasMarkers.find((marker) => marker.options.areaName === areaName);
   }; */
 
   //------------------------------------------
 
+  const zoomTrigger = useRecoilValue(zoomTriggerState);
+
+  useEffect(() => {
+    if (map) {
+      var x = 51.41321407879154;
+      var y = 7.739617925303934;
+      var zoom = 7;
+
+      if (map && map.flyTo) {
+        map.flyTo([x, y], zoom);
+      } else {
+        console.error("Map object is not ready or does not have flyTo method");
+      } // Ihre bereits existierende Funktion, die Zoom-Out ausführt
+    }
+  }, [map, zoomTrigger]);
+  //------------------------------------------
+
   return (
     <>
       <DataSheet className="z-50" />

config/config.js

@@ -31,17 +31,17 @@ 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}`; //idMap: 10, idUser: 484
+  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}`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
 
-   mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
+  /*  mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
   mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
   mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
   mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
-  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
+  mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
 
   // URLs zu Offline-Daten, falls benötigt
 }

pages/api/[...path].js

@@ -2,8 +2,8 @@
 import { createProxyMiddleware } from "http-proxy-middleware";
 
 export default createProxyMiddleware({
-  //target: "http://10.10.0.13", // Ziel-URL des Proxys
+  target: "http://10.10.0.13", // Ziel-URL des Proxys
-  target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
+  //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
   changeOrigin: true,
   pathRewrite: {
     "^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert

store/zoomOutState.js

@@ -0,0 +1,7 @@
+// store/zoomOutState.js
+import { atom } from "recoil";
+
+export const zoomOutState = atom({
+  key: "zoomOutState", // eindeutiger Key
+  default: 7, // Start-Zoomlevel
+});

store/zoomTriggerState.js

@@ -0,0 +1,7 @@
+// store/zoomTriggerState.js
+import { atom } from "recoil";
+
+export const zoomTriggerState = atom({
+  key: "zoomTriggerState",
+  default: 0, // Dies kann eine einfache Zählvariable sein, die inkrementiert wird.
+});