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} setSelectedEventId={setSelectedEventId}
hoveredEventId={hoveredEventId} hoveredEventId={hoveredEventId}
setHoveredEventId={setHoveredEventId} setHoveredEventId={setHoveredEventId}
mapType="observatories"
></Map> ></Map>
</div> </div>
<Sidebar <Sidebar

35
src/components/map.tsx
View File

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