Sattion öffnen (Tab) für polylines und Geräte funktioniert nicht zu 100% muss noch optimiert werden

.env.local

@@ -18,30 +18,30 @@
 #########################
 
 
-#DB_HOST=10.10.0.70
+DB_HOST=10.10.0.70
-#DB_USER=root
-#DB_PASSWORD="root#$"
-#DB_NAME=talas_v5
-#DB_PORT=3306
-
-
-#########################
-
-#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
-#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
-#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
-#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
-#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-#########################
-
-DB_HOST=192.168.10.167
 DB_USER=root
 DB_PASSWORD="root#$"
 DB_NAME=talas_v5
 DB_PORT=3306
+
+
+#########################
+
+NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
+NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
+NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70"
+NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"
+#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+#########################
+
+#DB_HOST=192.168.10.167
+#DB_USER=root
+#DB_PASSWORD="root#$"
+#DB_NAME=talas_v5
+#DB_PORT=3306
 #########################
 #URLs für den Client (clientseitig)
-NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/"
+#NEXT_PUBLIC_BASE_URL="http://192.168.10.167/talas5/devices/"
-NEXT_PUBLIC_SERVER_URL="http://192.168.10.167"
+#NEXT_PUBLIC_SERVER_URL="http://192.168.10.167"
-NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167"
+#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.167"
-NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"
+#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"

utils/mapFeatures.js

@@ -3,14 +3,39 @@ import { findClosestPoints } from "./geometryUtils";
 import handlePoiSelect from "./handlePoiSelect";
 import { updateLocationInDatabase } from "../services/apiService";
 import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
-import { parsePoint } from "./geometryUtils"; // Importiere parsePoint hier
+import { parsePoint } from "./geometryUtils";
 import circleIcon from "../components/gisPolylines/icons/CircleIcon";
 import startIcon from "../components/gisPolylines/icons/StartIcon";
 import endIcon from "../components/gisPolylines/icons/EndIcon";
-import { AddSupportPointIcon, RemoveSupportPointIcon } from "../components/gisPolylines/icons/SupportPointIcons";
 import { redrawPolyline } from "./mapUtils";
 import { openInNewTab } from "../utils/contextMenuUtils";
 
+// Funktion zum Deaktivieren der Polyline-Ereignisse
+export function disablePolylineEvents(polylines) {
+  polylines.forEach((polyline) => {
+    polyline.off("mouseover");
+    polyline.off("mouseout");
+  });
+}
+
+// Funktion zum Aktivieren der Polyline-Ereignisse
+export function enablePolylineEvents(polylines, lineColors) {
+  polylines.forEach((polyline) => {
+    polyline.on("mouseover", (e) => {
+      console.log("Mouseover on polyline", polyline.options);
+      polyline.setStyle({ weight: 14 });
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${polyline.options.idLD}`;
+      localStorage.setItem("lastElementType", "polyline");
+      localStorage.setItem("polylineLink", link);
+    });
+
+    polyline.on("mouseout", (e) => {
+      console.log("Mouseout from polyline", polyline.options);
+      polyline.setStyle({ weight: 3 });
+    });
+  });
+}
+
 export const setupMarkers = async (
   map,
   locations,
@@ -52,7 +77,7 @@ export const setupMarkers = async (
           id: location.idPoi,
           name: location.name,
           description: location.description,
-          link: location.link, // Marker-specific link
+          link: location.link,
         }).bindContextMenu({
           contextmenu: true,
           contextmenuWidth: 140,
@@ -91,8 +116,11 @@ export const setupMarkers = async (
           setCurrentPoi(location);
           this.openPopup();
 
+          // Deaktiviere Polyline-Ereignisse beim Öffnen des Kontextmenüs des Markers
+          disablePolylineEvents(window.polylines);
+
           localStorage.setItem("lastElementType", "marker");
-          localStorage.setItem("markerLink", this.options.link); // Store the marker-specific link
+          localStorage.setItem("markerLink", this.options.link);
         });
 
         marker.on("mouseout", function () {
@@ -104,9 +132,7 @@ export const setupMarkers = async (
             const newLat = e.target.getLatLng().lat;
             const newLng = e.target.getLatLng().lng;
             const markerId = e.target.options.id;
-            updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+            updateLocationInDatabase(markerId, newLat, newLng).then(() => {});
-              // Optional: Update UI or state after dragging
-            });
           } else {
             console.error("Drag operation not allowed");
           }
@@ -231,7 +257,7 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
 
     const polyline = L.polyline(lineData.coordinates, {
       color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
-      weight: 3, // Standard weight for better recognition
+      weight: 3,
       contextmenu: true,
       contextmenuItems: [
         {
@@ -251,6 +277,12 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
       ],
     }).addTo(map);
 
+    // Hier wird der Tooltip hinzugefügt
+    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
+      permanent: false,
+      direction: "auto",
+    });
+
     polyline.on("mouseover", (e) => {
       console.log("Mouseover on polyline", lineData);
       polyline.setStyle({ weight: 14 });
@@ -268,5 +300,9 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
     markers.push(...lineMarkers);
   });
 
+  // Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
+  window.polylines = polylines;
+  window.lineColors = lineColors;
+
   return { markers, polylines };
 };

utils/mapInitialization.js

@@ -6,6 +6,7 @@ import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import * as urls from "../config/urls.js";
 import * as layers from "../config/layers.js";
 import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils";
+import { disablePolylineEvents, enablePolylineEvents } from "./mapFeatures"; // Importiere die Funktionen
 
 export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
   const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
@@ -45,10 +46,10 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
                 console.log("Opening polyline link:", storedLink);
                 window.open(storedLink, "_blank");
               }
-              //} else if (lastElementType === "marker") {
             } else {
               const clickedMarker = e.relatedTarget;
               openInNewTab(e, clickedMarker);
+              console.log("Opening marker link:", clickedMarker.options.link);
             }
           },
         },
@@ -67,6 +68,11 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
     setMap(initMap);
     setOms(overlappingMarkerSpiderfier);
 
+    // Polyline-Ereignisse aktivieren, wenn das Kontextmenü geschlossen wird
+    initMap.on("contextmenu.close", function () {
+      enablePolylineEvents(window.polylines, window.lineColors);
+    });
+
     initMap.on("zoomend", function () {
       if (initMap.getZoom() > 15) {
         initMap.setZoom(15);