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,7 +186,9 @@ export function ObservatoryView() {
               </div>
             </div>
             <div className="flex-grow">
+              {!loading && (
                 <ObservatoryMap 
+                  key="observatory-map"
                   countries={Object.entries(countriesMap).map(([name, items]) => ({
                     name,
                     count: items.length
@@ -194,6 +196,7 @@ export function ObservatoryView() {
                   onCountrySelect={handleCountrySelect}
                   selectedCountry={selectedCountry}
                 />
+              )}
             </div>
           </div>
         </div>