Image
Below is an example of how to get weather data with Leaflet.js and the free apiOpen-Meteo.

The example is very basic, by clicking on some point on the map a marker will be created with some of the meteorological data that the API returns.Open-Meteo.
Open-Meteo(Totally Free)
Description : Free weather API with no registration required. Offers weather data from open sources.
Data Offered : Current weather, forecasts, no call limits.
Website :Open-Meteo
Click somewhere on the map...
Leaflet © OpenStreetMap contributors
Leaflet © OpenStreetMap contributors
Example code (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

Below you can find the necessary commands to carry out a correct installation of PyQt6...

Seguir leyendo...

Proper indentation makes HTML code easier to read and understand. When HTML tags are well organized and nested correctly, it is easier for developers to identify the structure of the document, see which elements contain others, and understand the hierarchy of ...

Seguir leyendo...

Indenting JavaScript code not only improves the aesthetics of the code, but also offers significant practical benefits that make it easier to read, maintain, collaborate, and overall quality of the software. It's an essential practice for any developer looking...

Seguir leyendo...

Well-formatted code provides a clear visual guide to how styles are applied and how rules are grouped. Well-indented CSS code is easier to maintain. When the code is organized, it is easier to make changes and updates without introducing errors. Indentation he...

Seguir leyendo...

The audio element in HTML is a powerful tool for integrating sound content into web pages....

Seguir leyendo...

For machine translation tasks, models based on the Transformer architecture have proven to be very effective....

Seguir leyendo...

The video element is one of the most prominent features of HTML5, as it allows developers to embed videos directly into web pages....

Seguir leyendo...

Discover the essential steps to upload your applications to Play Store and be a successful developer....

Seguir leyendo...

(GIS) on the web have revolutionized the way we interact with spatial data, below are the most important JS libraries....

Seguir leyendo...

The following article shows a basic example of how to activate the camera and audio with Javascript....

Seguir leyendo...

Explore the advantages of Kotlin over Java in Android application development....

Seguir leyendo...

Below is a Leaflet.js map in which the user can get the elevation after clicking on a certain location....

Seguir leyendo...