diff --git a/components/MapComponent.js b/components/MapComponent.js index f7078784f..3d978aefe 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -1,5 +1,5 @@ // components/MapComponent.js -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState, useMemo } from "react"; //import ReactDOM from "react-dom/client"; // Import from 'react-dom/client' import L, { marker } from "leaflet"; import "leaflet/dist/leaflet.css"; @@ -127,10 +127,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => { console.error("Fehler beim Aktualisieren der Position"); } }; + //--------------------------------------------- //---------------------------------------------------- //-----Kontextmenu---------------- function addContextMenuToMarker(marker) { + marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden + marker.bindContextMenu({ contextmenu: true, contextmenuWidth: 140, @@ -150,14 +153,22 @@ const MapComponent = ({ locations, onLocationUpdate }) => { } // 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"); + if (marker && marker.options && marker.options.link) { + console.log("Marker data:", baseUrl + marker.options.link); + window.open(baseUrl + marker.options.link, "_blank"); + } else { + console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft"); + } } // 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; + if (marker && marker.options && marker.options.link) { + console.log("Marker data:", baseUrl + marker.options.link); + window.location.href = baseUrl + marker.options.link; + } else { + console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft"); + } } const zoomIn = (e) => { @@ -205,6 +216,52 @@ const MapComponent = ({ locations, onLocationUpdate }) => { setShowPopup(true); // Popup öffnen }; //-----Kontextmenu----ende------------ + //-------------------------------------------------------------------------------- + + // Verwende useMemo, um die Kontextmenü-Items nur zu initialisieren, wenn notwendig + const contextMenuItems = useMemo( + () => [ + { + text: "Station öffnen (Tab)", + icon: "/img/screen_new.png", + callback: (e) => { + const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat + openInNewTab(e, clickedMarker); + }, + }, + { + text: "Station öffnen", + icon: "/img/screen_same.png", + //callback: (e) => openInSameWindow(e, marker), + callback: (e) => { + const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat + openInSameWindow(e, clickedMarker); + }, + }, + "-", // Divider + { + text: "Station hinzufügen", + icon: "img/add_station.png", + className: "background-red", + callback: addStationCallback, + }, + { + text: "Koordinaten anzeigen", + icon: "img/not_listed_location.png", + callback: showCoordinates, + }, + "-", // Divider + { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn }, + { text: "Rauszoomen", icon: "img/zoom_out.png", callback: zoomOut }, + { + text: "Hier zentrieren", + icon: "img/center_focus.png", + callback: centerHere, + }, + ], + [] + ); + //---------------------------------------------------------------------------------- //------------------------------------------ */ const layerNames = { "GSM Modem": "GSMMODEM", @@ -653,32 +710,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { maxZoom: 15, // Maximale Zoomstufe zoomControl: false, contextmenu: true, - contextmenuItems: [ - { - text: "Station hinzufügen", - icon: "img/add_station.png", - //style background red color - className: "background-red", - callback: addStationCallback, - }, - { - text: "Koordinaten", - icon: "img/not_listed_location.png", - callback: showCoordinates, - }, - "-", // Divider - { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn }, - { - text: "Rauszoomen", - icon: "img/zoom_out.png", - callback: zoomOut, - }, - { - text: "Hier zentrieren", - icon: "img/center_focus.png", - callback: centerHere, - }, - ], + contextmenuItems: contextMenuItems, }); L.tileLayer(online ? onlineTileLayer : offlineTileLayer, { @@ -889,7 +921,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { talasMarkers.forEach((marker) => { marker.addTo(map); oms.addMarker(marker); - //console.log("Talas marker:", marker._latlng.lat, marker._latlng.lng); // Popup beim Überfahren mit der Maus öffnen und schließen marker.on("mouseover", function () { @@ -898,28 +929,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => { marker.on("mouseout", function () { this.closePopup(); }); - /* //-------------- - const latitude = marker._latlng.lat; - const longitude = marker._latlng.lng; - const plusMarker = L.marker([latitude, longitude], { - icon: plusRoundIcon, - zIndexOffset: 1000, // Higher z-index for visibility - }); - // Add to the poiLayer - plusMarker.addTo(poiLayerRef.current); - console.log("Adding plus icon marker at", [latitude, longitude]); - //------------ */ addContextMenuToMarker(marker); }); map.addLayer(TALAS); + console.log("map", map); + console.log("oms", oms); + //disable map contextmenu + map.options.contextmenu = false; + map.options.contextmenuItems = []; + + oms.map.options.contextmenu = false; + oms.map.options.contextmenuItems = []; // Call the function here checkOverlappingMarkers(oms, map, plusRoundIcon); } }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken - //console.log("talasMarkers", talasMarkers); //------------------------------------------- //-------------------------------------------------------------------------------- useEffect(() => {