Previsioni del tempo con Javascript e OpenWeatherMap
Ci sono vari servizi che mettono a disposizione API per le previsioni meteo, e tra le varie a me piace molto OpenWeatherMap!
Con un account gratuito è possibile usare le API REST, con alcune limitazioni (poche in verità).
Quindi, prima di tutto iscrivetevi e copiatevi la vostra API KEY.
Dopo di che andate a visualizzare le varie possibilità a disposizione (sempre a questo link).
Noi andremo a vedere le previsioni attuali prendendo le coordinate (che ricordate richiede l'ok dell'utente) usando Javascript e AJAX:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta charset="UTF-8">
<script>
window.onload = function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
document.querySelector('.ajax').innerHTML = position.coords.latitude + " - " + position.coords.longitude;
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var owKey = 'API_KEY';
var owUrl = 'http://api.openweathermap.org/data/2.5/forecast?lat=' + lat + '&lon=' + lon + '&appid=' + owKey;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var owRes = JSON.parse(this.responseText);
console.log(owRes);
}
};
xmlhttp.open("GET", owUrl, true);
xmlhttp.send();
});
} else {
document.getElementsByClassName('.ajax').innerHTML = "Geolocalizzazione non supportata";
}
};
</script>
</head>
<body>
<div class="ajax"></div>
</body>
</html>
Vi basta prendere i dati presi dal JSON.parse, e metterli nella pagina.
Le coordinate le prendiamo con navigator.geolocation.getCurrentPosition, che farà apparire un pop-up nel browser, in modo che l'utente possa scegliere se farsi geolocalizzare o no.
Enjoy!
javascript ajax json parse navigator geolocation getCurrentPosition openweathermap
1 Commenti
Ciao, bello questo script ma non viene ne il pop-up con Geolocalizzazione e ne l'errore. Ho usato L'API di default di OpenWeather. È sufficiente lanciarlo col browser o devo usarlo con un web server con Apache? Grazie
27/03/2021