feat: dynamische ev.local und URL für Karte, Karte ist lokal zugreifen ohne IP zu ändern auf verschiedene Server

.env.local

@@ -6,7 +6,7 @@ DB_USER=root
 DB_PASSWORD="root#$"
 DB_NAME=talas_v5
 DB_PORT=3306
-######################### Online Karte
+######################### Karte die ist in /config/url.js
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 ######################### Offline Karte
 #NEXT_PUBLIC_ONLINE_TILE_LAYER="http://127.0.0.1:3000/mapTiles/{z}/{x}/{y}.png"

config/urls.js

@@ -12,7 +12,9 @@ if (typeof window !== "undefined") {
   SERVER_URL = originWithoutPort; // Dynamisch ermittelt, ohne Port
   PROXY_TARGET = `${originWithoutPort}:3000`; // Dynamisch für einen Proxy
 
-  OFFLINE_TILE_LAYER = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
+  //OFFLINE_TILE_LAYER = "http://10.10.0.70:3000/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
+  //OFFLINE_TILE_LAYER = "http://10.10.0.70/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png"; //Map von Talas_v5 Server
+  OFFLINE_TILE_LAYER = `${originWithoutPort}/talas5/nodeMap/public/mapTiles/{z}/{x}/{y}.png`; //Map von Talas_v5 Server
   //OFFLINE_TILE_LAYER = `${originWithoutPort}:3000/mapTiles/{z}/{x}/{y}.png`;
   //OFFLINE_TILE_LAYER = `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`;
   MAP_TILES_LAYER = OFFLINE_TILE_LAYER; // Standardwert

hooks/layers/useGmaMarkersLayer.js

@@ -3,6 +3,49 @@ import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
 import { addItemsToMapContextMenu } from "../../components/useMapContextMenu"; // Importiere die Funktion
 
 const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
+  const zoomIn = (e, map) => {
+    if (!map) {
+      console.error("map is not defined in zoomIn");
+      return;
+    }
+
+    const currentZoom = map.getZoom();
+
+    if (currentZoom < 14) {
+      map.flyTo(e.latlng, 14);
+      localStorage.setItem("mapZoom", 16);
+      localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
+    }
+  };
+
+  const zoomOut = (map) => {
+    if (!map) {
+      console.error("map is not defined in zoomOut");
+      return;
+    }
+
+    const currentZoom = map.getZoom();
+
+    if (currentZoom > 7) {
+      const x = 51.41321407879154;
+      const y = 7.739617925303934;
+      const zoom = 7;
+
+      map.flyTo([x, y], zoom);
+      localStorage.setItem("mapZoom", zoom);
+      localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
+    }
+  };
+
+  const centerHere = (e, map) => {
+    if (!map) {
+      console.error("map is not defined in centerHere");
+      return;
+    }
+    map.panTo(e.latlng);
+    localStorage.setItem("mapZoom", map.getZoom());
+    localStorage.setItem("mapCenter", JSON.stringify(map.getCenter()));
+  };
   const protocol = window.location.protocol; // Holt das Protokoll (z.B. http oder https)
   const hostname = window.location.hostname; // Holt den Hostnamen (z.B. 10.10.0.70)
   const baseUrl = `${protocol}//${hostname}/talas5/devices/`; // Basis-URL zusammenstellen
@@ -64,6 +107,7 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
             event.preventDefault();
             console.log("Rechtsklick auf Tooltip erkannt");
 
+            // Kombiniere die Kontextmenü-Items
             // Kombiniere die Kontextmenü-Items
             const combinedContextMenuItems = [
               {
@@ -80,32 +124,34 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
                 },
               },
               { separator: true },
-              // Füge zusätzliche Items hinzu
+              //Koordinaten anzeigen auf den gesamte Tooltip fläche ist ein Wert, deswegen ausgeblendet
-              ...[
+              /*        {
-                {
+                text: "Koordinaten anzeigen",
-                  text: "Koordinaten anzeigen",
+                icon: "/img/not_listed_location.png",
-                  icon: "/img/not_listed_location.png",
+                callback: () => {
-                  callback: (e) => {
+                  const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker
-                    alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
+                  alert("Breitengrad: " + latlng.lat.toFixed(5) + "\nLängengrad: " + latlng.lng.toFixed(5));
-                  },
                 },
-                { separator: true },
+              }, */
-                {
+              { separator: true },
-                  text: "Reinzoomen",
+              {
-                  icon: "img/zoom_in.png",
+                text: "Reinzoomen",
-                  callback: () => map.zoomIn(),
+                icon: "img/zoom_in.png",
+                callback: () => zoomIn(map),
+              },
+              {
+                text: "Rauszoomen",
+                icon: "img/zoom_out.png",
+                callback: () => zoomOut(map),
+              },
+              {
+                text: "Hier zentrieren",
+                icon: "img/center_focus.png",
+                callback: () => {
+                  const latlng = marker.getLatLng(); // Hole die Koordinaten direkt vom Marker
+                  centerHere({ latlng }, map);
                 },
-                {
+              },
-                  text: "Rauszoomen",
-                  icon: "img/zoom_out.png",
-                  callback: () => map.zoomOut(),
-                },
-                {
-                  text: "Hier zentrieren",
-                  icon: "img/center_focus.png",
-                  callback: (e) => map.panTo(e.latlng),
-                },
-              ],
             ];
 
             // Benutzerdefiniertes Kontextmenü anzeigen