observatory

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%' }}

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>