-
Notifications
You must be signed in to change notification settings - Fork 0
/
details.js
36 lines (32 loc) · 1.61 KB
/
details.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const locationEl = document.getElementById("earthquake-location");
const timeEl = document.getElementById("earthquake-time");
const magnitudeEl = document.getElementById("earthquake-magnitude");
const depthEl = document.getElementById("earthquake-depth");
const tsunamiEl = document.getElementById("earthquake-tsunami");
const linkEl = document.createElement("a");
const earthquakeLocation = localStorage.getItem("location");
const tsunamiWarning = localStorage.getItem("tsunami");
let latitude = parseFloat(localStorage.getItem("latitude")) || 0;
let longitude = parseFloat(localStorage.getItem("longitude")) || 0;
const eventId = localStorage.getItem("eventId");
locationEl.textContent = earthquakeLocation;
const map = L.map("map").setView([latitude, longitude], 4);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'Map data © <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
L.marker([latitude, longitude]).addTo(map);
locationEl.textContent = earthquakeLocation;
timeEl.textContent = localStorage.getItem("time");
magnitudeEl.textContent = `Magnitude: ${parseFloat(
localStorage.getItem("magnitude")
).toFixed(2)}`;
depthEl.textContent = `Depth: ${parseFloat(
localStorage.getItem("depth")
).toFixed(2)} km`;
tsunamiEl.textContent = `Tsunami Warning: ${
tsunamiWarning === "1" ? "Yes" : "No"
}`;
linkEl.innerHTML = `<a href="https://earthquake.usgs.gov/earthquakes/eventpage/${eventId}" target="_blank" class="underline my-2 font-semibold">USGS Earthquake Details</a>`;
document.querySelector(".card").appendChild(linkEl);