-
Notifications
You must be signed in to change notification settings - Fork 0
/
weather.html
96 lines (82 loc) · 4.68 KB
/
weather.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 py-5">
<h1>Antofagasta</h1>
<h2>La perla del norte </h2>
<p class="bajada"> Antofagasta, apodada como La Perla del Norte, es una ciudad, puerto y comuna del norte de Chile, capital de la provincia y de la región homónima. Según el censo de 2017, realizado por el INE, es la quinta ciudad más poblada del país y la comuna más poblada fuera de la Región Metropolitana con 361 873 habitantes.Las principales actividades industriales de Antofagasta se encuentran íntimamente ligadas a la minería. En las últimas décadas, desde los años 70, ha presentado un sostenido crecimiento en las áreas relativas a la construcción, comercio y hotelería, además de un notable desarrollo urbano. </p>
</div>
<div class="col-sm-6 py-5">
<div id="mapid"></div>
</div>
<div class="col-sm-12 py-5">
<p>Existe una serie de teorías para explicar el origen del topónimo Antofagasta y no se ha logrado llegar a un consenso respecto a este. Probablemente sea una palabra compuesta que proviene del cacán meridional anto (o hattun, que significa 'grande'), faya (o haya 'salar') y gasta ('pueblo'), y vendría a significar Pueblo del Salar Grande. Podría ser asimismo una palabra compuesta proveniente del quechua anta (cobre) y pakay (esconder): 'Escondrijo de Cobre'. Otra teoría la relaciona con Antofagasti ('Puerta del Sol'), nombre que los changos daban al actual Monumento Natural La Portada.[cita requerida]
Se dice que el nombre Antofagasta se debe a una decisión del presidente boliviano Mariano Melgarejo, quien, cerca del año 1870, renombró la ciudad en honor a una estancia que poseía en Antofagasta de la Sierra.</p>
<img src="antofagasta.jpg" >
</div>
<div id="mapid" ></div>
</div>
<div class="col-sm-12" style="border-top:1px solid #eee;">
<div class="row pt-3 pb-4 small">
<div class="col-sm-3">
<p><a href="index.html">Volver</a></p>
</div>
<div class="col-sm-9 text-right">
<p>Seminario Gráfica Computacional I 2018, Primer Semestre → Clase 1 → Viernes 16 de marzo</p>
</div>
</div>
</div>
</div>
</div>
<script>
var urlStart = "https://api.openweathermap.org/data/2.5/weather";
var urlCityID = 3899539;
var urlUnit = "metric";
var urlApiKey = "776db8de45435f2087b57859f6095941";
var url = urlStart + "?id=" + urlCityID + "&units=" + urlUnit + "&appid=" + urlApiKey;
var request = new XMLHttpRequest();
request.open('GET', url , true);
request.onload = function () {
var data = JSON.parse(this.response);
var lat = data.coord.lat;
var lon = data.coord.lon;
var ciudad = data.name;
var humedad = data.main.humidity;
var temperatura = Math.round(data.main.temp);
console.log(data);
console.log(lat);
console.log(lon);
console.log(ciudad);
console.log(humedad + "%");
console.log(temperatura + "º C");
//mapa
var mymap = L.map('mapid').setView([lat, lon], 15);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 20,
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors, ' + 'Imagery © <a href="https://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.marker([lat, lon]).addTo(mymap)
.bindPopup("<h5>"+ ciudad + "</h5><p>Hay " + temperatura + "ºC, con " + humedad + "% de humedad<p>").openPopup();
}
request.send();
</script>
</body>
</html>