From 33ac6e3ca57b8a8d6a52196dae06da103c3cb2d4 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 7 May 2024 10:05:10 +0200 Subject: [PATCH] =?UTF-8?q?Add:=20Kontextmen=C3=BC-Funktionalit=C3=A4t=20f?= =?UTF-8?q?=C3=BCr=20talasMarkers=20=20auf=20der=20Karte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 82 ++++++++++++++++++++++++-------------- 1 file changed, 52 insertions(+), 30 deletions(-) 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); } } }