POIs hinzufügen, löschen und bearbeiten funktioniert! in mapFeatures.js als marker, irgendwann in poi umbenennen

utils/contextMenuUtils.js

@@ -1,33 +1,40 @@
 // contextMenuUtils.js
 import { BASE_URL } from "../config/urls";
+
 export function addContextMenuToMarker(marker) {
   marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
 
   marker.bindContextMenu({
     contextmenu: true,
     contextmenuWidth: 140,
-    contextmenuItems: [
-      /*         {
-          text: "Station öffnen (Tab)",
-          icon: "/img/screen_new.png",
-          callback: (e) => openInNewTab(e, marker),
-        },
-        {
-          text: "Station öffnen",
-          icon: "/img/screen_same.png",
-          callback: (e) => openInSameWindow(e, marker),
-        }, */
-    ],
+    contextmenuItems: [],
   });
 }
+
 // Funktion zum Öffnen in einem neuen Tab
-export function openInNewTab(e, marker) {
+export function openInNewTab(e, target) {
   const baseUrl = BASE_URL;
-  //console.log("baseUrl:", baseUrl);
-  if (marker && marker.options && marker.options.link) {
-    //console.log("Marker data:", baseUrl + marker.options.link);
-    window.open(baseUrl + marker.options.link, "_blank");
+  let idLD, idModul, link;
+
+  if (target instanceof L.Polyline) {
+    idLD = target.options.idLD;
+    idModul = target.options.idModul;
+    if (idLD) {
+      link = `${baseUrl}/talas5/devices/cpl.aspx?id=${idLD}`;
+      if (idModul) {
+        //link += `&module=${idModul}`;
+      }
+    } else {
+      console.error("Keine gültige 'idLD' für die Linie gefunden.");
+      return;
+    }
+  } else if (target instanceof L.Marker && target.options.link) {
+    link = baseUrl + target.options.link;
   } else {
-    console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
+    console.error("Fehler: Ungültiges Ziel oder keine gültige 'link' Eigenschaft.");
+    return;
   }
+
+  // Öffne den Link in einem neuen Tab
+  window.open(link, "_blank");
 }

utils/geometryUtils.js

@@ -17,3 +17,37 @@ export const findClosestPoints = (coordinates, newPoint, map) => {
   }
   return closestPair;
 };
+// Hilfsfunktion zur Berechnung der Entfernung zwischen zwei Punkten (LatLng)
+export function getDistance(latlng1, latlng2) {
+  const R = 6371e3; // Erdradius in Metern
+  const lat1 = latlng1.lat * (Math.PI / 180);
+  const lat2 = latlng2.lat * (Math.PI / 180);
+  const deltaLat = (latlng2.lat - latlng1.lat) * (Math.PI / 180);
+  const deltaLng = (latlng2.lng - latlng1.lng) * (Math.PI / 180);
+
+  const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLng / 2) * Math.sin(deltaLng / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  return R * c; // Entfernung in Metern
+}
+
+// Funktion zum Finden der nächsten Linie basierend auf der Mausposition
+export function findNearestPolyline(map, mouseLatLng) {
+  let nearestPolyline = null;
+  let minDistance = Infinity;
+
+  map.eachLayer(function (layer) {
+    if (layer instanceof L.Polyline) {
+      const latlngs = layer.getLatLngs();
+      latlngs.forEach((latlng) => {
+        const distance = getDistance(mouseLatLng, latlng);
+        if (distance < minDistance) {
+          minDistance = distance;
+          nearestPolyline = layer;
+        }
+      });
+    }
+  });
+
+  return nearestPolyline;
+}

utils/mapFeatures.js

@@ -58,7 +58,7 @@ export const setupMarkers = async (
             popupAnchor: [1, -34],
           }),
           draggable: canDrag,
-          idLD: location.idLD, // Füge die idLD zum Marker hinzu
+          id: location.idPoi,
           name: location.name,
           description: location.description,
         }).bindContextMenu({
@@ -165,7 +165,6 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
   };
 
   //document.addEventListener("mousedown", handleOutsideClick);
-
   linePositions.forEach((lineData, lineIndex) => {
     const lineMarkers = [];
     lineData.coordinates.forEach((coord, index) => {
@@ -319,6 +318,5 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
 
   // Add listeners to the context menu items
   const contextMenuElement = document.querySelector(".leaflet-contextmenu"); // Assuming the context menu class is 'leaflet-contextmenu'
-
   return { markers, polylines };
 };

utils/mapInitialization.js

@@ -1,18 +1,18 @@
 // /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 { openInNewTab } from "../utils/contextMenuUtils.js";
+import { findNearestPolyline } from "./geometryUtils"; // Importiere die Funktion zur Suche der nächsten Linie
+
+let lastClickedTarget = null; // Variable zur Zwischenspeicherung des Ziels
 
 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;
@@ -37,11 +37,15 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
       contextmenu: true,
       contextmenuItems: [
         {
-          text: "Station öffnen (Tab)",
+          text: "Station Öffnen (Tab)",
           icon: "/img/screen_new.png",
           callback: (e) => {
-            const clickedMarker = e.relatedTarget;
-            openInNewTab(e, clickedMarker);
+            const clickedTarget = lastClickedTarget || findNearestPolyline(initMap, e.latlng); // Verwende zwischengespeichertes Ziel oder die nächstgelegene Linie
+            if (clickedTarget) {
+              openInNewTab(e, clickedTarget); // Gemeinsame Funktion für Linien und Stationen
+            } else {
+              console.error("Kein gültiges Ziel im Kontextmenü");
+            }
           },
         },
         "-",
@@ -67,6 +71,31 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
       }
     });
 
+    // Speichere das Ziel, wenn die Maus über eine Linie oder einen Marker fährt
+    initMap.on("mouseover", function (e) {
+      if (e.layer instanceof L.Polyline || e.layer instanceof L.Marker) {
+        lastClickedTarget = e.layer; // Speichere das zuletzt überfahrene Element
+      }
+    });
+
+    // Kontextmenü-Event
+    initMap.on("contextmenu", function (e) {
+      const clickedTarget = lastClickedTarget || findNearestPolyline(initMap, e.latlng) || e.relatedTarget || e.layer; // Verwende entweder das zwischengespeicherte Ziel oder die nächstgelegene Linie
+      if (!clickedTarget) {
+        console.error("Kein gültiges Ziel im Kontextmenü");
+        return;
+      }
+
+      if (clickedTarget instanceof L.Polyline) {
+        console.log("ID der Linie (idLD):", clickedTarget.options.idLD);
+        // Das Kontextmenü wird nun geöffnet und beim Klicken wird `openInNewTab` ausgeführt
+      } else if (clickedTarget instanceof L.Marker) {
+        openInNewTab(e, clickedTarget);
+      } else {
+        console.error("Fehler: Ungültiges Ziel.");
+      }
+    });
+
     initMap.whenReady(() => {
       console.log("Karte ist jetzt bereit und initialisiert.");
       addItemsToMapContextMenu(hasRights);