download leaflet openweathermap - download do código-fonte leaflet openweathermap

leaflet openweathermap

Outro código-fonte

1.0.0

Baixar

OpenWeatherMap para mapas baseados em Leaflet

FIM DA VIDA

Este projeto não é mais mantido. Se você quiser continuar este projeto, basta fazer um fork e seguir em frente. Se você me deixar uma nota, talvez eu adicione um link de destaque para o seu fork aqui neste leia-me.

Descrição

OpenWeatherMap (OWM) é um serviço que fornece dados relacionados ao clima, visualizando-os usando um mapa baseado em OpenLayers. Este é um script independente baseado em Leaflet que fornece acesso fácil aos recursos do OWM para mapas baseados em Leaflet.

Resumindo: uma biblioteca JavaScript independente para incluir as camadas do OWM e os dados atuais da cidade do OWM em mapas baseados em Leaflet sem complicações.

Demonstração

Um exemplo de mapa usando muitos recursos desta biblioteca pode ser visto em ahorn.lima-city.de/owm. Sua sobreposição "Rosa dos Ventos" é um exemplo de marcador definido pelo usuário para lhe dar uma ideia do que pode ser alcançado pelas funções definidas pelo usuário para marcadores. Este mapa também está disponível no diretório de exemplo.

Licença

Este código está licenciado sob CC0. Alguns arquivos no diretório de exemplo podem ter outras licenças (por exemplo, leaflet.js - consulte leaflet.license) - por favor, dê uma olhada nos arquivos, se necessário.

Usando TileLayers

OWM oferece alguns TileLayers: Nuvens, Nuvens Clássicas, Precipitação, Precipitação Clássica, Chuva, Chuva Clássica, Neve, Temperatura, Velocidade do Vento, Pressão e Contornos de Pressão.

Inicializando TileLayers

Veja como inicializar esses TileLayers (um AppId é obrigatório agora, obtenha o seu aqui):

var nuvens = L.OWM.clouds({appId: 'SEU_OWN_APPID'});
var cloudscls = L.OWM.cloudsClassic({appId: 'SEU_OWN_APPID'});
var precipitação = L.OWM.precipitation({appId: 'YOUR_OWN_APPID'});
var precipitaçãocls = L.OWM.precipitationClassic({appId: 'SEU_OWN_APPID'});
var chuva = L.OWM.rain({appId: 'SEU_OWN_APPID'});
var raincls = L.OWM.rainClassic({appId: 'SEU_OWN_APPID'});
var neve = L.OWM.snow({appId: 'SEU_OWN_APPID'});
var pressão = L.OWM.pressão({appId: 'SEU_OWN_APPID'});
var pressãocntr = L.OWM.pressãoContour({appId: 'SEU_OWN_APPID'});
var temp = L.OWM.temperature({appId: 'YOUR_OWN_APPID'});
var vento = L.OWM.wind({appId: 'SEU_OWN_APPID'});

Opções para TileLayers

Além das opções padrão para Leaflet TileLayers, existem outras adicionais:

appId : Um AppId é obrigatório. Obtenha-o em https://www.openweathermap.org/appid
showLegend : verdadeiro ou falso. Se verdadeiro e a opção 'legendImagePath' estiver definida, haverá uma imagem de legenda no mapa.
legendImagePath : URL (é definida como uma imagem padrão para algumas camadas, nula para outras, veja abaixo). URL ou caminho relativo para uma imagem que é uma legenda para esta camada.
posição da legenda : 'bottomleft' . Posição das imagens da legenda no mapa. Estão disponíveis posições padrão para controles de folheto ('topright', 'topleft', 'bottomright', 'bottomleft').

A imagem da legenda pronta para uso está disponível apenas para Pressão, Precipitação Clássica, Nuvens Clássica, Chuva Clássica, Neve, Temperatura e Velocidade do Vento. Adicione suas próprias imagens se precisar de mais.

Usando dados atuais para cidades

Os dados meteorológicos das cidades são obtidos usando a API OpenWeatherMap. Eles são adicionados como um LayerGroup de marcadores. Esta camada pode ser atualizada a cada n minutos (defina n com a opção intervall mas não use menos de 10 minutos, por favor).

Inicialização

Veja como inicializar essas camadas criadas dinamicamente:

var cidade = L.OWM.current( /* opções */ );

Opções

Muitas opções estão disponíveis para configurar o comportamento dos dados da cidade ( o valor padrão está em negrito). Mas não se assuste com o grande número de opções, você não precisa definir nenhuma se estiver satisfeito com os padrões:

appId : String ( nulo ). Obtenha uma chave de API gratuita (chamada APPID) se você estiver usando os dados meteorológicos atuais do OWM regularmente.
lang : 'en' , 'de', 'ru', 'fr', 'es', 'ca'. Idioma dos textos pop-up. Nota: nem todas as traduções estão concluídas ainda.
minZoom : Número ( 7 ). Nível mínimo de zoom para buscar dados da cidade. Use valores menores apenas por sua própria conta e risco.
intervalo : Número ( 0 ). Tempo em minutos para recarregar os dados da cidade. Por favor, não use menos de 10 minutos. 0 sem recarregar (padrão)
progressControl : verdadeiro ou falso. Se um controle de progresso deve ser usado para informar ao usuário que os dados estão sendo carregados no momento.
imageLoadingUrl : URL ( 'owmloading.gif' ). URL da imagem de carregamento ou caminho relativo ao documento HTML. Isto é importante quando a imagem não está no mesmo diretório do documento HTML!
imageLoadingBgUrl : URL ( nulo ). URL da imagem de fundo para controle de progresso caso você não goste da imagem padrão.
unidade de temperatura : 'C' , 'F', 'K'. Exibe a temperatura em Celsius, Fahrenheit ou Kelvin.
temperaturaDígitos : Número ( 1 ). Número de casas decimais para temperatura.
speedUnit : 'ms' , 'kmh' ou 'mph'. Unidade de velocidade do vento (m/s, km/h ou mph).
speedDigits : Número ( 0 ). Número de casas decimais para a velocidade do vento.
pop-up : verdadeiro ou falso. Se deve vincular um pop-up ao marcador da cidade.
keepPopup : verdadeiro ou falso. Quando verdadeiro, ele tenta reabrir um pop-up já aberto ao mover ou recarregar. Pode resultar em uma movimentação adicional do mapa (após reabrir o pop-up) fechando e reabrindo o pop-up novamente.
showOwmStationLink : verdadeiro ou falso. Se deve vincular o nome da cidade ao OWM.
showWindSpeed : 'velocidade', 'beaufort' ou 'ambos' . Mostre a velocidade do vento como velocidade em speedUnit ou em beaufort scala ou ambos.
showWindDirection : 'deg', 'desc' ou 'both' . Mostre a direção do vento como grau, como descrição (por exemplo, NNE) ou ambos.
showTimestamp : verdadeiro ou falso. Se deve mostrar o carimbo de data/hora dos dados.
showTempMinMax : verdadeiro ou falso. Se deve mostrar a temperatura min/max.
useLocalTime : verdadeiro ou falso. Se deve usar a hora local ou UTC para o carimbo de data/hora.
clusterSize : Número ( 150 ). Se algumas cidades estiverem muito próximas umas das outras, elas ficarão ocultas. Em uma área do tamanho clusterSize pixels * clusterSize pixels apenas uma cidade é mostrada. Se você aumentar o zoom, as cidades ocultas aparecerão.
imageUrlCity : URL ( 'https://openweathermap.org/img/w/{icon}.png' ). Modelo de URL para imagens de condições climáticas de cidades. {icon} será substituído pela propriedade icon dos dados da cidade. Consulte http://openweathermap.org/img/w/ para obter algumas imagens padrão.
largura da imagem : Número ( 50 ). Largura da imagem da condição climática da cidade.
imageHeight : Número ( 50 ). Altura da imagem da condição climática da cidade.
marcadorFunction : Função ( nulo ). Função definida pelo usuário para criação de marcadores. Precisa de um parâmetro para dados da cidade.
popupFunction : Função ( nulo ). Função definida pelo usuário para criação de pop-up. Precisa de um parâmetro para dados da cidade.
cache : verdadeiro ou falso. Use o cache de dados meteorológicos atuais. Os dados armazenados em cache são recarregados quando são muito antigos ou a nova caixa delimitadora não cabe dentro da caixa delimitadora armazenada em cache.
cacheMaxAge : Número ( 15 ). Idade máxima em minutos para dados armazenados em cache antes de serem considerados muito antigos.
keepOnMinZoom : falso ou verdadeiro. Manter ou remover marcadores quando zoom <minZoom.
baseUrl : O padrão é "https://{s}.tile.openweathermap.org/map/{layername}/{z}/{x}/{y}.png" - altere-o apenas quando souber o que está fazendo.

Exemplo Simples

Aqui estão as linhas mais importantes:

 < head >
	< script type =" text/javascript " src =" leaflet.js " > </ script >
	< link rel =" stylesheet " type =" text/css " href =" leaflet-openweathermap.css " />
	< script type =" text/javascript " src =" leaflet-openweathermap.js " > </ script >
</ head >

 var osm = L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
	maxZoom : 18 , attribution : '[insert correct attribution here!]' } ) ;

var clouds = L . OWM . clouds ( { showLegend : false , opacity : 0.5 , appId : 'YOUR_OWN_APPID' } ) ;
var city = L . OWM . current ( { intervall : 15 , lang : 'de' } ) ;

var map = L . map ( 'map' , { center : new L . LatLng ( 51.5 , 10 ) , zoom : 10 , layers : [ osm ] } ) ;
var baseMaps = { "OSM Standard" : osm } ;
var overlayMaps = { "Clouds" : clouds , "Cities" : city } ;
var layerControl = L . control . layers ( baseMaps , overlayMaps ) . addTo ( map ) ;

Exemplo com funções de marcador/pop-up fornecidas pelo usuário para o clima atual

Fornece uma função para criar marcadores e outra para criar pop-ups. Adicione as opções markerFunction e popupFunction à sua chamada para L.OWM.current . A estrutura de dados que você obtém como parâmetro não está bem documentada no momento. Você recebe o que o OWM envia. Basta olhar os dados e ter em mente que a maioria das entradas são opcionais. O contexto (this) das funções é a instância L.OWM.Current que você criou. Portanto você tem acesso a opções (por exemplo, this.options.temperatureUnit) e outros atributos.

 < head >
	< script type =" text/javascript " src =" leaflet.js " > </ script >
	< link rel =" stylesheet " type =" text/css " href =" leaflet-openweathermap.css " />
	< script type =" text/javascript " src =" leaflet-openweathermap.js " > </ script >
</ head >

 function myOwmMarker ( data ) {
	// just a Leaflet default marker
	return L . marker ( [ data . coord . lat , data . coord . lon ] ) ;
}

function myOwmPopup ( data ) {
	// just a Leaflet default popup with name as content
	return L . popup ( ) . setContent ( data . name ) ;
}

var osm = L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , {
	maxZoom : 18 , attribution : '[insert correct attribution here!]' } ) ;

var clouds = L . OWM . clouds ( { showLegend : false , opacity : 0.5 , appId : 'YOUR_OWN_APPID' } ) ;
var city = L . OWM . current ( { intervall : 15 , lang : 'de' ,
			markerFunction : myOwmMarker , popupFunction : myOwmPopup } ) ;

var map = L . map ( 'map' , { center : new L . LatLng ( 51.5 , 10 ) , zoom : 10 , layers : [ osm ] } ) ;
var baseMaps = { "OSM Standard" : osm } ;
var overlayMaps = { "Clouds" : clouds , "Cities" : city } ;
var layerControl = L . control . layers ( baseMaps , overlayMaps ) . addTo ( map ) ;