Add: Kontextmenü-Funktionalität für talasMarkers auf der Karte

Dieser Commit führt eine erweiterte Interaktion mit den Kartenmarkern durch die Implementierung von kontextspezifischen Menüs ein. Benutzer können nun über das Kontextmenü verschiedene Aktionen ausführen, wie das Öffnen von Marker-bezogenen Links in einem neuen Tab oder im aktuellen Fenster und das Anzeigen von Koordinaten.

Details der Implementierung:
- `addContextMenuToMarker` wurde hinzugefügt, um das Kontextmenü jedem Marker zuzuweisen.
- Marker enthalten nun ein 'data'-Objekt für zusätzliche Informationen wie URLs, um die Funktionalität zu unterstützen.
- Spezifische Callback-Funktionen wie `openInNewTab`, `openInSameWindow` und `showCoordinates` wurden definiert, um die Kontextmenüaktionen zu behandeln.
- Diese Funktionen nutzen die Marker-Daten und -Position, um relevante Aktionen direkt über die Kartenoberfläche bereitzustellen.

Ziel dieser Änderungen ist es, die Benutzerinteraktion mit der Karte durch schnellen Zugriff auf relevante Informationen und Funktionen zu verbessern.

components/MapComponent.js

@@ -30,6 +30,7 @@ const plusRoundIcon = L.icon({
 });
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
+  const baseUrl = "http://10.10.0.13/talas5/devices/";
   const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
   const [showPopup, setShowPopup] = useState(false);
@@ -292,12 +293,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           {
             text: "Station öffnen (Tab)",
             icon: "img/screen_new.png",
-            callback: newLink,
+            callback: (e) => openInNewTab(e, marker),
           },
           {
             text: "Station öffnen",
             icon: "img/screen_same.png",
-            callback: sameLink,
+            callback: (e) => showCoordinates(e, marker),
           },
           {
             text: "Koordinaten",
@@ -387,26 +388,46 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   //----------------------------------------------------
   //-----Kontextmenu----------------
-  const newLink = (e) => {
+  function addContextMenuToMarker(marker) {
-    try {
+    marker.bindContextMenu({
-      if (!e.relatedTarget || !e.relatedTarget.options) {
+      contextmenu: true,
-        throw new Error("relatedTarget or options not defined");
+      contextmenuWidth: 140,
-      }
+      contextmenuItems: [
-      alert("Neues Fenster: " + e.relatedTarget.options.test);
+        { text: "Station hinzufügen", callback: addStationCallback },
-      window
+        {
-        .open(`../devices/${e.relatedTarget.options.test}`, "_blank")
+          text: "Station öffnen (Tab)",
-        .focus();
+          icon: "/img/screen_new.png",
-    } catch (error) {
+          callback: (e) => openInNewTab(e, marker),
-      console.error("Failed in newLink function:", error);
+        },
-    }
+        {
-  };
+          text: "Station öffnen",
+          icon: "/img/screen_same.png",
+          callback: (e) => openInSameWindow(e, marker),
+        },
+        {
+          text: "Koordinaten anzeigen",
+          icon: "/img/screen_same.png",
+          callback: (e) => showCoordinates(e, marker),
+        },
 
-  const sameLink = (e) => {
+        "-", // Divider
-    alert(e.relatedTarget.options.test);
+        { text: "Reinzoomen", callback: zoomIn },
-    window
+        { text: "Rauszoomen", callback: zoomOut },
-      .open("../devices/" + e.relatedTarget.options.test, "_parent")
+        { text: "Hier zentrieren", callback: centerHere },
-      .focus();
+      ],
-  };
+    });
+  }
+  // Funktion zum Öffnen in einem neuen Tab
+  function openInNewTab(e, marker) {
+    console.log("Marker data:", baseUrl + marker.options.link);
+    window.open(baseUrl + marker.options.link, "_blank");
+  }
+
+  // Funktion zum Öffnen im gleichen Fenster
+  function openInSameWindow(e, marker) {
+    console.log("Marker data:", baseUrl + marker.options.link);
+    window.location.href = baseUrl + marker.options.link;
+  }
 
   const zoomIn = (e) => {
     initMap.flyTo(e.latlng, 12);
@@ -420,14 +441,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     initMap.panTo(e.latlng);
   };
 
-  const showCoordinates = (e) => {
+  // Funktion zum Anzeigen der Koordinaten
+  function showCoordinates(e, marker) {
+    const latLng = marker.getLatLng();
     alert(
-      "Breitengrad: " +
+      `Latitude: ${latLng.lat.toFixed(5)}, Longitude: ${latLng.lng.toFixed(5)}`
-        e.latlng.lat.toFixed(5) +
-        "\nLängengrad: " +
-        e.latlng.lng.toFixed(5)
     );
-  };
+  }
   const showData = (e) => {};
   const showTalas = (e) => {
     map.addLayer(TALAS);
@@ -770,6 +790,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
               popupAnchor: [1, -34],
             }),
             areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
+            link: station.Link,
             zIndexOffset: zIndexOffset,
             bounceOnAdd: !!statis,
           });
@@ -834,7 +855,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       talasMarkers.forEach((marker) => {
         marker.addTo(map);
         oms.addMarker(marker);
-        console.log("Talas marker:", marker._latlng.lat, marker._latlng.lng);
+        //console.log("Talas marker:", marker._latlng.lat, marker._latlng.lng);
 
         // Popup beim Überfahren mit der Maus öffnen und schließen
         marker.on("mouseover", function () {
@@ -855,6 +876,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         plusMarker.addTo(poiLayerRef.current);
         console.log("Adding plus icon marker at", [latitude, longitude]);
         //------------ */
+        addContextMenuToMarker(marker);
       });
       map.addLayer(TALAS);
 
@@ -1590,7 +1612,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   function checkOverlappingMarkers(map, markers, plusIcon) {
     // Ensure markers is always an array
     if (!Array.isArray(markers)) {
-      console.error("The `markers` argument is not an array:", markers);
+      //console.error("The `markers` argument is not an array:", markers);
       return;
     }
 
@@ -1613,7 +1635,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         const plusMarker = L.marker(latLng, { icon: plusIcon });
         plusMarker.addTo(map);
 
-        console.log("Adding plus icon marker at", latLng);
+        //console.log("Adding plus icon marker at", latLng);
       }
     }
   }