C'est un plugin jQuery (encore en alpha) qui vient vous aider à manipuler l'API de Leaflet pour afficher des cartes basées sur Open Street Map.
<div id="mini_map" style="height: 140px; width: 800px;"></div> // Passer un objet JSON et c'est tout. Pour créer une autre instance : changez l'id passé au sélecteur jQuery. $("#mini_map").osmLeaflet({ zoom : 9, latitude : 48.833, longitude : 2.333, popup : { latitude : 48.859, longitude : 2.333, text : 'Hello !' } });
<div id="mini_map" style="height: 140px; width: 800px;"></div> // Pas d'objet JSON, un peu plus verbeux mais moins lisible, non ? Pour créer une autre instance : changez le nom de variable de la carte et le sélecteur. var map = new L.Map("mini_map"), cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade' }), popup = new L.Popup(); map.setView(new L.LatLng(48.833, 2.333, 9).addLayer(cloudmade); popup.setLatLng(new L.LatLng(48.859, 2.333)); popup.setContent('Hello !'); map.openPopup(popup);
Mets en place la carte. Appelée par défaut si pas de paramètres.
Prend les options suivantes :
Nom | Type | Obligatoire | Description |
---|---|---|---|
latitude | Nombre | Oui | Latitude de la position de la carte ou de l'élément que vous souhaitez positionner. |
longitude | Nombre | Oui | Longitude de la position de la carte ou de l'élément que vous souhaitez positionner. |
markers | Tableau | Non | Contient la liste des marqueurs que vous souhaitez mettre en place, avec leur caractéristiques. |
onClick | Fonction | Non | Fonction de callback à appeler au moment du clic quelque part sur la carte. Cette fonction prend en paramètre l'objet d'évènement. |
popup | Objet | Non | Contient la description de la popup que vous souhaitez mettre en place. |
zoom | Nombre | Non | Niveau de zoom de la carte. Compris entre 1 et 18. |
Permet de placer un ou plusieurs marqueur(s) sur la carte.
Prend les options suivantes (ou un tableau de ces options) :
Nom | Type | Obligatoire | Description |
---|---|---|---|
click | Objet | Non | Ouvre une popup décrit en paramètre au clic sur le marqueur. |
latitude | Nombre | Oui | Latitude de la position de la carte ou de l'élément que vous souhaitez positionner. |
longitude | Nombre | Oui | Longitude de la position de la carte ou de l'élément que vous souhaitez positionner. |
Permet de placer une infobulle sur la carte. L'API de Leaflet n'autorise pas l'affichage de plus d'une popup à la fois par carte.
Prend les options suivantes :
Nom | Type | Obligatoire | Description |
---|---|---|---|
content | Chaîne | Non | Contenu textuel de l'élément que vous souhaitez positionner. |
latitude | Nombre | Oui | Latitude de la position de la carte ou de l'élément que vous souhaitez positionner. |
longitude | Nombre | Oui | Longitude de la position de la carte ou de l'élément que vous souhaitez positionner. |
autopan | Booléen | Non | Par défaut à true. Permet de désactiver l'effet pan si vous le souhaiter quand la carte s'adapte à la position de la popup. |
Appelle la fonction de callback passée en paramètre sur clic dans n'importe quelle région de la carte. Peut aussi prendre un objet de type Deferred.
Prend le paramètre suivant :
Nom | Type | Obligatoire | Description |
---|---|---|---|
callback * | Fonction | Oui | Fonction de callback appelée sur clic sur la carte. |
callback * | Deferred | Oui | Objet de callback qui passera à l'état résolu sur clic sur la carte. Implique de n'être exécuté qu'une seule fois. Pour les spécificités liées à l'objet Deferred, se référer à la documentation officielle. |