From 6d74227747d66db2e6b5bd46359451079ac264c4 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 18 Apr 2024 07:50:03 +0200
Subject: [PATCH] OverlappingMarkerSpiderfier funktioniert , aber muss noch
 optimiert werden, bei 2 Marker in einem gleichen Koordinaten kein Problem,
 bei 5 Devices in eeinem Koordinaten muss zuerst reinzoomen dann funktioniert
 es

---
 lib/OverlappingMarkerSpiderfier.js | 73 ++++++++++++------------------
 1 file changed, 30 insertions(+), 43 deletions(-)

diff --git a/lib/OverlappingMarkerSpiderfier.js b/lib/OverlappingMarkerSpiderfier.js
index a953b3303..b6c146090 100644
--- a/lib/OverlappingMarkerSpiderfier.js
+++ b/lib/OverlappingMarkerSpiderfier.js
@@ -5,12 +5,12 @@ export class OverlappingMarkerSpiderfier {
     this.map = map;
     this.markers = [];
     this.markerListeners = [];
-    this.listeners = {};
+    this.keepSpiderfied = options.keepSpiderfied || false;
     this.nearbyDistance = options.nearbyDistance || 20;
     this.circleSpiralSwitchover = options.circleSpiralSwitchover || 9;
-    this.circleFootSeparation = options.circleFootSeparation || 25; // pixels
+    this.circleFootSeparation = options.circleFootSeparation || 25;
     this.circleStartAngle = options.circleStartAngle || Math.PI / 6;
-    this.spiralFootSeparation = options.spiralFootSeparation || 28; // pixels
+    this.spiralFootSeparation = options.spiralFootSeparation || 28;
     this.spiralLengthStart = options.spiralLengthStart || 11;
     this.spiralLengthFactor = options.spiralLengthFactor || 5;
     this.legWeight = options.legWeight || 1.5;
@@ -20,8 +20,8 @@ export class OverlappingMarkerSpiderfier {
     };
 
     this.initMarkerArrays();
-    this.map.on("click", this.unspiderfy.bind(this));
-    this.map.on("zoomend", this.unspiderfy.bind(this));
+    this.map.on("click", () => this.unspiderfy());
+    this.map.on("zoomend", () => this.unspiderfy());
   }
 
   initMarkerArrays() {
@@ -30,8 +30,9 @@ export class OverlappingMarkerSpiderfier {
   }
 
   addMarker(marker) {
-    if (marker._oms) return this;
-    marker._oms = true;
+    if (!marker._oms) {
+      marker._oms = {}; // Stellt sicher, dass _oms ein Objekt ist
+    }
 
     const listener = () => {
       this.spiderListener(marker);
@@ -45,69 +46,55 @@ export class OverlappingMarkerSpiderfier {
   }
 
   spiderListener(marker) {
-    const spidered = !!marker._omsData;
+    const spidered = marker._oms.spidered;
     if (!spidered) {
       const nearMarkers = this.nearbyMarkers(marker);
       if (nearMarkers.length > 1) {
         this.spiderfy(nearMarkers);
       }
+    } else {
+      this.unspiderfy(); // Schließt alle gespiderfied Marker, wenn einer erneut geklickt wird
     }
   }
 
   nearbyMarkers(marker) {
-    const nearby = [];
-    const markerPt = this.map.latLngToLayerPoint(marker.getLatLng());
-    this.markers.forEach((m) => {
-      if (m !== marker) {
-        const mPt = this.map.latLngToLayerPoint(m.getLatLng());
-        const distanceSq = this.ptDistanceSq(mPt, markerPt);
-        if (distanceSq < this.nearbyDistance * this.nearbyDistance) {
-          nearby.push(m);
-        }
-      }
+    return this.markers.filter((m) => {
+      const distance = this.map.distance(marker.getLatLng(), m.getLatLng());
+      return distance < this.nearbyDistance && marker !== m;
     });
-    return nearby;
   }
 
   spiderfy(markers) {
     const centerPt = this.map.latLngToLayerPoint(markers[0].getLatLng());
-    markers.forEach((marker, index) => {
-      const angle =
-        this.circleStartAngle + (index * 2 * Math.PI) / markers.length;
-      const legLength =
-        this.circleFootSeparation * (2 + index / markers.length);
+    markers.forEach((marker, i) => {
+      const angle = this.circleStartAngle + (i * 2 * Math.PI) / markers.length;
+      const legLength = this.circleFootSeparation * (2 + i / markers.length);
       const newPt = L.point(
         centerPt.x + legLength * Math.cos(angle),
         centerPt.y + legLength * Math.sin(angle)
       );
-
       const newLatLng = this.map.layerPointToLatLng(newPt);
+
+      if (!marker._oms) {
+        marker._oms = {}; // Stellt sicher, dass _oms ein Objekt ist
+      }
+
+      // Speichert die aktuelle Position, bevor sie verändert wird
+      marker._oms.usualPosition = marker.getLatLng();
+      marker._oms.spidered = true; // Markiert, dass der Marker gespiderfied ist
+
       marker.setLatLng(newLatLng);
       marker.setZIndexOffset(1000);
-
-      const polyline = L.polyline([marker.getLatLng(), newLatLng], {
-        color: this.legColors.usual,
-        weight: this.legWeight,
-        clickable: false,
-      });
-      this.map.addLayer(polyline);
     });
   }
-
   unspiderfy() {
     this.markers.forEach((marker) => {
-      if (marker._omsData) {
-        marker.setLatLng(marker._omsData.usualPosition);
+      if (marker._oms && marker._oms.spidered) {
+        // Setzt den Marker nur dann zurück, wenn er gespiderfied war
+        marker.setLatLng(marker._oms.usualPosition);
         marker.setZIndexOffset(0);
-        this.map.removeLayer(marker._omsData.leg);
-        delete marker._omsData;
+        marker._oms.spidered = false; // Setzt zurück, dass der Marker nicht mehr gespiderfied ist
       }
     });
   }
-
-  ptDistanceSq(pt1, pt2) {
-    const dx = pt1.x - pt2.x;
-    const dy = pt1.y - pt2.y;
-    return dx * dx + dy * dy;
-  }
 }