leaflet openweathermap Télécharger - leaflet openweathermap Téléchargement du code source

leaflet openweathermap

Autre code source

1.0.0

Télécharger

OpenWeatherMap pour les cartes basées sur Leaflet

FIN DE VIE

Ce projet n'est plus maintenu. Si vous souhaitez continuer ce projet, lancez-le et continuez. Si vous m'envoyez une note, j'ajouterai peut-être un lien visible vers votre fork ici dans ce fichier Lisez-moi.

Description

OpenWeatherMap (OWM) est un service fournissant des données météorologiques, en les visualisant à l'aide d'une carte basée sur OpenLayers. Il s'agit d'un script indépendant basé sur Leaflet offrant un accès facile aux fonctionnalités d'OWM pour les cartes basées sur Leaflet.

En bref : une bibliothèque JavaScript indépendante pour inclure sans problème les couches d'OWM et les données actuelles de la ville d'OWM dans des cartes basées sur Leaflet.

Démo

Un exemple de carte utilisant de nombreuses fonctionnalités de cette bibliothèque peut être consulté sur ahorn.lima-city.de/owm. Sa superposition "Wind Rose" est un exemple de marqueur défini par l'utilisateur pour vous donner une idée de ce qui peut être réalisé par les fonctions définies par l'utilisateur pour les marqueurs. Cette carte est également disponible dans le répertoire d'exemples.

Licence

Ce code est sous licence CC0. Certains fichiers du répertoire d'exemple peuvent avoir d'autres licences (par exemple leaflet.js - voir leaflet.license) - veuillez consulter les fichiers si nécessaire.

Utiliser des calques de tuiles

OWM propose quelques TileLayers : Clouds, Clouds Classic, Precipitation, Precipitation Classic, Rain, Rain Classic, Snow, Temperature, Wind Speed, Pressure et Pressure Contours.

Initialisation des TileLayers

Voici comment initialiser ces TileLayers (un AppId est obligatoire désormais, obtenez le vôtre ici) :

var nuages = L.OWM.clouds({appId : 'YOUR_OWN_APPID'});
var nuagescls = L.OWM.cloudsClassic({appId : 'YOUR_OWN_APPID'});
var précipitation = L.OWM.precipitation({appId: 'YOUR_OWN_APPID'});
var précipitationcls = L.OWM.precipitationClassic({appId : 'YOUR_OWN_APPID'});
var rain = L.OWM.rain({appId: 'YOUR_OWN_APPID'});
var raincls = L.OWM.rainClassic({appId : 'YOUR_OWN_APPID'});
var neige = L.OWM.snow({appId : 'YOUR_OWN_APPID'});
var pression = L.OWM.pression({appId: 'YOUR_OWN_APPID'});
var pressioncntr = L.OWM.pressionContour({appId : 'YOUR_OWN_APPID'});
var temp = L.OWM.temperature({appId: 'YOUR_OWN_APPID'});
var vent = L.OWM.wind({appId : 'YOUR_OWN_APPID'});

Options pour les calques de tuiles

Au-delà des options standard pour Leaflet TileLayers, il existe des options supplémentaires :

appId : Un AppId est obligatoire. Obtenez-le sur https://www.openweathermap.org/appid
showLegend : vrai ou faux. Si vrai et que l'option 'legendImagePath' est définie, il y aura une image de légende sur la carte.
legendImagePath : URL (est définie sur une image par défaut pour certains calques, nulle pour d'autres, voir ci-dessous). URL ou chemin relatif vers une image qui est une légende de ce calque.
legendPosition : 'en bas à gauche' . Position des images de légende sur la carte. Les positions standard disponibles pour les contrôles Leaflet (« topright », « topleft », « bottomright », « bottomleft »).

Une image de légende n'est disponible que pour la pression, les précipitations classiques, les nuages classiques, la pluie classique, la neige, la température et la vitesse du vent. Veuillez ajouter vos propres images si vous en avez besoin d'autres.

Utiliser les données actuelles pour les villes

Les données météorologiques des villes sont récupérées à l'aide de l'API OpenWeatherMap. Ils sont ajoutés en tant que LayerGroup de marqueurs. Cette couche peut être actualisée toutes les n minutes (définissez n avec l'option intervall mais n'utilisez pas moins de 10 minutes, s'il vous plaît).

Initialisation

Voici comment initialiser ces calques créés dynamiquement :

var ville = L.OWM.current( /* options */ );

Possibilités

De nombreuses options sont disponibles pour configurer le comportement des données de la ville ( la valeur par défaut est en gras). Mais n'ayez pas peur du grand nombre d'options, vous n'avez pas besoin d'en définir si vous êtes satisfait des valeurs par défaut :

appId : chaîne ( null ). Veuillez obtenir une clé API gratuite (appelée APPID) si vous utilisez régulièrement les données météorologiques actuelles d'OWM.
lang : 'en' , 'de', 'ru', 'fr', 'es', 'ca'. Langue des textes contextuels. Remarque : toutes les traductions ne sont pas encore terminées.
minZoom : Nombre ( 7 ). Niveau de zoom minimal pour récupérer les données de la ville. Utilisez des valeurs plus petites uniquement à vos propres risques.
intervalle : Nombre ( 0 ). Temps en minutes pour recharger les données de la ville. Veuillez ne pas utiliser moins de 10 minutes. 0 pas de rechargement (par défaut)
progressControl : vrai ou faux. Indique si un contrôle de progression doit être utilisé pour indiquer à l'utilisateur que les données sont en cours de chargement.
imageLoadingUrl : URL ( 'owmloading.gif' ). URL de l'image de chargement, ou chemin relatif au document HTML. C'est important lorsque l'image n'est pas dans le même répertoire que le document HTML !
imageLoadingBgUrl : URL ( null ). URL de l'image d'arrière-plan pour le contrôle de la progression si vous n'aimez pas celle par défaut.
Unité de température : 'C' , 'F', 'K'. Afficher la température en Celsius, Fahrenheit ou Kelvin.
températureDigits : Nombre ( 1 ). Nombre de décimales pour la température.
speedUnit : 'ms' , 'kmh' ou 'mph'. Unité de vitesse du vent (m/s, km/h ou mph).
speedDigits : Nombre ( 0 ). Nombre de décimales pour la vitesse du vent.
popup : vrai ou faux. S'il faut lier une popup au marqueur de ville.
keepPopup : vrai ou faux. Lorsque c'est vrai, il essaie de rouvrir une fenêtre contextuelle déjà ouverte lors d'un déplacement ou d'un rechargement. Peut entraîner un déplacement supplémentaire de la carte (après la réouverture de la fenêtre contextuelle) avec la fermeture et la réouverture de la fenêtre contextuelle.
showOwmStationLink : vrai ou faux. S'il faut lier le nom de la ville à OWM.
showWindSpeed : 'vitesse', 'beaufort' ou 'les deux' . Afficher la vitesse du vent sous forme de vitesse en speedUnit ou en beaufort scala ou les deux.
showWindDirection : 'deg', 'desc' ou 'both' . Afficher la direction du vent en degrés, en description (par exemple NNE) ou les deux.
showTimestamp : vrai ou faux. Indique s'il faut afficher l'horodatage des données.
showTempMinMax : vrai ou faux. S'il faut afficher la température min/max.
useLocalTime : vrai ou faux. S'il faut utiliser l'heure locale ou UTC pour l'horodatage.
clusterSize : Nombre ( 150 ). Si certaines villes sont trop proches les unes des autres, elles sont masquées. Dans une zone de taille clusterSize pixels * clusterSize pixels, une seule ville est affichée. Si vous zoomez, les villes cachées apparaîtront.
imageUrlCity : URL ( 'https://openweathermap.org/img/w/{icon}.png' ). Modèle d'URL pour les images des conditions météorologiques des villes. {icon} sera remplacé par la propriété icon des données de la ville. Voir http://openweathermap.org/img/w/ pour quelques images standard.
imageWidth : Nombre ( 50 ). Largeur de l'image des conditions météorologiques de la ville.
imageHauteur : Nombre ( 50 ). Hauteur de l'image des conditions météorologiques de la ville.
MarkerFunction : Fonction ( null ). Fonction définie par l'utilisateur pour la création de marqueurs. Nécessite un paramètre pour les données de la ville.
popupFunction : Fonction ( null ). Fonction définie par l'utilisateur pour la création de popups. Nécessite un paramètre pour les données de la ville.
mise en cache : vrai ou faux. Utilisez la mise en cache des données météorologiques actuelles. Les données mises en cache sont rechargées lorsqu'elles sont trop anciennes ou que le nouveau cadre de délimitation ne rentre pas dans le cadre de délimitation mis en cache.
cacheMaxAge : Nombre ( 15 ). Âge maximum en minutes des données mises en cache avant qu'elles ne soient considérées comme trop anciennes.
keepOnMinZoom : faux ou vrai. Conserver ou supprimer les marqueurs lorsque le zoom < minZoom.
baseUrl : La valeur par défaut est "https://{s}.tile.openweathermap.org/map/{layername}/{z}/{x}/{y}.png" - ne le modifiez que lorsque vous savez ce que vous êtes faire.

Exemple simple

Voici les lignes les plus 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 ) ;

Exemple avec des fonctions de marqueur/popup fournies par l'utilisateur pour la météo actuelle

Fournissez une fonction pour créer des marqueurs et une autre pour créer des popups. Ajoutez les options MarkerFunction et popupFunction à votre appel à L.OWM.current . La structure des données que vous obtenez en tant que paramètre n'est pas bien documentée pour le moment. Vous obtenez ce qu'OWM envoie. Regardez simplement les données et gardez à l’esprit que la plupart des entrées sont facultatives. Le contexte (this) des fonctions est l'instance L.OWM.Current que vous avez créée. Vous avez donc accès aux options (par exemple this.options.temperatureUnit) et à d'autres attributs.

 < 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 ) ;