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

Station Status Meldungen in Popup hinzufügen

Browse Source
This commit is contained in:
ISA
2024-04-17 07:49:49 +02:00
parent 6a3e49fd0e
commit e8412f3dc3
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
components/MapComponent.js
View File

@@ -686,15 +686,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// Marker hinzufügen für GisStationsStaticDistrict // Marker hinzufügen für GisStationsStaticDistrict
useEffect(() => { useEffect(() => {
if (map && GisStationsStaticDistrict.length > 0) { if (map && GisStationsStaticDistrict.length > 0) {
// Zuerst alte Marker entfernen
map.eachLayer((layer) => { map.eachLayer((layer) => {
if (layer instanceof L.Marker) { if (layer instanceof L.Marker) {
map.removeLayer(layer); map.removeLayer(layer);
} }
}); });
// Neue Marker für jede Station hinzufügen
GisStationsStaticDistrict.forEach((station) => { GisStationsStaticDistrict.forEach((station) => {
// Alle Status-Objekte mit gleicher IdLD finden
const matchingStatuses = GisStationsStatusDistrict.filter(
(status) => status.IdLD === station.IdLD
);
let additionalInfo = "";
// Alle gefundenen Me-Werte zu einem String hinzufügen
matchingStatuses.forEach((status) => {
additionalInfo += `<br>${status.Me} (${status.Na}) `;
});
const marker = L.marker([station.X, station.Y], { const marker = L.marker([station.X, station.Y], {
icon: L.icon({ icon: L.icon({
iconUrl: getIconPath(station.Icon), iconUrl: getIconPath(station.Icon),
@@ -705,27 +714,19 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}), }),
}).addTo(map); }).addTo(map);
// Popup beim Überfahren mit der Maus öffnen
marker.on("mouseover", function (e) { marker.on("mouseover", function (e) {
this.openPopup(); this.openPopup();
}); });
// Popup schließen, wenn die Maus den Marker verlässt
marker.on("mouseout", function (e) { marker.on("mouseout", function (e) {
this.closePopup(); this.closePopup();
}); });
// Ein Popup mit Informationen zur Station hinzufügen
marker marker
.bindPopup( .bindPopup(
`<b>${station.LD_Name}</b><br>${station.Device}<br>${station.Area_Short} ${station.Area_Name}<br>${station.Location_Short} ${station.Location_Name}<br><br>` `<b>${station.LD_Name}</b><br>${station.Device}<br>${station.Area_Short} ${station.Area_Name}<br>${station.Location_Short} ${station.Location_Name}${additionalInfo}<br><br>`
) )
.openPopup(); .openPopup();
// Diese Zeile entfernt das automatische Tooltip
// marker.bindTooltip(station.LD_Name, {
// permanent: false,
// direction: "top",
// });
}); });
} }
}, [map, GisStationsStaticDistrict, GisStationsStatusDistrict]); // Include GisStationsStatusDistrict in dependencies }, [map, GisStationsStaticDistrict, GisStationsStatusDistrict]); // Include GisStationsStatusDistrict in dependencies