Descarga leaflet openweathermap - Descarga del código fuente leaflet openweathermap

leaflet openweathermap

Otro código fuente

1.0.0

Descargar

OpenWeatherMap para mapas basados en folletos

FIN DE VIDA

Este proyecto ya no se mantiene. Si desea continuar con este proyecto, simplemente bifurque y continúe. Si me envías una nota, tal vez agregue un enlace destacado a tu bifurcación aquí en este archivo Léame.

Descripción

OpenWeatherMap (OWM) es un servicio que proporciona datos relacionados con el clima y los visualiza utilizando un mapa basado en OpenLayers. Este es un script independiente basado en Folletos que proporciona fácil acceso a las funciones de OWM para mapas basados en Folletos.

En resumen: una biblioteca de JavaScript independiente para incluir las capas de OWM y los datos actuales de la ciudad de OWM en mapas basados en folletos sin problemas.

Manifestación

Puede ver un mapa de ejemplo que utiliza muchas características de esta biblioteca en ahorn.lima-city.de/owm. Su superposición "Rosa de los vientos" es un ejemplo de un marcador definido por el usuario para darle una idea de lo que se puede lograr con las funciones definidas por el usuario para los marcadores. Este mapa también está disponible en el directorio de ejemplo.

Licencia

Este código tiene licencia CC0. Algunos archivos en el directorio de ejemplo pueden tener otras licencias (por ejemplo, leaflet.js; consulte leaflet.license); eche un vistazo a los archivos si es necesario.

Usando capas de mosaicos

OWM ofrece algunos TileLayers: Nubes, Nubes clásicas, Precipitación, Precipitación clásica, Lluvia, Lluvia clásica, Nieve, Temperatura, Velocidad del viento, Presión y Contornos de presión.

Inicializando TileLayers

Aquí se explica cómo inicializar estos TileLayers (un AppId es obligatorio ahora, obtenga el suyo aquí):

var nubes = L.OWM.clouds({appId: 'YOUR_OWN_APPID'});
var nubescls = L.OWM.cloudsClassic({appId: 'YOUR_OWN_APPID'});
var precipitación = L.OWM.precipitation({appId: 'YOUR_OWN_APPID'});
var precipitacióncls = L.OWM.precipitationClassic({appId: 'YOUR_OWN_APPID'});
var lluvia = L.OWM.rain({appId: 'YOUR_OWN_APPID'});
var raincls = L.OWM.rainClassic({appId: 'YOUR_OWN_APPID'});
var nieve = L.OWM.snow({appId: 'YOUR_OWN_APPID'});
var presión = L.OWM.presión({appId: 'YOUR_OWN_APPID'});
var presióncntr = L.OWM.presiónContour({appId: 'YOUR_OWN_APPID'});
var temp = L.OWM.temperature({appId: 'YOUR_OWN_APPID'});
var viento = L.OWM.wind({appId: 'YOUR_OWN_APPID'});

Opciones para TileLayers

Más allá de las opciones estándar para Leaflet TileLayers, existen opciones adicionales:

appId : un AppId es obligatorio. Consíguelo en https://www.openweathermap.org/appid
showLegend : verdadero o falso. Si es verdadero y se establece la opción 'legendImagePath', habrá una imagen de leyenda en el mapa.
legendImagePath : URL (se establece en una imagen predeterminada para algunas capas, nula para otras, ver más abajo). URL o ruta relativa a una imagen que es una leyenda de esta capa.
posiciónleyenda : 'abajo a la izquierda' . Posición de las imágenes de leyenda en el mapa. Están disponibles posiciones estándar para los controles de Folletos ('arriba a la derecha', 'arriba a la izquierda', 'abajo a la derecha', 'abajo a la izquierda').

Una imagen de leyenda lista para usar solo está disponible para Presión, Precipitación clásica, Nubes clásicas, Lluvia clásica, Nieve, Temperatura y Velocidad del viento. Agregue sus propias imágenes si necesita más.

Usando datos actuales para ciudades

Los datos meteorológicos de las ciudades se obtienen mediante la API OpenWeatherMap. Se agregan como un LayerGroup de marcadores. Esta capa se puede actualizar cada n minutos (establezca n con la opción intervalo pero no use menos de 10 minutos, por favor).

Inicialización

A continuación se explica cómo inicializar estas capas creadas dinámicamente:

var ciudad = L.OWM.current( /* opciones */ );

Opciones

Hay muchas opciones disponibles para configurar el comportamiento de los datos de la ciudad ( el valor predeterminado está en negrita). Pero no te asustes por la gran cantidad de opciones, no necesitas configurar ninguna si estás satisfecho con los valores predeterminados:

appId : Cadena ( nulo ). Obtenga una clave API gratuita (llamada APPID) si utiliza los datos meteorológicos actuales de OWM con regularidad.
idioma : 'en' , 'de', 'ru', 'fr', 'es', 'ca'. Idioma de los textos emergentes. Nota: no todas las traducciones están terminadas todavía.
minZoom : Número ( 7 ). Nivel de zoom mínimo para recuperar datos de la ciudad. Utilice valores más pequeños sólo bajo su propio riesgo.
intervalo : Número ( 0 ). Tiempo en minutos para recargar datos de la ciudad. No utilice menos de 10 minutos. 0 sin recarga (predeterminado)
control de progreso : verdadero o falso. Si se debe utilizar un control de progreso para indicarle al usuario que se están cargando datos en ese momento.
imageLoadingUrl : URL ( 'owmloading.gif' ). URL de la imagen de carga o una ruta relativa al documento HTML. ¡Esto es importante cuando la imagen no está en el mismo directorio que el documento HTML!
imageLoadingBgUrl : URL ( nulo ). URL de la imagen de fondo para controlar el progreso si no te gusta la predeterminada.
Unidad de temperatura : 'C' , 'F', 'K'. Muestra la temperatura en Celsius, Fahrenheit o Kelvin.
TemperatureDigits : Número ( 1 ). Número de decimales de la temperatura.
speedUnit : 'ms' , 'kmh' o 'mph'. Unidad de velocidad del viento (m/s, km/h o mph).
speedDigits : Número ( 0 ). Número de decimales de la velocidad del viento.
ventana emergente : verdadero o falso. Ya sea para vincular una ventana emergente al marcador de ciudad.
keepPopup : verdadero o falso. Cuando es verdadero, intenta reabrir una ventana emergente ya abierta al moverla o recargarla. Puede resultar en un movimiento adicional del mapa (después de volver a abrir la ventana emergente) al cerrar y volver a abrir la ventana emergente.
showOwmStationLink : verdadero o falso. Ya sea para vincular el nombre de la ciudad a OWM.
showWindSpeed : 'velocidad', 'beaufort' o 'ambos' . Muestra la velocidad del viento como velocidad en speedUnit o en Beaufort Scala o ambos.
showWindDirection : 'grados', 'desc' o 'ambos' . Muestra la dirección del viento como grados, como descripción (por ejemplo, NNE) o ambos.
showTimestamp : verdadero o falso. Ya sea para mostrar la marca de tiempo de los datos.
showTempMinMax : verdadero o falso. Ya sea para mostrar la temperatura mínima/máxima.
useLocalTime : verdadero o falso. Si se debe utilizar la hora local o UTC para la marca de tiempo.
Tamaño del clúster : Número ( 150 ). Si algunas ciudades están demasiado cerca unas de otras, quedan ocultas. En un área del tamaño clusterSize pixels * clusterSize pixels solo se muestra una ciudad. Si haces zoom, aparecerán las ciudades ocultas.
imageUrlCity : URL ( 'https://openweathermap.org/img/w/{icon}.png' ). Plantilla de URL para imágenes de condiciones climáticas de ciudades. {icon} será reemplazado por la propiedad icon de los datos de la ciudad. Consulte http://openweathermap.org/img/w/ para ver algunas imágenes estándar.
ancho de imagen : Número ( 50 ). Ancho de la imagen de las condiciones meteorológicas de la ciudad.
Altura de la imagen : Número ( 50 ). Imagen de altura de las condiciones meteorológicas de la ciudad.
marcadorFunción : Función ( nula ). Función definida por el usuario para la creación de marcadores. Necesita un parámetro para los datos de la ciudad.
popupFunction : Función ( nula ). Función definida por el usuario para la creación de ventanas emergentes. Necesita un parámetro para los datos de la ciudad.
almacenamiento en caché : verdadero o falso. Utilice el almacenamiento en caché de los datos meteorológicos actuales. Los datos almacenados en caché se recargan cuando son demasiado antiguos o el nuevo cuadro delimitador no cabe dentro del cuadro delimitador almacenado en caché.
cacheMaxAge : Número ( 15 ). Antigüedad máxima en minutos para los datos almacenados en caché antes de que se consideren demasiado antiguos.
keepOnMinZoom : falso o verdadero. Mantener o eliminar marcadores cuando el zoom sea < minZoom.
baseUrl : El valor predeterminado es "https://{s}.tile.openweathermap.org/map/{layername}/{z}/{x}/{y}.png"; solo cámbialo cuando sepas lo que estás haciendo. haciendo.

Ejemplo sencillo

Estas son las líneas más 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 ) ;

Ejemplo con funciones de marcador/emergente proporcionadas por el usuario para el clima actual

Proporcione una función para crear marcadores y otra para crear ventanas emergentes. Agregue las opciones MarkerFunction y popupFunction a su llamada a L.OWM.current . La estructura de datos que se obtiene como parámetro no está bien documentada en este momento. Obtienes lo que envía OWM. Basta con mirar los datos y tener en cuenta que la mayoría de las entradas son opcionales. El contexto (este) de las funciones es la instancia L.OWM.Current que creó. Por lo tanto, tiene acceso a opciones (por ejemplo, this.options.temperatureUnit) y otros 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 ) ;