Fork me on GitHub

Qu'est-ce que osmLeaflet.jQuery ?

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.

Capacités

  • Choisir le niveau de zoom initial
  • Puis jouer avec votre molette ou les boutons de zoom
  • Placer des marqueurs
  • Placer une popup
  • Et lui donner un contenu riche en HTML
  • Réagir aux évènements
  • Instances multiples
  • Positionner une carte facilement
  • Licence MIT, faites ce que vous voulez
  • Sans contrainte de droits d'auteur
  • API simplifiée par rapport à Leaflet
  • Repose sur Leaflet et Open Street Map

Démonstration

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

Suivre

RSS

Documentation

init (options)

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.

addMarker (options)

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.

addPopup (options)

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.

onClick (callback)

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.
* L'un ou l'autre, au choix