Füge: Plus-Icon hinzu, wenn Stationen überlappen

- Funktion `checkOverlappingMarkers` hinzugefügt, die prüft, ob Marker überlappen, und bei Bedarf ein Plus-Icon anzeigt.
- Sichert ab, dass die Marker-Liste immer ein Array ist, um Fehler zu vermeiden.
- Verwendet `L.latLng` und `L.marker` für die präzise Positionierung des Plus-Icons bei überlappenden Stationen.
- Aktualisierte den Zustand für verschiedene Marker-Typen und Layer, um eine korrekte Anzeige sicherzustellen.
- Optimierte die Anzeige der Stationen und verbesserte die Tooltip- und Popup-Interaktionen.

Dieses Update verbessert die Übersichtlichkeit der Karte und vereinfacht das Navigieren bei überlappenden Stationen.

components/MapComponent.js

@@ -21,6 +21,14 @@ import ShowAddStationPopup from "./ShowAddStationPopup";
 import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
 //import { createRoot } from "react-dom/client";
 
+const plusRoundIcon = L.icon({
+  //iconUrl: "/img/plus_round.png", // Update with your actual path
+  iconUrl: "/img/plus_round.png", // Update with your actual path
+  iconSize: [32, 32],
+  iconAnchor: [35, 55],
+  className: "absolute top-0 left-0 z-10", // Adjust with Tailwind CSS classes
+});
+
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
@@ -308,12 +316,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
           '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       }).addTo(initMap);
 
-      const oms = new window.OverlappingMarkerSpiderfier(initMap, {
+      const overlappingMarkerSpiderfier =
-        nearbyDistance: 20,
+        new window.OverlappingMarkerSpiderfier(initMap, {
-      });
+          nearbyDistance: 20,
+        });
 
       setMap(initMap);
-      setOms(oms);
+      setOms(overlappingMarkerSpiderfier);
 
       initMap.on("zoomend", function () {
         // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
@@ -660,6 +669,16 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
 
         marker.addTo(poiLayerRef.current);
+        /*       //--------------
+        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]);
+        //------------ */
       });
     }
   }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]);
@@ -815,6 +834,7 @@ 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 () {
@@ -823,8 +843,23 @@ 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]);
+        //------------ */
       });
       map.addLayer(TALAS);
+
+      // Call the function here
+      checkOverlappingMarkers(oms, map, plusRoundIcon);
     }
   }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
 
@@ -847,7 +882,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(ECI);
     }
-  }, [map, eciMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, eciMarkers]);
 
   //console.log("eciMarkers", eciMarkers);
   //-------------------------------------------
@@ -868,7 +903,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(GSMModem);
     }
-  }, [map, gsmModemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, gsmModemMarkers]);
 
   //console.log("gsmModemMarkers", gsmModemMarkers);
   //-------------------------------------------
@@ -889,7 +924,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(CiscoRouter);
     }
-  }, [map, ciscoRouterMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, ciscoRouterMarkers]);
 
   //console.log("ciscoRouterMarkers", ciscoRouterMarkers);
   //-------------------------------------------
@@ -912,7 +947,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
       //toggleLayer(mapLayersVisibility.WAGO);
     }
-    // }, [map, wagoMarkers, mapLayersVisibility.WAGO]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+    // }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
   }, [map, wagoMarkers]);
   //console.log("wagoMarkers", wagoMarkers);
   //-------------------------------------------
@@ -933,7 +968,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(Siemens);
     }
-  }, [map, siemensMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, siemensMarkers]);
 
   //console.log("siemensMarkers", siemensMarkers);
   //-------------------------------------------
@@ -954,7 +989,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(OTDR);
     }
-  }, [map, otdrMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, otdrMarkers]);
 
   //console.log("otdrMarkers", otdrMarkers);
   //-------------------------------------------
@@ -975,7 +1010,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(WDM);
     }
-  }, [map, wdmMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, wdmMarkers]);
 
   //console.log("wdmMarkers", wdmMarkers);
   //-------------------------------------------
@@ -1078,7 +1113,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(GMA);
     }
-  }, [map, messstellenMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, messstellenMarkers]);
 
   //console.log("messstellenMarkers", messstellenMarkers);
   //-------------------------------------------
@@ -1099,7 +1134,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       });
       map.addLayer(TALASICL);
     }
-  }, [map, talasiclMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, talasiclMarkers]);
 
   //console.log("talasiclMarkers", talasiclMarkers);
   //-------------------------------------------
@@ -1119,7 +1154,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
       });
     }
-  }, [map, dauzMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, dauzMarkers]);
 
   //console.log("dauzMarkers", dauzMarkers);
   //-------------------------------------------
@@ -1139,7 +1174,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
       });
     }
-  }, [map, smsfunkmodemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, smsfunkmodemMarkers]);
 
   //console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
   //-------------------------------------------
@@ -1159,7 +1194,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
       });
     }
-  }, [map, ulafMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, ulafMarkers]);
 
   //console.log("ulafMarkers", ulafMarkers);
   //-------------------------------------------
@@ -1179,7 +1214,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         });
       });
     }
-  }, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+  }, [map, sonstigeMarkers]);
 
   //console.log("sonstige", sonstigeMarkers);
   //-------------------------------------------
@@ -1550,6 +1585,83 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     // Logik zur Aktualisierung der Map hier hinzufügen
     // Beispiel: Daten neu laden oder aktualisieren
   }, [poiReadTrigger]);
+  //---------------------------------------------------------
+  // Now update checkOverlappingMarkers to check if oms is initialized
+  function checkOverlappingMarkers(map, markers, plusIcon) {
+    // Ensure markers is always an array
+    if (!Array.isArray(markers)) {
+      console.error("The `markers` argument is not an array:", markers);
+      return;
+    }
+
+    const overlappingGroups = {};
+
+    // Group markers by coordinates as strings
+    markers.forEach((marker) => {
+      const latlngStr = marker.getLatLng().toString();
+      if (overlappingGroups[latlngStr]) {
+        overlappingGroups[latlngStr].push(marker);
+      } else {
+        overlappingGroups[latlngStr] = [marker];
+      }
+    });
+
+    // Add plus markers at coordinates where overlaps occur
+    for (const coords in overlappingGroups) {
+      if (overlappingGroups[coords].length > 1) {
+        const latLng = L.latLng(coords.match(/[-.\d]+/g).map(Number));
+        const plusMarker = L.marker(latLng, { icon: plusIcon });
+        plusMarker.addTo(map);
+
+        console.log("Adding plus icon marker at", latLng);
+      }
+    }
+  }
+
+  //---------------------------------------------------------
+  useEffect(() => {
+    if (map) {
+      // Combine all markers from different layers
+      const allMarkers = [
+        ...talasMarkers,
+        ...eciMarkers,
+        ...gsmModemMarkers,
+        ...ciscoRouterMarkers,
+        ...wagoMarkers,
+        ...siemensMarkers,
+        ...otdrMarkers,
+        ...wdmMarkers,
+        ...gmaMarkers,
+        ...messstellenMarkers,
+        ...talasiclMarkers,
+        ...dauzMarkers,
+        ...smsfunkmodemMarkers,
+        ...sonstigeMarkers,
+        ...ulafMarkers,
+      ];
+
+      // Call the function to check for overlaps and add plus icons
+      checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
+    }
+  }, [
+    map,
+    talasMarkers,
+    eciMarkers,
+    gsmModemMarkers,
+    ciscoRouterMarkers,
+    wagoMarkers,
+    siemensMarkers,
+    otdrMarkers,
+    wdmMarkers,
+    gmaMarkers,
+    messstellenMarkers,
+    talasiclMarkers,
+    dauzMarkers,
+    smsfunkmodemMarkers,
+    sonstigeMarkers,
+    ulafMarkers,
+  ]);
+
   //---------------------------------------------------------
 
   return (