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

Fix: Polyline-Layer-Visibility reagiert jetzt zuverlässig auf Redux-State

Browse Source 
- setupPolylines wird im useEffect asynchron aufgerufen
- Marker und Polylinien werden erst nach Abschluss der async-Operation gesetzt
- Sichtbarkeit der Kabelstrecken (Kabel-Layer) wird korrekt auf der Karte
This commit is contained in:
ISA
2025-08-20 15:52:56 +02:00
parent 44b29469b9
commit c8a14ee873
5 changed files with 63 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
components/mainComponent/MapComponent.js
View File

@@ -380,69 +380,72 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
});
cleanupPolylinesForMemory(polylines, map);
// Setze neue Marker und Polylinien mit den aktuellen Daten
if (polylineVisible) {
const { markers: newMarkers, polylines: newPolylines } = setupPolylines(
map,
linePositions,
lineColors,
tooltipContents,
setNewCoords,
tempMarker,
currentZoom,
currentCenter,
polylineVisible // kommt aus Redux
);
// Setze neue Marker und Polylinien mit den aktuellen Daten (asynchron!)
const updatePolylines = async () => {
if (polylineVisible) {
const { markers: newMarkers, polylines: newPolylines } = await setupPolylines(
map,
linePositions,
lineColors,
tooltipContents,
setNewCoords,
tempMarker,
currentZoom,
currentCenter,
polylineVisible // kommt aus Redux
);
(Array.isArray(newPolylines) ? newPolylines : []).forEach((polyline, index) => {
const tooltipContent =
tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] ||
"Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten";
(Array.isArray(newPolylines) ? newPolylines : []).forEach((polyline, index) => {
const tooltipContent =
tooltipContents[`${linePositions[index].idLD}-${linePositions[index].idModul}`] ||
"Die Linie ist noch nicht in Webservice vorhanden oder bekommt keine Daten";
polyline.bindTooltip(tooltipContent, {
permanent: false,
direction: "auto",
sticky: true,
offset: [20, 0],
pane: "tooltipPane",
});
polyline.bindTooltip(tooltipContent, {
permanent: false,
direction: "auto",
sticky: true,
offset: [20, 0],
pane: "tooltipPane",
});
polyline.on("mouseover", e => {
const tooltip = polyline.getTooltip();
if (tooltip) {
const mousePos = e.containerPoint;
const mapSize = map.getSize();
polyline.on("mouseover", e => {
const tooltip = polyline.getTooltip();
if (tooltip) {
const mousePos = e.containerPoint;
const mapSize = map.getSize();
let direction = "right";
let direction = "right";
if (mousePos.x > mapSize.x - 100) {
direction = "left";
} else if (mousePos.x < 100) {
direction = "right";
if (mousePos.x > mapSize.x - 100) {
direction = "left";
} else if (mousePos.x < 100) {
direction = "right";
}
if (mousePos.y > mapSize.y - 100) {
direction = "top";
} else if (mousePos.y < 100) {
direction = "bottom";
}
tooltip.options.direction = direction;
polyline.openTooltip(e.latlng);
}
});
if (mousePos.y > mapSize.y - 100) {
direction = "top";
} else if (mousePos.y < 100) {
direction = "bottom";
}
tooltip.options.direction = direction;
polyline.openTooltip(e.latlng);
}
polyline.on("mouseout", () => {
polyline.closeTooltip();
});
});
polyline.on("mouseout", () => {
polyline.closeTooltip();
});
});
cleanupMarkers(markers, oms);
setMarkers(newMarkers);
setPolylines(newPolylines);
} else {
cleanupPolylinesForMemory(polylines, map);
setPolylines([]);
}
cleanupMarkers(markers, oms);
setMarkers(newMarkers);
setPolylines(newPolylines);
} else {
cleanupPolylinesForMemory(polylines, map);
setPolylines([]);
}
};
updatePolylines();
}, [
map,
linePositions,