Imaxe
A continuación móstrase un exemplo de como obter datos meteorolóxicos con Leaflet.js e a API gratuítaOpen-Meteo.

O exemplo é moi básico, premendo nalgún punto do mapa crearase un marcador con algúns dos datos meteorolóxicos que devolve a API.Open-Meteo.
Open-Meteo(Totalmente gratuíto)
Descrición : API meteorolóxica gratuíta sen necesidade de rexistro. Ofrece datos meteorolóxicos de fontes abertas.
Datos ofrecidos : tempo actual, previsións, sen límites de chamadas.
Páxina web :Open-Meteo
Fai clic nalgún lugar do mapa...
Folleto © Colaboradores de OpenStreetMap
Folleto © Colaboradores de OpenStreetMap
Código de exemplo (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

A sangría adecuada fai que o código HTML sexa máis fácil de ler e comprender. Cando as etiquetas HTML están ben organizadas e aniñadas correctamente, é máis fácil para os desenvolvedores identificar a estrutura do documento, ver que elementos conteñe...

Seguir leyendo...

O elemento de vídeo é unha das características máis destacadas de HTML5, xa que permite aos desenvolvedores incorporar vídeos directamente nas páxinas web....

Seguir leyendo...

O elemento de audio en HTML é unha poderosa ferramenta para integrar contido de son nas páxinas web....

Seguir leyendo...

A continuación podes atopar os comandos necesarios para realizar unha correcta instalación de PyQt6...

Seguir leyendo...

A sangría do código JavaScript non só mellora a estética do código, senón que tamén ofrece importantes vantaxes prácticas que facilitan a lectura, o mantemento, a colaboración e a calidade xeral do software. É unha práctica esencial para calquera pr...

Seguir leyendo...

O código ben formateado proporciona unha guía visual clara sobre como se aplican os estilos e como se agrupan as regras. O código CSS ben sangrado é máis fácil de manter. Cando o código está organizado, é máis doado facer cambios e actualizacións se...

Seguir leyendo...

O seguinte artigo mostra un exemplo básico de como activar a cámara e o audio con Javascript....

Seguir leyendo...

Para tarefas de tradución automática, os modelos baseados na arquitectura Transformer demostraron ser moi eficaces....

Seguir leyendo...

(GIS) na web revolucionaron a forma en que interactuamos cos datos espaciais, a continuación móstranse as bibliotecas JS máis importantes....

Seguir leyendo...

Explore as vantaxes de Kotlin fronte a Java no desenvolvemento de aplicacións para Android....

Seguir leyendo...

Descubre os pasos esenciais para cargar as túas aplicacións en Play Store e ser un programador exitoso....

Seguir leyendo...

A continuación móstrase un mapa Leaflet.js no que o usuario pode obter a elevación despois de facer clic nunha determinada localización....

Seguir leyendo...