thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

observatory map icons changed

Browse Source
This commit is contained in:
Emily Neighbour 2025-03-31 14:22:57 +01:00
parent 1b8893c25e
commit bc26e20d5c
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/observatories/page.tsx
View File

@ -50,6 +50,7 @@ export default function Observatories() {
setSelectedEventId={setSelectedEventId}
hoveredEventId={hoveredEventId}
setHoveredEventId={setHoveredEventId}
mapType="observatories"
></Map>
</div>
<Sidebar

37
src/components/map.tsx
View File

@ -5,6 +5,9 @@ import "mapbox-gl/dist/mapbox-gl.css";
import { GiObservatory } from "react-icons/gi";
import Event from "@appTypes/Event";
import getMagnitudeColor from "@utils/getMagnitudeColour";
import { userAgentFromString } from "next/server";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
interface MapComponentProps {
events: Event[];
@ -12,10 +15,11 @@ interface MapComponentProps {
setSelectedEventId: Dispatch<SetStateAction<string>>;
hoveredEventId: Event["id"];
setHoveredEventId: Dispatch<SetStateAction<string>>;
mapType: String;
}
// Map component with location-style pulsing dots, animations, and tooltips
function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEventId, setHoveredEventId }: MapComponentProps) {
function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEventId, setHoveredEventId, mapType }: MapComponentProps) {
const map = useRef<mapboxgl.Map | null>(null);
const markers = useRef<{ [key: string]: mapboxgl.Marker }>({});
const [mapBounds, setMapBounds] = useState<LngLatBounds>();
@ -79,13 +83,13 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
//<GiObservatory />
// Create marker container
const markerElement = document.createElement("div");
markerElement.style.width = "50px"; // Increased size to accommodate pulse
markerElement.style.height = "50px";
markerElement.style.position = "absolute";
markerElement.style.display = "flex";
markerElement.style.alignItems = "center";
markerElement.style.justifyContent = "center";
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");
@ -106,10 +110,19 @@ function MapComponent({ events, selectedEventId, setSelectedEventId, hoveredEven
pulseElement.style.position = "absolute";
pulseElement.style.zIndex = "1";
markerElement.appendChild(pulseElement);
markerElement.appendChild(dotElement);
// 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(
<GiObservatory style={{ fontSize: "24px", color: "#FF5722" }} />
);
const marker = new mapboxgl.Marker({ element: markerElement }).setLngLat([event.longitude, event.latitude]).addTo(map.current!);
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 popup = new mapboxgl.Popup({ offset: 25, closeButton: false, anchor: "bottom" }).setHTML(`
<div>
@ -203,4 +216,4 @@ export default function Map(props: MapComponentProps) {
<MapComponent {...props} />
</>
);
}
}