diff --git a/components/MapComponent.js b/components/MapComponent.js index bb4fa6d14..5f15c52f8 100644 --- a/components/MapComponent.js +++ b/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) => { - try { - if (!e.relatedTarget || !e.relatedTarget.options) { - throw new Error("relatedTarget or options not defined"); - } - alert("Neues Fenster: " + e.relatedTarget.options.test); - window - .open(`../devices/${e.relatedTarget.options.test}`, "_blank") - .focus(); - } catch (error) { - console.error("Failed in newLink function:", error); - } - }; + function addContextMenuToMarker(marker) { + marker.bindContextMenu({ + contextmenu: true, + contextmenuWidth: 140, + contextmenuItems: [ + { text: "Station hinzufügen", callback: addStationCallback }, + { + 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), + }, + { + text: "Koordinaten anzeigen", + icon: "/img/screen_same.png", + callback: (e) => showCoordinates(e, marker), + }, - const sameLink = (e) => { - alert(e.relatedTarget.options.test); - window - .open("../devices/" + e.relatedTarget.options.test, "_parent") - .focus(); - }; + "-", // Divider + { text: "Reinzoomen", callback: zoomIn }, + { text: "Rauszoomen", callback: zoomOut }, + { text: "Hier zentrieren", callback: centerHere }, + ], + }); + } + // 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: " + - e.latlng.lat.toFixed(5) + - "\nLängengrad: " + - e.latlng.lng.toFixed(5) + `Latitude: ${latLng.lat.toFixed(5)}, Longitude: ${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); } } }