Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: ein sicherung nur mit alles

Browse Source
This commit is contained in:
ISA
2024-12-12 11:18:32 +01:00
parent 2a72abaa5a
commit 6eccdff031
1 changed files with 77 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
hooks/layers/useGmaMarkersLayer.js
View File

@@ -1,9 +1,12 @@
import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { addItemsToMapContextMenu } from "../../components/useMapContextMenu"; // Importiere die Funktion
const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
const host = window.location.origin;
const url = `${host}/talas5/devices/`;
const protocol = window.location.protocol; // Holt das Protokoll (z.B. http oder https)
const hostname = window.location.hostname; // Holt den Hostnamen (z.B. 10.10.0.70)
const baseUrl = `${protocol}//${hostname}/talas5/devices/`; // Basis-URL zusammenstellen
useEffect(() => {
if (!map || !isVisible) return;
@@ -61,7 +64,51 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
event.preventDefault();
console.log("Rechtsklick auf Tooltip erkannt");
// Erstelle ein benutzerdefiniertes Kontextmenü
// Kombiniere die Kontextmenü-Items
const combinedContextMenuItems = [
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: () => {
if (marker.options.link) {
const fullUrl = `${baseUrl}${marker.options.link}`;
window.open(fullUrl, "_blank");
console.log("Link in neuem Tab geöffnet:", fullUrl);
} else {
console.error("Kein Link für Tooltip vorhanden.");
}
},
},
{ separator: true },
// Füge zusätzliche Items hinzu
...[
{
text: "Koordinaten anzeigen",
icon: "/img/not_listed_location.png",
callback: (e) => {
alert("Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5));
},
},
{ separator: true },
{
text: "Reinzoomen",
icon: "img/zoom_in.png",
callback: () => map.zoomIn(),
},
{
text: "Rauszoomen",
icon: "img/zoom_out.png",
callback: () => map.zoomOut(),
},
{
text: "Hier zentrieren",
icon: "img/center_focus.png",
callback: (e) => map.panTo(e.latlng),
},
],
];
// Benutzerdefiniertes Kontextmenü anzeigen
const menu = document.createElement("div");
menu.className = "custom-context-menu";
menu.style.position = "absolute";
@@ -69,44 +116,40 @@ const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isV
menu.style.top = `${event.clientY}px`;
menu.style.backgroundColor = "#fff";
menu.style.border = "1px solid #ccc";
menu.style.padding = "8px";
menu.style.padding = "4px";
menu.style.zIndex = "1000";
// Menüeintrag mit Icon erstellen
const openStation = document.createElement("div");
openStation.style.display = "flex";
openStation.style.alignItems = "center";
openStation.style.cursor = "pointer";
const icon = document.createElement("img");
icon.src = "/img/screen_new.png"; // Pfad zum Icon
icon.alt = "Icon";
icon.style.width = "16px";
icon.style.height = "16px";
icon.style.marginRight = "8px";
const text = document.createElement("span");
text.textContent = "Station öffnen (Tab)";
openStation.appendChild(icon);
openStation.appendChild(text);
openStation.onclick = () => {
if (marker.options.link) {
window.open(marker.options.link, "_blank");
combinedContextMenuItems.forEach((item) => {
if (item.separator) {
const separator = document.createElement("hr");
menu.appendChild(separator);
} else {
console.error("Kein Link für Tooltip vorhanden.");
const menuItem = document.createElement("div");
menuItem.style.display = "flex";
menuItem.style.alignItems = "center";
menuItem.style.cursor = "pointer";
if (item.icon) {
const icon = document.createElement("img");
icon.src = item.icon;
icon.alt = "Icon";
icon.style.width = "16px";
icon.style.height = "16px";
icon.style.marginRight = "8px";
menuItem.appendChild(icon);
}
const text = document.createElement("span");
text.textContent = item.text;
menuItem.appendChild(text);
menuItem.onclick = item.callback;
menu.appendChild(menuItem);
}
document.body.removeChild(menu); // Menü entfernen
};
});
// Menüeinträge zum Menü hinzufügen
menu.appendChild(openStation);
// Menü zum DOM hinzufügen
document.body.appendChild(menu);
// Menü entfernen, wenn irgendwo anders geklickt wird
const handleClickOutside = () => {
if (document.body.contains(menu)) {
document.body.removeChild(menu);