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);
@@ -85,7 +86,13 @@ const handleCheckboxChange = (name, event) => {
       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
@@ -1493,7 +1494,6 @@ useEffect(() => {
     }
   }, [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);
@@ -1501,6 +1501,23 @@ useEffect(() => {
 
   //------------------------------------------
 
+  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.
+});