observatories icons fixed

src/app/observatories/page.tsx

@@ -15,7 +15,6 @@ export default function Observatories() {
         title: "Earthquake - Berlin Observatory",
         text1: "Logged by ",
         text2: "30 minutes ago",
-        magnitude: 8.5,
         longitude: 10.4515, // Near Berlin, Germany
         latitude: 52.52,
       },
@@ -24,7 +23,6 @@ export default function Observatories() {
         title: "New Observatory - Phuket, Thailand",
         text1: "Dr. Neil Armstrong",
         text2: "2 weeks ago",
-        magnitude: 0.0,
         longitude: -122.4194,
         latitude: 37.7749,
       },
@@ -33,7 +31,6 @@ export default function Observatories() {
         title: "Observatory Scientist Change",
         text1: "Dr. Samantha Green new lead scientist",
         text2: "1 month ago",
-        magnitude: 0.0,
         longitude: 139.6917,
         latitude: 35.6762,
       },

src/components/Sidebar.tsx

@@ -88,7 +88,9 @@ export default function Sidebar({
                 {/* <p className="text-xs text-neutral-600">{event.text1}</p> */}
                 <p className="text-xs text-neutral-500 mt-1">{event.text2}</p>
               </div>
-              <MagnitudeNumber magnitude={event.magnitude} />
+              {
+              (event.magnitude) ? <MagnitudeNumber magnitude={event.magnitude} /> : <></>
+              }
             </button>
           ))}
         </div>

src/components/map.tsx

@@ -78,12 +78,15 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
 
       // Add markers with location pulse
       events.forEach((event) => {
+
+        const quakeElement = document.createElement("div");
+        const dotElement = document.createElement("div");
+        const pulseElement = document.createElement("div");
+
+        if (event.magnitude) {
           const color = getMagnitudeColor(event.magnitude);
 
-        //<GiObservatory />
-
           // Create marker container
-        const quakeElement = document.createElement("div");
           quakeElement.style.width = "50px"; // Increased size to accommodate pulse
           quakeElement.style.height = "50px";
           quakeElement.style.position = "absolute";
@@ -92,7 +95,6 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
           quakeElement.style.justifyContent = "center";
 
           // Central dot
-        const dotElement = document.createElement("div");
           dotElement.style.width = "10px";
           dotElement.style.height = "10px";
           dotElement.style.backgroundColor = color;
@@ -101,7 +103,6 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
           dotElement.style.zIndex = "2"; // Ensure dot is above pulse
 
           // Pulsing ring
-        const pulseElement = document.createElement("div");
           pulseElement.className = "location-pulse";
           pulseElement.style.width = "20px"; // Initial size
           pulseElement.style.height = "20px";
@@ -109,25 +110,25 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
           pulseElement.style.borderRadius = "50%";
           pulseElement.style.position = "absolute";
           pulseElement.style.zIndex = "1";
+        }
 
         // Observatory marker
+        //<GiObservatory />
         const observatoryElement = document.createElement("div");
-        observatoryElement.style.fontSize = "24px"; // Adjust icon size
-        observatoryElement.style.color = "#FF5722"; // Set color
         const root = createRoot(observatoryElement); // `createRoot` is now the standard API
         root.render(
-          <GiObservatory style={{ fontSize: "24px", color: "#FF5722" }} />
+          <GiObservatory className="text-blue-600 text-2xl drop-shadow-lg" />
         );
 
         quakeElement.appendChild(pulseElement);
         quakeElement.appendChild(dotElement);
 
-        const marker = new mapboxgl.Marker({ element: mapType === "observatories"? observatoryElement : quakeElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
+        const marker = new mapboxgl.Marker({ element: mapType === "observatories" ? observatoryElement : quakeElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
 
         const popup = new mapboxgl.Popup({ offset: 25, closeButton: false, anchor: "bottom" }).setHTML(`
           <div>
             <h3>${event.title}</h3>
-            <p>Magnitude: ${event.magnitude}</p>
+            ${ mapType === "observatories" ? `<p>${event.text1}</p>` : `<p>Magnitude: ${event.magnitude}</p>`}
             <p>${event.text2}</p>
           </div>
         `);

src/types/Event.ts

@@ -1,9 +1,10 @@
 interface Event {
   id: string;
   title: string;
-  magnitude: number;
+  magnitude?: number;
   longitude: number;
   latitude: number;
+  text1: string;
   text2: string;
 }