-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (85 loc) · 5.36 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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=Abel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" 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>Mediante consulta a los M4.5+Earthquakes del Past Day, podemos enterarnos que el último registro corresponde a un movimiento de M<span id="magnitud"></span> ocurrido a las<span id="hora"></span> GMT en <span id="lugar"></span>, con epicentro en las coordenadas <span id="coords"></span>.</p>
<p>Para ser más preciso, este es el epicentro registrado:</p>
<div id="mapid"></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 greenIcon = L.icon({
iconUrl: 'alerta.png',
iconSize: [95, 95], // size of the icon
iconAnchor: [50, 94], // point of the icon which will correspond to marker's location
});
//
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 = new Date(data.features[0].properties.time);
var whenUTC = when.toUTCString();
var magnitud = data.features[0].properties.mag
document.getElementById("magnitud").innerHTML = magnitud;
document.getElementById("lugar").innerHTML = where.split(',')[1];
document.getElementById("hora").innerHTML = whenUTC.split(' ')[4];
document.getElementById("coords").innerHTML = "("+ lat + "," + lon +")";
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], {icon: greenIcon}).addTo(mymap)
.bindPopup("<h5>"+ magnitud + "</h5><p>" + lat + "," + lon + "<p>").openPopup();
}
request.send();
</script>
</body>
</html>