Previsioni del tempo con Javascript e OpenWeatherMap

Mattepuffo's logo
Previsioni del tempo con Javascript e OpenWeatherMap

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!


Condividi

1 Commenti

  • Angelo A.

    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

Commentami!