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

- 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

.env.development

@@ -24,4 +24,4 @@ NEXT_PUBLIC_USE_MOCKS=true
 # z.B. http://10.10.0.13/xyz/index.aspx -> basePath in config.json auf /xyz setzen
 # basePath wird jetzt in public/config.json gepflegt
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.330
+NEXT_PUBLIC_APP_VERSION=1.1.331

.env.production

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=false
 # basePath wird jetzt in public/config.json gepflegt
 
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.1.330
+NEXT_PUBLIC_APP_VERSION=1.1.331

components/mainComponent/MapComponent.js

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

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nodemap",
-  "version": "1.1.330",
+  "version": "1.1.331",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodemap",
-      "version": "1.1.330",
+      "version": "1.1.331",
       "dependencies": {
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodemap",
-  "version": "1.1.330",
+  "version": "1.1.331",
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",