Imagen
A continuación se muestra un ejemplo de como obtener datos meteorológicos con Leaflet.js y la api gratuita de Open-Meteo.

El ejemplo es muy básico, al hacer clic sobre algún punto del mapa se creará un marcador con algunos de los datos meteorológicos que nos devuelve la API de Open-Meteo.
Open-Meteo (Totalmente Gratuito)
Descripción: API de clima gratuita sin necesidad de registro. Ofrece datos meteorológicos de fuentes abiertas.
Datos Ofrecidos: Clima actual, pronósticos, sin límite de llamadas.
Sitio Web: Open-Meteo
Haga clic en algún punto del mapa...
Leaflet © OpenStreetMap contributors
Código de ejemplo (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 continuación podrás encontrar los comando necesarios para llevar a cabo una instalación correcta de PyQt6...

Seguir leyendo...

La indentación adecuada hace que el código HTML sea más fácil de leer y entender. Cuando las etiquetas HTML están bien organizadas y anidadas correctamente, es más sencillo para los desarrolladores identificar la estructura del documento, ver qué elemen...

Seguir leyendo...

Un código bien formateado proporciona una guía visual clara sobre cómo se aplican los estilos y cómo se agrupan las reglas. Un código CSS bien indentado es más fácil de mantener. Cuando el código está organizado, es más sencillo realizar modificacion...

Seguir leyendo...

La indentación del código JavaScript no solo mejora la estética del código, sino que también ofrece beneficios prácticos significativos que facilitan la lectura, el mantenimiento, la colaboración y la calidad general del software. Es una práctica esenc...

Seguir leyendo...

En el siguiente artículo se muestra un ejemplo básico de cómo activar la cámara y el audio con Javascript....

Seguir leyendo...

Para tareas de traducción automática, los modelos basados en la arquitectura Transformer han demostrado ser muy eficaces....

Seguir leyendo...

El elemento video es una de las características más destacadas de HTML5, ya que permite a los desarrolladores integrar videos directamente en las páginas web....

Seguir leyendo...

El elemento audio en HTML es una herramienta poderosa para integrar contenido de sonido en páginas web....

Seguir leyendo...

(GIS) en la web han revolucionado la forma en que interactuamos con los datos espaciales, a continuación se muestran las librería JS más importantes....

Seguir leyendo...

Descubre los pasos esenciales para subir tus aplicaciones a la Play Store y ser un desarrollador exitoso....

Seguir leyendo...

Explora las ventajas de Kotlin frente a Java en el desarrollo de aplicaciones Android....

Seguir leyendo...

A continuación se muestra un mapa Leaflet.js en el cual el usuario puede obtener la elevación tras hacer clic en una determinada localización....

Seguir leyendo...