From bb0c0eb04652b6cee4246fe6996d02b5b51c9cad Mon Sep 17 00:00:00 2001
From: Alix JEUDI--LEMOINE <alix.jeudi--lemoine@etu.uca.fr>
Date: Thu, 19 Jun 2025 11:30:37 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Removed=20query=20parameter=20subsc?=
 =?UTF-8?q?ription=20on=20renderPins=20and=20added=20a=20check=20to=20open?=
 =?UTF-8?q?=20the=20popup=20of=20a=20selected=20marker=20(fix=20popup=20op?=
 =?UTF-8?q?ens=20if=20pin=20in=20cluster).?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../leaflet-map/leaflet-map.component.ts      | 58 ++++++-------------
 1 file changed, 19 insertions(+), 39 deletions(-)

diff --git a/src/app/components/leaflet-map/leaflet-map.component.ts b/src/app/components/leaflet-map/leaflet-map.component.ts
index 4cb6dcf..d6b955f 100644
--- a/src/app/components/leaflet-map/leaflet-map.component.ts
+++ b/src/app/components/leaflet-map/leaflet-map.component.ts
@@ -335,51 +335,20 @@ export class LeafletMapComponent implements OnInit {
 
       this.markersMap[pin.id] = marker;
 
-      this.route.queryParams
-        .subscribe((params) => {
-          const pinId = params['pin'];
-          if (pinId) {
-            const marker = this.markersMap[pinId];
-            if (marker) {
-              setTimeout(() => {
-                marker.openPopup();
-              }, 1); // 1ms pour que l'événement popupopen se produise correctement
-
-              const latlng = marker.getLatLng();
-              const zoom = this.map.getZoom();
-              const offsetLat = 0.05 / Math.pow(2, zoom - 10);
-              this.map.setView(
-                L.latLng(latlng.lat + offsetLat, latlng.lng),
-                zoom
-              );
-            }
-          }
-        })
-        .unsubscribe();
       this.markerClusterGroup.addLayer(marker);
-
-      if (
-        this.selectedCountry === '__all__' &&
-        this.selectedPerson === '__all__'
-      ) {
-        this.map.fitBounds(
-          L.latLngBounds(
-            filteredPins.map((pin) => pin.location as [number, number])
-          ),
-          {
-            padding: [50, 50],
-            maxZoom: 10,
-            animate: true,
-            duration: 1.5,
-          }
-        );
-      }
     });
 
     this.markerClusterGroup.refreshClusters();
 
+    // Vérifier si un pin est sélectionné
+    const pinId = this.route.snapshot.queryParamMap.get('pin');
+
     // Ajuster la vue si un pays est sélectionné
-    if (this.selectedCountry !== '__all__' && filteredPins.length > 0) {
+    if (
+      this.selectedCountry !== '__all__' &&
+      filteredPins.length > 0 &&
+      !pinId
+    ) {
       const bounds = L.latLngBounds(
         filteredPins.map((pin) => pin.location as [number, number])
       );
@@ -390,6 +359,17 @@ export class LeafletMapComponent implements OnInit {
         duration: 1.5, // Durée de l'animation en secondes
       });
     }
+
+    if (pinId) {
+      const marker = this.markersMap[pinId];
+      if (marker) {
+        const latlng = marker.getLatLng();
+        this.map.setView(L.latLng(latlng.lat, latlng.lng), 20);
+        setTimeout(() => {
+          marker.openPopup();
+        }, 100);
+      }
+    }
   }
 
   private createDivIcon(htmlContent: string): L.DivIcon {