diff --git a/hooks/layers/useGmaMarkersLayer.js b/hooks/layers/useGmaMarkersLayer.js
index 2b4413ba7..0c6dd40e2 100644
--- a/hooks/layers/useGmaMarkersLayer.js
+++ b/hooks/layers/useGmaMarkersLayer.js
@@ -1,8 +1,7 @@
-// hooks/layers/useGmaMarkersLayer.js
-import { useEffect } from "react";
+import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
-const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
+const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
useEffect(() => {
if (!map || !isVisible) return;
@@ -10,10 +9,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
GMA.clearLayers();
markers.forEach((marker) => {
- // Finde die Messungen, die zu diesem Marker gehören
- const relevantMeasurements = GisStationsMeasurements.filter(
- (m) => m.Area_Name === marker.options.areaName
- );
+ const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName);
let measurements = {};
let area_name = marker.options.areaName;
@@ -28,7 +24,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
const rlf = measurements["RLF"] || "-";
marker.bindTooltip(
- `
+ `
${area_name}
@@ -40,7 +36,7 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
FBT : ${fbt} °C
- GT : ${gt}
+ GT : ${gt} °C
RLF : ${rlf} %
@@ -55,41 +51,69 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
}
);
- // Tooltip-Kontextmenü auf Marker-Kontextmenü verlinken
marker.on("tooltipopen", (e) => {
const tooltipElement = e.tooltip._contentNode;
if (tooltipElement) {
tooltipElement.addEventListener("contextmenu", (event) => {
- event.preventDefault(); // Standard-Kontextmenü verhindern
+ event.preventDefault();
console.log("Rechtsklick auf Tooltip erkannt");
- // Simuliere das Kontextmenü für den Marker
- const simulatedEvent = {
- latlng: marker.getLatLng(),
- relatedTarget: marker,
- originalEvent: event,
- };
- console.log("simulateEvent:",simulatedEvent )
+ // Erstelle ein benutzerdefiniertes Kontextmenü
+ const menu = document.createElement("div");
+ menu.className = "custom-context-menu";
+ menu.style.position = "absolute";
+ menu.style.left = `${event.clientX}px`;
+ menu.style.top = `${event.clientY}px`;
+ menu.style.backgroundColor = "#fff";
+ menu.style.border = "1px solid #ccc";
+ menu.style.padding = "8px";
+ menu.style.zIndex = "1000";
- marker.fire("contextmenu", simulatedEvent);
+ // Menüeinträge hinzufügen
+ const openStation = document.createElement("div");
+ openStation.textContent = "Station öffnen (Tab)";
+ openStation.style.cursor = "pointer";
+ openStation.onclick = () => {
+ if (marker.options.link) {
+ window.open(marker.options.link, "_blank");
+ } else {
+ console.error("Kein Link für Tooltip vorhanden.");
+ }
+ document.body.removeChild(menu); // Menü entfernen
+ };
+
+ const showDetails = document.createElement("div");
+ showDetails.textContent = "Details anzeigen";
+ showDetails.style.cursor = "pointer";
+ showDetails.onclick = () => {
+ alert(`Details für ${area_name}`);
+ document.body.removeChild(menu); // Menü entfernen
+ };
+
+ // Menüeinträge zum Menü hinzufügen
+ menu.appendChild(openStation);
+ menu.appendChild(document.createElement("hr"));
+ menu.appendChild(showDetails);
+
+ // Menü zum DOM hinzufügen
+ document.body.appendChild(menu);
+
+ // Menü entfernen, wenn irgendwo anders geklickt wird
+ const handleClickOutside = () => {
+ if (document.body.contains(menu)) {
+ document.body.removeChild(menu);
+ document.removeEventListener("click", handleClickOutside);
+ }
+ };
+
+ document.addEventListener("click", handleClickOutside);
});
}
});
- // Entferne Listener, wenn Tooltip geschlossen wird
-/* marker.on("tooltipclose", (e) => {
- const tooltipElement = e.tooltip._contentNode;
- if (tooltipElement) {
- tooltipElement.removeEventListener("contextmenu", () => {});
- //console.log("Tooltip geschlossen");
- }
- }); */
-
- // Kontextmenü für Marker hinzufügen
addContextMenuToMarker(marker);
- // Füge den Marker zur Layer-Gruppe hinzu
GMA.addLayer(marker);
oms.addMarker(marker);
});
@@ -103,4 +127,4 @@ const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisi
}, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
};
-export default useMarkersLayer;
+export default useGmaMarkersLayer;
diff --git a/utils/initializeMap.js b/utils/initializeMap.js
index 582210a83..01f1adf33 100644
--- a/utils/initializeMap.js
+++ b/utils/initializeMap.js
@@ -12,7 +12,20 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
const initMap = L.map(mapRef.current, {
center: [53.111111, 8.4625],
zoom: 12,
- layers: [layers.MAP_LAYERS.TALAS, layers.MAP_LAYERS.ECI, layers.MAP_LAYERS.ULAF, layers.MAP_LAYERS.GSMModem],
+ layers: [
+ layers.MAP_LAYERS.TALAS,
+ layers.MAP_LAYERS.ECI,
+ layers.MAP_LAYERS.GSMModem,
+ layers.MAP_LAYERS.CiscoRouter,
+ layers.MAP_LAYERS.WAGO,
+ layers.MAP_LAYERS.Siemens,
+ layers.MAP_LAYERS.OTDR,
+ layers.MAP_LAYERS.WDM,
+ layers.MAP_LAYERS.GMA,
+ layers.MAP_LAYERS.TALASICL,
+ layers.MAP_LAYERS.Sonstige,
+ layers.MAP_LAYERS.ULAF,
+ ],
minZoom: 5,
maxZoom: 15,
zoomControl: false,
@@ -22,28 +35,27 @@ export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItems
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
- const link = localStorage.getItem("polylineLink");
const clickedElement = e.relatedTarget;
- // Überprüfe, ob Karte und contextmenu existieren
- if (initMap && initMap.contextmenu) {
- // Verarbeite Kontextmenü-Callback
- if (link) {
- const newTab = window.open(link, "_blank");
- if (newTab) {
- // Lösche Einträge im localStorage
- localStorage.removeItem("polylineLink");
- localStorage.removeItem("lastElementType");
+ if (!clickedElement) {
+ console.error("No valid target for the context menu entry (Element is null).");
+ return;
+ }
+
+ try {
+ if (clickedElement instanceof L.Marker || clickedElement?.options?.link) {
+ const link = clickedElement.options.link;
+ if (link) {
+ console.log("Opening link in a new tab:", link);
+ window.open(link, "_blank");
} else {
- console.error("Fehler: Das neue Tab konnte nicht geöffnet werden.");
+ console.error("No link found in the Marker options.");
}
- } else if (clickedElement instanceof L.Marker || clickedElement instanceof L.Polyline) {
- openInNewTab(e, clickedElement);
} else {
- console.error("Kein gültiges Ziel für den Kontextmenüeintrag");
+ console.error("No valid target for the context menu entry");
}
- } else {
- console.error("Karte oder Kontextmenü nicht verfügbar.");
+ } catch (error) {
+ console.error("Error processing the context menu:", error);
}
},
},