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

Kontext Menü openInNewTab und openInSameWindow ganz oben in Kontext Menü anordnen

Browse Source
This commit is contained in:
ISA
2024-05-15 10:12:42 +02:00
parent 5f5f6b1f03
commit 5fb6a841cb
1 changed files with 71 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
components/MapComponent.js
View File

@@ -1,5 +1,5 @@
// components/MapComponent.js
import React, { useEffect, useRef, useState } from "react";
import React, { useEffect, useRef, useState, useMemo } from "react";
//import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
import L, { marker } from "leaflet";
import "leaflet/dist/leaflet.css";
@@ -127,10 +127,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
console.error("Fehler beim Aktualisieren der Position");
}
};
//---------------------------------------------
//----------------------------------------------------
//-----Kontextmenu----------------
function addContextMenuToMarker(marker) {
marker.unbindContextMenu(); // Entferne das Kontextmenü, um Duplikate zu vermeiden
marker.bindContextMenu({
contextmenu: true,
contextmenuWidth: 140,
@@ -150,14 +153,22 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}
// 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");
if (marker && marker.options && marker.options.link) {
console.log("Marker data:", baseUrl + marker.options.link);
window.open(baseUrl + marker.options.link, "_blank");
} else {
console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
}
}
// 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;
if (marker && marker.options && marker.options.link) {
console.log("Marker data:", baseUrl + marker.options.link);
window.location.href = baseUrl + marker.options.link;
} else {
console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
}
}
const zoomIn = (e) => {
@@ -205,6 +216,52 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
setShowPopup(true); // Popup öffnen
};
//-----Kontextmenu----ende------------
//--------------------------------------------------------------------------------
// Verwende useMemo, um die Kontextmenü-Items nur zu initialisieren, wenn notwendig
const contextMenuItems = useMemo(
() => [
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: (e) => {
const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
openInNewTab(e, clickedMarker);
},
},
{
text: "Station öffnen",
icon: "/img/screen_same.png",
//callback: (e) => openInSameWindow(e, marker),
callback: (e) => {
const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
openInSameWindow(e, clickedMarker);
},
},
"-", // Divider
{
text: "Station hinzufügen",
icon: "img/add_station.png",
className: "background-red",
callback: addStationCallback,
},
{
text: "Koordinaten anzeigen",
icon: "img/not_listed_location.png",
callback: showCoordinates,
},
"-", // Divider
{ text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
{ text: "Rauszoomen", icon: "img/zoom_out.png", callback: zoomOut },
{
text: "Hier zentrieren",
icon: "img/center_focus.png",
callback: centerHere,
},
],
[]
);
//----------------------------------------------------------------------------------
//------------------------------------------ */
const layerNames = {
"GSM Modem": "GSMMODEM",
@@ -653,32 +710,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
maxZoom: 15, // Maximale Zoomstufe
zoomControl: false,
contextmenu: true,
contextmenuItems: [
{
text: "Station hinzufügen",
icon: "img/add_station.png",
//style background red color
className: "background-red",
callback: addStationCallback,
},
{
text: "Koordinaten",
icon: "img/not_listed_location.png",
callback: showCoordinates,
},
"-", // Divider
{ text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
{
text: "Rauszoomen",
icon: "img/zoom_out.png",
callback: zoomOut,
},
{
text: "Hier zentrieren",
icon: "img/center_focus.png",
callback: centerHere,
},
],
contextmenuItems: contextMenuItems,
});
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
@@ -889,7 +921,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
talasMarkers.forEach((marker) => {
marker.addTo(map);
oms.addMarker(marker);
//console.log("Talas marker:", marker._latlng.lat, marker._latlng.lng);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
@@ -898,28 +929,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
/* //--------------
const latitude = marker._latlng.lat;
const longitude = marker._latlng.lng;
const plusMarker = L.marker([latitude, longitude], {
icon: plusRoundIcon,
zIndexOffset: 1000, // Higher z-index for visibility
});
// Add to the poiLayer
plusMarker.addTo(poiLayerRef.current);
console.log("Adding plus icon marker at", [latitude, longitude]);
//------------ */
addContextMenuToMarker(marker);
});
map.addLayer(TALAS);
console.log("map", map);
console.log("oms", oms);
//disable map contextmenu
map.options.contextmenu = false;
map.options.contextmenuItems = [];
oms.map.options.contextmenu = false;
oms.map.options.contextmenuItems = [];
// Call the function here
checkOverlappingMarkers(oms, map, plusRoundIcon);
}
}, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
//console.log("talasMarkers", talasMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
useEffect(() => {