157 lines
4.7 KiB
JavaScript
157 lines
4.7 KiB
JavaScript
import { toast } from "react-toastify";
|
|
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; // Utility-Funktionen
|
|
|
|
const zoomInCallback = (e, map) => {
|
|
zoomIn(e, map);
|
|
};
|
|
|
|
const zoomOutCallback = (map) => {
|
|
zoomOut(map);
|
|
};
|
|
|
|
const centerHereCallback = (e, map) => {
|
|
centerHere(e, map);
|
|
};
|
|
|
|
// Funktion zum Anzeigen und Kopieren der Koordinaten
|
|
const showCoordinates = (e) => {
|
|
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";
|
|
hasRights = editMode ? hasRights : undefined;
|
|
if (hasRights) {
|
|
setPopupCoordinates(event.latlng);
|
|
setShowPopup(true);
|
|
} else {
|
|
toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
|
|
position: "top-center",
|
|
autoClose: 5000,
|
|
hideProgressBar: false,
|
|
closeOnClick: true,
|
|
pauseOnHover: true,
|
|
draggable: true,
|
|
progress: undefined,
|
|
});
|
|
}
|
|
};
|
|
|
|
export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates) => {
|
|
// Überprüfe den Bearbeitungsmodus in localStorage
|
|
const editMode = localStorage.getItem("editMode") === "true";
|
|
hasRights = editMode ? hasRights : undefined;
|
|
|
|
if (!menuItemAdded && map && map.contextmenu) {
|
|
// Event-Listener für Rechtsklick
|
|
map.on("contextmenu", (e) => {
|
|
// Entferne alle vorherigen dynamischen Einträge
|
|
map.contextmenu.removeAllItems();
|
|
|
|
// Koordinaten dynamisch anzeigen
|
|
const coordinates = `Lat: ${e.latlng.lat.toFixed(5)}, Lng: ${e.latlng.lng.toFixed(5)}`;
|
|
map.contextmenu.addItem({
|
|
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);
|
|
}
|
|
};
|