Leaflet - Une librairie JS pour créer des maps interactives

Leaflet est une librairie javascript permettant de créer des cartes / maps interactives basées sur OpenStreetMap.

Leaflet est sans doute la première vraie alternative aux librairies JS permettant la création de Google Maps.

Cette librairie permet d'intégrer facilement une carte interactive utilisant la cartographie participative et open source OpenStreetMap.

Très facile à prendre en main, vous aurez la possibilité de donner des coordonnées latitudes et longitudes ainsi qu'un zoom pour afficher un endroit précis sur la carte.

var map = new L.Map('map');
var london = new L.LatLng(51.505, -0.09); // geographical point (longitude and latitude)
map.setView(london, 13).addLayer(cloudmade);

La librairie vous permettra aussi d'ajouter des marqueurs,  zones et formes avec légendes sous forme de popup:

// Ajouter un marqueur

var markerLocation = new L.LatLng(51.5, -0.09);
var marker = new L.Marker(markerLocation);
map.addLayer(marker);

// AJouter un cercle

var circleLocation = new L.LatLng(51.508, -0.11),
    circleOptions = {
        color: 'red', 
        fillColor: '#f03', 
        fillOpacity: 0.5
    };
    
var circle = new L.Circle(circleLocation, 20, circleOptions);
map.addLayer(circle);

// Ou même un polygone
var p1 = new L.LatLng(51.509, -0.08),
    p2 = new L.LatLng(51.503, -0.06),
    p3 = new L.LatLng(51.51, -0.047),
    polygonPoints = [p1, p2, p3];

var polygon = new L.Polygon(polygonPoints);
map.addLayer(polygon);


// Et leur assigner une légende Popup
marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");

La map utilise des technologies HTML5 & CSS3, permettant une compatibilité navigateur étendue (Sauf IE6 naturellement), jusqu'au navigateurs mobiles.

Il est notamment possible de faire une map avec géolocalisation automatique à partir du navigateur.

Site Officiel