Station öffnen (Tab) für polylines ok, aber für marker muss noch option.link nehmen

utils/geometryUtils.js

@@ -1,5 +1,22 @@
 // utils/geometryUtils.js
 
+/**
+ * Parses a point string in the format "POINT (longitude latitude)" and returns an object with latitude and longitude as numbers.
+ * @param {string} position - The position string in the format "POINT (longitude latitude)".
+ * @returns {{latitude: number, longitude: number}} An object containing the latitude and longitude as numbers.
+ */
+export const parsePoint = (position) => {
+  const [longitude, latitude] = position.slice(6, -1).split(" ");
+  return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
+};
+
+/**
+ * Finds the closest points on a polyline to a new point.
+ * @param {Array} coordinates - The coordinates of the polyline.
+ * @param {Object} newPoint - The new point (with latitude and longitude).
+ * @param {Object} map - The map object.
+ * @returns {Array} The closest pair of points on the polyline.
+ */
 export const findClosestPoints = (coordinates, newPoint, map) => {
   if (!map) {
     console.error("Map is not defined. Cannot find closest points.");

utils/mapFeatures.js

@@ -2,22 +2,15 @@
 import { findClosestPoints } from "./geometryUtils";
 import handlePoiSelect from "./handlePoiSelect";
 import { updateLocationInDatabase } from "../services/apiService";
-import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils"; // Import removeMarker here
+import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
+import { parsePoint } from "./geometryUtils"; // Importiere parsePoint hier
 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 redrawPolyline here
+import { redrawPolyline } from "./mapUtils";
-import { openInNewTab } from "../utils/contextMenuUtils"; // Importiere die Funktion, wenn nicht schon vorhanden
+import { openInNewTab } from "../utils/contextMenuUtils";
-import { useState } from "react";
-//----------------------------------
-// geometryUtils.js
-export const parsePoint = (position) => {
-  const [longitude, latitude] = position.slice(6, -1).split(" ");
-  return { latitude: parseFloat(latitude), longitude: parseFloat(longitude) };
-};
 
-//----------------------------------
 export const setupMarkers = async (
   map,
   locations,
@@ -48,8 +41,6 @@ export const setupMarkers = async (
         const matchingIcon = poiData.find((poi) => poi.idPoi === location.idPoi);
         const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png";
 
-        //console.log("Setting up marker for location:", location);
-
         const marker = L.marker([latitude, longitude], {
           icon: L.icon({
             iconUrl: iconUrl,
@@ -74,12 +65,12 @@ export const setupMarkers = async (
         });
 
         marker.bindPopup(`
-              <div>
+          <div>
-                <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
+            <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
-                ${deviceName}<br>
+            ${deviceName}<br>
-                ${poiTypName}<br>
+            ${poiTypName}<br>
-              </div>
+          </div>
-            `);
+        `);
 
         marker.on("mouseover", function () {
           handlePoiSelect(
@@ -98,6 +89,8 @@ export const setupMarkers = async (
           );
           setCurrentPoi(location);
           this.openPopup();
+
+          localStorage.setItem("lastElementType", "marker");
         });
 
         marker.on("mouseout", function () {
@@ -110,7 +103,7 @@ export const setupMarkers = async (
             const newLng = e.target.getLatLng().lng;
             const markerId = e.target.options.id;
             updateLocationInDatabase(markerId, newLat, newLng).then(() => {
-              //onLocationUpdate(markerId, newLat, newLng);
+              // Optional: Update UI or state after dragging
             });
           } else {
             console.error("Drag operation not allowed");
@@ -126,48 +119,14 @@ export const setupMarkers = async (
     }
   }
 };
-//----------------------------------
 
 export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
   const markers = [];
   const polylines = [];
-  let isMouseOverMenuItem = false;
-
-  const checkMouseOverMenu = () => {
-    if (!isMouseOverMenuItem) {
-      //showContextMenuItemByIndex(map, 0);
-      //showContextMenuItemByIndex(map, 1);
-      closeContextMenu(); // Kontextmenü schließen, wenn die Maus nicht mehr darüber ist
-    }
-  };
-
-  const handleMouseOverMenuItem = () => {
-    isMouseOverMenuItem = true;
-  };
-
-  const handleMouseOutMenuItem = () => {
-    isMouseOverMenuItem = false;
-    setTimeout(checkMouseOverMenu, 500); // kleine Verzögerung, um sicherzustellen, dass es keine schnellen Bewegungen sind
-  };
-
-  const closeContextMenu = () => {
-    const contextMenuElement = document.querySelector(".leaflet-contextmenu");
-    if (contextMenuElement) {
-      contextMenuElement.style.display = "none"; // Kontextmenü ausblenden
-    }
-  };
-
-  const handleOutsideClick = (event) => {
-    const contextMenuElement = document.querySelector(".leaflet-contextmenu");
-    if (contextMenuElement && !contextMenuElement.contains(event.target)) {
-      closeContextMenu(); // Kontextmenü schließen, wenn der Klick außerhalb stattfindet
-    }
-  };
-
-  document.addEventListener("mousedown", handleOutsideClick);
 
   linePositions.forEach((lineData, lineIndex) => {
     const lineMarkers = [];
+
     lineData.coordinates.forEach((coord, index) => {
       let icon = circleIcon;
       if (index === 0) {
@@ -200,9 +159,10 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
         });
 
         updatedPolyline.on("mouseover", () => {
-          updatedPolyline.setStyle({ weight: 10 });
+          updatedPolyline.setStyle({ weight: 20 });
           updatedPolyline.bringToFront();
         });
+
         updatedPolyline.on("mouseout", () => {
           updatedPolyline.setStyle({ weight: 3 });
         });
@@ -269,18 +229,9 @@ 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
       contextmenu: true,
       contextmenuItems: [
-        {
-          text: "Station öffnen (Tab)",
-          icon: "/img/screen_new.png",
-          callback: (e) => {
-            console.log("lineData idLD:", lineData.idLD);
-            const idLD = lineData.idLD; // Angenommen, die ID der Station ist in lineData vorhanden
-            const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${idLD}`;
-            window.open(link, "_blank"); // Öffne direkt den Link in einem neuen Tab
-          },
-        },
         {
           text: "Stützpunkt hinzufügen",
           icon: "/img/icons/gisLines/add-support-point.svg",
@@ -299,63 +250,21 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
     }).addTo(map);
 
     polyline.on("mouseover", (e) => {
-      polyline.setStyle({ weight: 20 });
+      console.log("Mouseover on polyline", lineData);
-      //hideContextMenuItemByIndex(map, 0);
+      polyline.setStyle({ weight: 14 });
-      //hideContextMenuItemByIndex(map, 1);
+      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`;
-    });
+      localStorage.setItem("lastElementType", "polyline");
-
+      localStorage.setItem("polylineLink", link);
-    polyline.on("mousedown", (e) => {
-      polyline.setStyle({ weight: 20 });
-    });
-
-    polyline.on("mouseup", (e) => {
-      polyline.setStyle({ weight: 20 });
     });
 
     polyline.on("mouseout", (e) => {
+      console.log("Mouseout from polyline", lineData);
       polyline.setStyle({ weight: 3 });
-      polyline.setStyle({ color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000" });
-      setTimeout(checkMouseOverMenu, 500);
-    });
-
-    polyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
-      permanent: false,
-      direction: "auto",
     });
 
     polylines.push(polyline);
     markers.push(...lineMarkers);
   });
 
-  // Add listeners to the context menu items
-  const contextMenuElement = document.querySelector(".leaflet-contextmenu"); // Assuming the context menu class is 'leaflet-contextmenu'
-
-  if (contextMenuElement) {
-    contextMenuElement.addEventListener("mouseover", handleMouseOverMenuItem);
-    contextMenuElement.addEventListener("mouseout", handleMouseOutMenuItem);
-  }
-
   return { markers, polylines };
 };
-
-// Funktion zum Ausblenden eines Kontextmenüelements nach Index
-const hideContextMenuItemByIndex = (map, index) => {
-  const items = map.contextmenu._items;
-  if (index >= 0 && index < items.length) {
-    const itemElement = items[index].el;
-    if (itemElement) {
-      itemElement.style.display = "none"; // Verstecke das Element
-    }
-  }
-};
-
-// Funktion zum Einblenden eines Kontextmenüelements nach Index
-const showContextMenuItemByIndex = (map, index) => {
-  const items = map.contextmenu._items;
-  if (index >= 0 && index < items.length) {
-    const itemElement = items[index].el;
-    if (itemElement) {
-      itemElement.style.display = ""; // Zeige das Element wieder an
-    }
-  }
-};

utils/mapInitialization.js

@@ -1,18 +1,15 @@
 // /utils/mapInitialization.js
 import L from "leaflet";
-//import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
 import "leaflet-contextmenu";
 import "leaflet/dist/leaflet.css";
 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.js";
+import { addContextMenuToMarker, openInNewTab } from "../utils/contextMenuUtils";
 
 export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights) => {
   const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
-  //const offlineTileLayer = process.env.OFFLINE_TILE_LAYER;
   const onlineTileLayer = urls.ONLINE_TILE_LAYER;
-  //const onlineTileLayer = process.env.ONLINE_TILE_LAYER;
   const TALAS = layers.MAP_LAYERS.TALAS;
   const ECI = layers.MAP_LAYERS.ECI;
   const ULAF = layers.MAP_LAYERS.ULAF;
@@ -40,8 +37,20 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
           text: "Station öffnen (Tab)",
           icon: "/img/screen_new.png",
           callback: (e) => {
-            const clickedMarker = e.relatedTarget;
+            const lastElementType = localStorage.getItem("lastElementType");
-            openInNewTab(e, clickedMarker);
+
+            if (lastElementType === "polyline") {
+              const storedLink = localStorage.getItem("polylineLink");
+              if (storedLink) {
+                console.log("Opening polyline link:", storedLink);
+                window.open(storedLink, "_blank");
+              }
+            } else if (lastElementType === "marker") {
+              const clickedItem = e.relatedTarget;
+              if (clickedItem instanceof L.Marker) {
+                openInNewTab(e, clickedItem);
+              }
+            }
           },
         },
         "-",