-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (75 loc) · 4.56 KB
/
index.html
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- para decirle que se ajuste el tamaño -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Seminario Gráfica Computacional I 2018, Primer Semestre → Clase 1 → Viernes 16 de marzo</title> <!-- el titulo q aparece arriba en la pestaña -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/> <!-- aquí se puso el mapa en el unpkg -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700" rel="stylesheet"> <!-- fuentes de google -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 py-5">
<h1>Tembló</h1>
<h2>En alguna parte del mundo</h2>
<p>Usaré espanglish:</p>
<p>El <a href="https://earthquake.usgs.gov/">Earthquake Hazards Program</a> del <a href="https://www.usgs.gov/">USGS</a>, tiene un servicio de <a href="https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php">GeoJSON Summary Format</a>, donde pueder is a buscar data sobre los movimientos telúricos alrededor del mundo.</p>
<p>Consultando el registro de los M4.5+ Earthquakes del Past Day, yo puedo asegurarles de que el último movimento ocurrió por acá: <span id="lugar"></span>.</p>
<p>Para ser más preciso, este es el epicentro registrado:</p>
<div id="mapid" style="width: 400px; height: 400px; margin-bottom: 20px;"></div>
<p>Si quieren ver la hora a la que ocurrió este movimiento telúrico, métanse a la consola de Javascript del Navegador, allí hay un número raro. Ese número es un Unix Timestamp, que pueden traducir en <a href="https://www.unixtimestamp.com/" target="_blank">https://www.unixtimestamp.com/</a></p>
</div>
<div class="col-sm-6 pb-5">
<p>Antes de continuar, necesito que cada uno de ustedes genere una cuenta en <a href="https://home.openweathermap.org/users/sign_up" target="_blank">OpenWeatherMap</a>. Vamos a usar la <a href="https://openweathermap.org/api">WeatherAPI</a>, y para ello, es mejor que cada cual cuente con su <a href="http://openweathermap.org/appid">APIKey</a>.</p>
</div>
<div class="col-sm-6 pb-5">
<p>¿De qué está hablando?¿Qué es una API? No es nada complicado. De hecho, se trata de algo creado para facilitar la programación, en rigor es una <a href="https://es.wikipedia.org/wiki/Interfaz_de_programaci%C3%B3n_de_aplicaciones" title="Wikipedia">Interfaz de programación de aplicaciones.</a></p>
</div>
<div class="col-sm-12" style="border-top:1px solid #eee;">
<div class="row pt-3 pb-4 small">
<div class="col-sm-9">
<p>Seminario Gráfica Computacional I 2018, Primer Semestre → Clase 1 → Viernes 16 de marzo</p>
</div>
<div class="col-sm-3 text-right">
<p><a href="weather.html">Continuar</a></p>
</div>
</div>
</div>
</div>
</div>
<script> // aquí empieza js
var request = new XMLHttpRequest();
request.open('GET', 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson', true);
request.onload = function () {
var data = JSON.parse(this.response);
//
var lat = data.features[0].geometry.coordinates[1];
var lon = data.features[0].geometry.coordinates[0];
var where = data.features[0].properties.place;
var when = (data.features[0].properties.time)/1000;
var magnitud = data.features[0].properties.mag
document.getElementById("lugar").innerHTML = where;
console.log(data);
console.log(when);
//mapa
var mymap = L.map('mapid').setView([lat, lon], 2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([lat, lon]).addTo(mymap)
.bindPopup("<h5>"+ magnitud + "</h5><p>" + lat + "," + lon + "<p>").openPopup();
}
request.send();
</script>
</body>
</html>