From 506e9f8f05b0110db2fe14685aa9ab99f4a76040 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 4 May 2025 17:04:54 +0200
Subject: [PATCH] observatory

---
 components/observatory/observatory-map.tsx  |  8 ++++++++
 components/observatory/observatory-view.tsx | 19 +++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/components/observatory/observatory-map.tsx b/components/observatory/observatory-map.tsx
index 0ede26b2..d73a5e46 100644
--- a/components/observatory/observatory-map.tsx
+++ b/components/observatory/observatory-map.tsx
@@ -119,6 +119,7 @@ export function ObservatoryMap({
   selectedCountry
 }: ObservatoryMapProps) {
   const [isMounted, setIsMounted] = useState(false);
+  const [mapKey, setMapKey] = useState(Date.now()); // Unique key for map container
   
   // We'll need the Leaflet CSS
   useEffect(() => {
@@ -154,6 +155,12 @@ export function ObservatoryMap({
     }
     
     setIsMounted(true);
+    
+    // Return cleanup function
+    return () => {
+      // Generate a new key if the component is unmounted and remounted
+      setMapKey(Date.now());
+    };
   }, []);
   
   // Prepare countries with coordinates
@@ -210,6 +217,7 @@ export function ObservatoryMap({
   return (
     <div className="w-full h-full">
       <MapContainer
+        key={mapKey} // Add a unique key to ensure the map is only initialized once
         center={[20, 0]} // Center of the world
         zoom={2}
         style={{ height: '100%', width: '100%' }}
diff --git a/components/observatory/observatory-view.tsx b/components/observatory/observatory-view.tsx
index acf59b3a..333b52b5 100644
--- a/components/observatory/observatory-view.tsx
+++ b/components/observatory/observatory-view.tsx
@@ -186,14 +186,17 @@ export function ObservatoryView() {
               </div>
             </div>
             <div className="flex-grow">
-              <ObservatoryMap 
-                countries={Object.entries(countriesMap).map(([name, items]) => ({
-                  name,
-                  count: items.length
-                }))}
-                onCountrySelect={handleCountrySelect}
-                selectedCountry={selectedCountry}
-              />
+              {!loading && (
+                <ObservatoryMap 
+                  key="observatory-map"
+                  countries={Object.entries(countriesMap).map(([name, items]) => ({
+                    name,
+                    count: items.length
+                  }))}
+                  onCountrySelect={handleCountrySelect}
+                  selectedCountry={selectedCountry}
+                />
+              )}
             </div>
           </div>
         </div>