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

Add: Kontextmenü-Funktionalität für alle Stationen auf der Karte

Browse Source 
Dieser Commit führt eine erweiterte Interaktion mit den Kartenmarkern durch die Implementierung von openInNewTab und  openInSameWindow. 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.
This commit is contained in:
ISA
2024-05-07 10:49:28 +02:00
parent 33ac6e3ca5
commit 91ef7d6db9
1 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/MapComponent.js
View File

@@ -290,16 +290,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
contextmenu: true,
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) => showCoordinates(e, marker),
},
{
text: "Koordinaten",
icon: "img/screen_same.png",
@@ -393,7 +383,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [
{ text: "Station hinzufügen", callback: addStationCallback },
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
@@ -404,16 +393,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
icon: "/img/screen_same.png",
callback: (e) => openInSameWindow(e, marker),
},
{
text: "Koordinaten anzeigen",
icon: "/img/screen_same.png",
callback: (e) => showCoordinates(e, marker),
},
"-", // Divider
{ text: "Reinzoomen", callback: zoomIn },
{ text: "Rauszoomen", callback: zoomOut },
{ text: "Hier zentrieren", callback: centerHere },
],
});
}
@@ -442,12 +421,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
};
// Funktion zum Anzeigen der Koordinaten
function showCoordinates(e, marker) {
const latLng = marker.getLatLng();
const showCoordinates = (e) => {
alert(
`Latitude: ${latLng.lat.toFixed(5)}, Longitude: ${latLng.lng.toFixed(5)}`
"Breitengrad: " +
e.latlng.lat.toFixed(5) +
"\nLängengrad: " +
e.latlng.lng.toFixed(5)
);
}
};
const showData = (e) => {};
const showTalas = (e) => {
map.addLayer(TALAS);
@@ -901,6 +882,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(ECI);
}
@@ -922,6 +904,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(GSMModem);
}
@@ -943,6 +926,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(CiscoRouter);
}
@@ -964,6 +948,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(WAGO);
@@ -987,6 +972,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(Siemens);
}
@@ -1008,6 +994,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(OTDR);
}
@@ -1029,6 +1016,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(WDM);
}
@@ -1110,6 +1098,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(GMA);
}
@@ -1132,6 +1121,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(GMA);
}
@@ -1153,6 +1143,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
map.addLayer(TALASICL);
}
@@ -1174,6 +1165,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
}
}, [map, dauzMarkers]);
@@ -1194,6 +1186,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
}
}, [map, smsfunkmodemMarkers]);
@@ -1214,6 +1207,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
}
}, [map, ulafMarkers]);
@@ -1234,6 +1228,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.on("mouseout", function () {
this.closePopup();
});
addContextMenuToMarker(marker);
});
}
}, [map, sonstigeMarkers]);