Imagem
Abaixo está um exemplo de como obter dados meteorológicos com Leaflet.js e a API gratuitaOpen-Meteo.

O exemplo é bem básico, ao clicar em algum ponto do mapa será criado um marcador com alguns dos dados meteorológicos que a API retorna.Open-Meteo.
Open-Meteo(Totalmente grátis)
Descrição : API meteorológica gratuita sem necessidade de registro. Oferece dados meteorológicos de fontes abertas.
Dados oferecidos : clima atual, previsões, sem limites de chamadas.
Clique em algum lugar do mapa...
Folheto © contribuidores do OpenStreetMap
Folheto © contribuidores do 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

O elemento de áudio em HTML é uma ferramenta poderosa para integrar conteúdo sonoro em páginas da web....

Seguir leyendo...

Abaixo você encontra os comandos necessários para realizar uma instalação correta do PyQt6...

Seguir leyendo...

Descubra os passos essenciais para enviar seus aplicativos para Play Store e ser um desenvolvedor de sucesso....

Seguir leyendo...

O artigo a seguir mostra um exemplo básico de como ativar a câmera e o áudio com Javascript....

Seguir leyendo...

(GIS) na web revolucionaram a forma como interagimos com dados espaciais, abaixo estão as bibliotecas JS mais importantes....

Seguir leyendo...

Para tarefas de tradução automática, os modelos baseados na arquitetura Transformer provaram ser muito eficazes....

Seguir leyendo...

A indentação adequada torna o código HTML mais fácil de ler e entender. Quando as tags HTML estão bem organizadas e aninhadas corretamente, é mais fácil para os desenvolvedores identificarem a estrutura do documento, ver quais elementos contêm outros e...

Seguir leyendo...

O elemento de vídeo é um dos recursos mais importantes do HTML5, pois permite aos desenvolvedores incorporar vídeos diretamente em páginas da web....

Seguir leyendo...

Um código bem formatado fornece um guia visual claro sobre como os estilos são aplicados e como as regras são agrupadas. Código CSS bem recuado é mais fácil de manter. Quando o código está organizado, fica mais fácil fazer alterações e atualizaçõe...

Seguir leyendo...

O recuo do código JavaScript não apenas melhora a estética do código, mas também oferece benefícios práticos significativos que facilitam a leitura, a manutenção, a colaboração e a qualidade geral do software. É uma prática essencial para qualquer...

Seguir leyendo...

Explore as vantagens do Kotlin em relação ao Java no desenvolvimento de aplicativos Android....

Seguir leyendo...

Abaixo está um mapa Leaflet.js no qual o usuário pode obter a elevação após clicar em um determinado local....

Seguir leyendo...