Created
October 22, 2018 19:06
-
-
Save ProfAndreaPollini/3fc926b64db5fccabe61b69cd4db90b7 to your computer and use it in GitHub Desktop.
EARTHQUAKEVIS - VIsualizzazione Terremoti in tempo reale /1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" /> | |
| <!-- Make sure you put this AFTER Leaflet's CSS --> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="page-container"> | |
| <div class="pure-g"> | |
| <div class="pure-u-1-3"> | |
| <div id="h-list"></div> | |
| </div> | |
| <div class="pure-u-2-3"> | |
| <div id="details"></div> | |
| <div id="mapid"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| console.log("OK"); | |
| let earthquakes = []; | |
| let lastUpdate = undefined; | |
| var mymap = L.map("mapid").setView([51.505, -0.09], 8); | |
| const mapTag = document.getElementById("mapid"); | |
| mapTag.style.display = "none"; | |
| L.tileLayer( | |
| "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", | |
| { | |
| attribution: | |
| 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| maxZoom: 13, | |
| id: "mapbox.streets", | |
| accessToken: | |
| "<YOUR TOKEN>" | |
| } | |
| ).addTo(mymap); | |
| let HList = document.getElementById("h-list"); | |
| function getEarthquakeDetails(earthquake) { | |
| const { mag, place, alert, tsunami } = earthquake.properties; | |
| const alertDetails = alert || "NO ALERT"; | |
| const alertTsunami = tsunami || "NO TSUNAMI ALERT"; | |
| const details = `<h3>${place}</h3> <p>ALERT = ${alertDetails}</p> | |
| <p>TSUNAMI = ${alertTsunami}</p>`; | |
| const longitude = earthquake.geometry.coordinates[0]; | |
| const latitude = earthquake.geometry.coordinates[1]; | |
| const depth = earthquake.geometry.coordinates[2]; | |
| mymap.flyTo([latitude, longitude]); | |
| console.log(earthquake); | |
| return details; | |
| } | |
| fetch( | |
| "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson" | |
| ) | |
| .then(response => response.json()) | |
| .then(body => { | |
| const { features, metadata } = body; | |
| console.log(features); | |
| let codesAlreadySeen = earthquakes.map(e => e.id); | |
| console.log(codesAlreadySeen); | |
| lastUpdate = Date(metadata.generated); | |
| features.forEach(feature => { | |
| if (!codesAlreadySeen.includes(feature.id)) { | |
| earthquakes.push(feature); | |
| let h = document.createElement("div"); | |
| console.log(feature); | |
| h.setAttribute("h-id", feature.id); | |
| const { mag, place } = feature.properties; | |
| let magClass = ""; | |
| if (mag <= 1) { | |
| magClass = "mag-1"; | |
| } else { | |
| magClass = "mag-" + Math.trunc(mag); | |
| } | |
| h.setAttribute("class", magClass); | |
| h.innerHTML = "<h3>" + place + "</h3><p>mag = " + mag + "</p>"; | |
| h.onmouseenter = event => { | |
| console.log(event.target.getAttribute("h-id")); | |
| document.getElementById("details").innerHTML = getEarthquakeDetails( | |
| feature | |
| ); | |
| mapTag.style.display = "block"; | |
| }; | |
| h.onmouseleave = event => { | |
| document.getElementById("details").innerHTML = ""; | |
| mapTag.style.display = "none"; | |
| //mymap.setMinZoom(1); | |
| //mymap.setMaxZoom(11); | |
| //mymap.fitWorld(); | |
| // mymap.setMinZoom(13); | |
| }; | |
| HList.prepend(h); | |
| } | |
| }); | |
| console.log(earthquakes); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .page-container { | |
| margin: 20px; | |
| } | |
| #mapid { | |
| height: 680px; | |
| } | |
| .mag-1 { | |
| background-color: rgb(165, 214, 167) | |
| } | |
| .mag-2 { | |
| background-color: rgb(102, 187, 106) | |
| } | |
| .mag-3 { | |
| background-color: rgb(56, 142, 60) | |
| } | |
| .mag-4 { | |
| background-color: rgb(255, 235, 59) | |
| } | |
| .mag-5 { | |
| background-color: rgb(255, 193, 7) | |
| } | |
| .mag-6 { | |
| background-color: rgb(251, 140, 0) | |
| } | |
| .mag-7 { | |
| background-color: rgb(255, 112, 67) | |
| } | |
| .mag-8 { | |
| background-color: rgb(211, 47, 47) | |
| } | |
| .mag-9 { | |
| background-color: rgb(198, 40, 40) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment