Irudia
Jarraian, Leaflet.js-ekin eta doako APIarekin eguraldi-datuak nola lortu jakiteko adibide bat dagoOpen-Meteo.

Adibidea oso oinarrizkoa da, mapako punturen batean klik eginez APIak itzultzen dituen datu meteorologiko batzuekin markatzaile bat sortuko da.Open-Meteo.
Open-Meteo(Guztiz doan)
Deskribapena : Doako eguraldiaren APIa erregistratu gabe. Iturburu irekietako eguraldi datuak eskaintzen ditu.
Eskainitako datuak : egungo eguraldia, iragarpenak, dei-mugarik gabe.
Webgunea :Open-Meteo
Egin klik mapan nonbait...
Liburuxka © OpenStreetMap laguntzaileak
Liburuxka © OpenStreetMap laguntzaileak
Adibidea kodea (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

Bideo-elementua HTML5-en ezaugarri nabarmenetako bat da, garatzaileei bideoak zuzenean web orrietan txertatzeko aukera ematen dielako....

Seguir leyendo...

HTML-ko audio-elementua soinu-edukia web orrietan integratzeko tresna indartsua da....

Seguir leyendo...

Koska egokiak HTML kodea irakurtzea eta ulertzea errazten du. HTML etiketak ondo antolatuta eta behar bezala habiaratuta daudenean, garatzaileek errazagoa da dokumentuaren egitura identifikatzea, zein elementu dituzten beste batzuk ikustea eta edukiaren hierar...

Seguir leyendo...

JavaScript kodea koskatzeak kodearen estetika hobetzeaz gain, onura praktiko garrantzitsuak eskaintzen ditu, softwarearen irakurketa, mantentzea, lankidetza eta kalitate orokorra errazten dutenak. Ezinbesteko praktika da kode garbi eta eraginkorra idatzi nahi ...

Seguir leyendo...

Hurrengo artikuluak Javascript-ekin kamera eta audioa aktibatzeko oinarrizko adibide bat erakusten du....

Seguir leyendo...

Jarraian PyQt6-ren instalazio zuzena egiteko beharrezko komandoak aurki ditzakezu...

Seguir leyendo...

Jarraian Leaflet.js mapa bat dago, non erabiltzaileak kota lor dezake kokapen jakin batean klik egin ondoren....

Seguir leyendo...

Itzulpen automatikoko zereginetarako, Transformer arkitekturan oinarritutako ereduak oso eraginkorrak direla frogatu da....

Seguir leyendo...

Ondo formateatutako kodeak estiloak nola aplikatzen diren eta arauak nola taldekatzen diren jakiteko gida bisual argia eskaintzen du. Ondo koskatutako CSS kodea mantentzea errazagoa da. Kodea antolatuta dagoenean, errazagoa da aldaketak eta eguneraketak egitea...

Seguir leyendo...

(GIS) sareko datu espazialekin elkarreragiteko modua irauli dute, behean JS liburutegi garrantzitsuenak daude....

Seguir leyendo...

Ezagutu zure aplikazioak Play Store helbidera kargatzeko ezinbesteko urratsak eta garatzaile arrakastatsua izan....

Seguir leyendo...

Arakatu Kotlin-ek Javaren aldean dituen abantailak Android aplikazioen garapenean....

Seguir leyendo...