diff --git a/src/app/observatories/page.tsx b/src/app/observatories/page.tsx
index cc93d56..950ee4c 100644
--- a/src/app/observatories/page.tsx
+++ b/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,
},
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index e35d4f2..75b0438 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -88,7 +88,9 @@ export default function Sidebar({
{/*
{event.text1}
*/}
{event.text2}
-
+ {
+ (event.magnitude) ? : <>>
+ }
))}
diff --git a/src/components/map.tsx b/src/components/map.tsx
index 523a006..9d2f7e8 100644
--- a/src/components/map.tsx
+++ b/src/components/map.tsx
@@ -78,56 +78,57 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
// Add markers with location pulse
events.forEach((event) => {
- const color = getMagnitudeColor(event.magnitude);
- //
-
- // 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";
- quakeElement.style.display = "flex";
- quakeElement.style.alignItems = "center";
- quakeElement.style.justifyContent = "center";
-
- // Central dot
const dotElement = document.createElement("div");
- dotElement.style.width = "10px";
- dotElement.style.height = "10px";
- dotElement.style.backgroundColor = color;
- dotElement.style.borderRadius = "50%";
- dotElement.style.position = "absolute";
- 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";
- pulseElement.style.backgroundColor = `${color}80`; // Color with 50% opacity (hex alpha)
- pulseElement.style.borderRadius = "50%";
- pulseElement.style.position = "absolute";
- pulseElement.style.zIndex = "1";
+
+ if (event.magnitude) {
+ const color = getMagnitudeColor(event.magnitude);
+
+ // Create marker container
+ quakeElement.style.width = "50px"; // Increased size to accommodate pulse
+ quakeElement.style.height = "50px";
+ quakeElement.style.position = "absolute";
+ quakeElement.style.display = "flex";
+ quakeElement.style.alignItems = "center";
+ quakeElement.style.justifyContent = "center";
+
+ // Central dot
+ dotElement.style.width = "10px";
+ dotElement.style.height = "10px";
+ dotElement.style.backgroundColor = color;
+ dotElement.style.borderRadius = "50%";
+ dotElement.style.position = "absolute";
+ dotElement.style.zIndex = "2"; // Ensure dot is above pulse
+
+ // Pulsing ring
+ pulseElement.className = "location-pulse";
+ pulseElement.style.width = "20px"; // Initial size
+ pulseElement.style.height = "20px";
+ pulseElement.style.backgroundColor = `${color}80`; // Color with 50% opacity (hex alpha)
+ pulseElement.style.borderRadius = "50%";
+ pulseElement.style.position = "absolute";
+ pulseElement.style.zIndex = "1";
+ }
// Observatory marker
+ //
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(
-
+
);
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(`
${event.title}
-
Magnitude: ${event.magnitude}
+ ${ mapType === "observatories" ? `
${event.text1}
` : `
Magnitude: ${event.magnitude}
`}
${event.text2}
`);
diff --git a/src/types/Event.ts b/src/types/Event.ts
index 02a501f..677b163 100644
--- a/src/types/Event.ts
+++ b/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;
}