From 3fc5da66670e900e0f93a393c25480b970ee94e7 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 30 Dec 2024 12:12:23 +0100 Subject: [PATCH] Koordinaten anzeigen --- components/useMapContextMenu.js | 145 ++++++++++++++++++++++++-------- 1 file changed, 108 insertions(+), 37 deletions(-) diff --git a/components/useMapContextMenu.js b/components/useMapContextMenu.js index 6a59bbf8e..24133ae82 100644 --- a/components/useMapContextMenu.js +++ b/components/useMapContextMenu.js @@ -1,6 +1,5 @@ -// /components/useMapContextMenu.js import { toast } from "react-toastify"; -import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Assuming these are imported correctly +import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Utility-Funktionen const zoomInCallback = (e, map) => { zoomIn(e, map); @@ -13,10 +12,71 @@ const zoomOutCallback = (map) => { const centerHereCallback = (e, map) => { centerHere(e, map); }; -// Funktion zum Anzeigen der Koordinaten + +// Funktion zum Anzeigen und Kopieren der Koordinaten const showCoordinates = (e) => { - alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)); + const coordinates = `Breitengrad: ${e.latlng.lat.toFixed(5)}, Längengrad: ${e.latlng.lng.toFixed(5)}`; + + // Überprüfen, ob das Clipboard-API unterstützt wird + if (navigator.clipboard && navigator.clipboard.writeText) { + navigator.clipboard + .writeText(coordinates) + .then(() => { + toast.success("Koordinaten wurden kopiert: " + coordinates, { + position: "top-center", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + }) + .catch((err) => { + toast.error("Fehler beim Kopieren der Koordinaten!", { + position: "top-center", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + console.error("Fehler beim Kopieren: ", err); + }); + } else { + // Fallback für ältere Browser + const textArea = document.createElement("textarea"); + textArea.value = coordinates; + document.body.appendChild(textArea); + textArea.select(); + try { + document.execCommand("copy"); + toast.success("Koordinaten wurden kopiert: " + coordinates, { + position: "top-center", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + } catch (err) { + toast.error("Fehler beim Kopieren der Koordinaten!", { + position: "top-center", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + console.error("Fehler beim Kopieren: ", err); + } + document.body.removeChild(textArea); + } }; + // Kontextmenü Callback für "POI hinzufügen" const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) => { const editMode = localStorage.getItem("editMode") === "true"; @@ -43,42 +103,53 @@ export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, h hasRights = editMode ? hasRights : undefined; if (!menuItemAdded && map && map.contextmenu) { - map.contextmenu.addItem({ - text: "Koordinaten anzeigen", - icon: "img/not_listed_location.png", - callback: showCoordinates, - }); + // Event-Listener für Rechtsklick + map.on("contextmenu", (e) => { + // Entferne alle vorherigen dynamischen Einträge + map.contextmenu.removeAllItems(); - map.contextmenu.addItem({ separator: true }); - - map.contextmenu.addItem({ - text: "Reinzoomen", - icon: "img/zoom_in.png", - callback: (e) => zoomInCallback(e, map), - }); - - map.contextmenu.addItem({ - text: "Rauszoomen", - icon: "img/zoom_out.png", - callback: () => zoomOutCallback(map), - }); - - map.contextmenu.addItem({ - text: "Hier zentrieren", - icon: "img/center_focus.png", - callback: (e) => centerHereCallback(e, map), - }); - - // wenn localStorage Variable editMode true ist, dann wird der Button "POI hinzufügen" angezeigt - if (editMode) { - map.contextmenu.addItem({ separator: true }); + // Koordinaten dynamisch anzeigen + const coordinates = `Lat: ${e.latlng.lat.toFixed(5)}, Lng: ${e.latlng.lng.toFixed(5)}`; map.contextmenu.addItem({ - text: "POI hinzufügen", - icon: "img/add_station.png", - className: "background-red", - callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates), + text: coordinates, + icon: "img/not_listed_location.png", + callback: () => showCoordinates(e), }); - } + + map.contextmenu.addItem({ separator: true }); + + // Zoom-In + map.contextmenu.addItem({ + text: "Reinzoomen", + icon: "img/zoom_in.png", + callback: (e) => zoomInCallback(e, map), + }); + + // Zoom-Out + map.contextmenu.addItem({ + text: "Rauszoomen", + icon: "img/zoom_out.png", + callback: () => zoomOutCallback(map), + }); + + // Hier zentrieren + map.contextmenu.addItem({ + text: "Hier zentrieren", + icon: "img/center_focus.png", + callback: (e) => centerHereCallback(e, map), + }); + + // POI hinzufügen (wenn Bearbeitungsmodus aktiviert ist) + if (editMode) { + map.contextmenu.addItem({ separator: true }); + map.contextmenu.addItem({ + text: "POI hinzufügen", + icon: "img/add_station.png", + className: "background-red", + callback: (event) => addStationCallback(event, hasRights, setShowPopup, setPopupCoordinates), + }); + } + }); setMenuItemAdded(true); }