Immagine
Di seguito è riportato un esempio di come ottenere dati meteorologici con Leaflet.js e l'API gratuitaOpen-Meteo.

L'esempio è molto semplice, cliccando su un punto della mappa verrà creato un marker con alcuni dei dati meteorologici restituiti dall'API.Open-Meteo.
Open-Meteo(Totalmente gratuito)
Descrizione : API meteo gratuita senza registrazione richiesta. Offre dati meteorologici da fonti aperte.
Dati offerti : meteo attuale, previsioni, nessun limite di chiamate.
Sito web :Open-Meteo
Fare clic in un punto qualsiasi della mappa...
Opuscolo © Collaboratori di OpenStreetMap
Opuscolo © Collaboratori di OpenStreetMap
Codice di esempio (Javascript)

        // Initialize the map
        var map = L.map('map').setView([0, 0], 2);

        // Add OpenStreetMap tiles
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);


        // Función para obtener datos meteorológicos de Open-Meteo
        async function getWeather(lat, lon) {
            const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true`;
            const response = await fetch(url);
            const data = await response.json();
            return data.current_weather;
        }

        // Función para agregar marcadores de clima al mapa
        async function addWeatherMarker(lat, lon) {
            const weather = await getWeather(lat, lon);
            const marker = L.marker([lat, lon]).addTo(map);
            marker.bindPopup(`
                <b>Ubication</b><br>
                weathercode: ${weather.weathercode}<br>
                temperature: ${weather.temperature} °C<br>
                windspeed: ${weather.windspeed} km/h
            `).openPopup();
        }

        map.on('click', function(e) {        
                addWeatherMarker(e.latlng.lat, e.latlng.lng);      
            });




Comentar:
captcha

Comentarios: Sin comentarios

Di seguito potete trovare i comandi necessari per effettuare una corretta installazione di PyQt6...

Seguir leyendo...

Il seguente articolo mostra un esempio di base di come attivare la fotocamera e l'audio con Javascript....

Seguir leyendo...

L'elemento audio in HTML è un potente strumento per integrare contenuti audio nelle pagine web....

Seguir leyendo...

L'elemento video è una delle funzionalità più importanti di HTML5, poiché consente agli sviluppatori di incorporare video direttamente nelle pagine web....

Seguir leyendo...

Il rientro corretto rende il codice HTML più facile da leggere e comprendere. Quando i tag HTML sono ben organizzati e annidati correttamente, è più facile per gli sviluppatori identificare la struttura del documento, vedere quali elementi ne contengono alt...

Seguir leyendo...

L'indentazione del codice JavaScript non solo migliora l'estetica del codice, ma offre anche vantaggi pratici significativi che semplificano la lettura, la manutenzione, la collaborazione e la qualità complessiva del software. È una pratica essenziale per qu...

Seguir leyendo...

(GIS) sul web hanno rivoluzionato il modo in cui interagiamo con i dati spaziali, di seguito sono riportate le librerie JS più importanti....

Seguir leyendo...

Il codice ben formattato fornisce una chiara guida visiva su come vengono applicati gli stili e su come vengono raggruppate le regole. Il codice CSS ben rientrato è più facile da mantenere. Quando il codice è organizzato è più semplice apportare modifiche...

Seguir leyendo...

Per le attività di traduzione automatica, i modelli basati sull'architettura Transformer si sono rivelati molto efficaci....

Seguir leyendo...

Esplora i vantaggi di Kotlin rispetto a Java nello sviluppo di applicazioni Android....

Seguir leyendo...

Scopri i passaggi essenziali per caricare le tue applicazioni su Play Store e diventare uno sviluppatore di successo....

Seguir leyendo...

Di seguito è riportata una mappa Leaflet.js in cui l'utente può ottenere l'elevazione dopo aver fatto clic su una determinata posizione....

Seguir leyendo...