Leaflet

A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by CloudMade

Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by CloudMade to form the core of its next generation JavaScript API. Weighing just about 22kb of gzipped JS code, it still has all the features most developers ever need for online maps, while providing a fast, pleasant user experience.

It is built from the ground up to work efficiently and smoothly on both desktop and mobile platforms like iOS and Android, taking advantage of HTML5 and CSS3 on modern browsers. The focus is on usability, performance, small size, A-grade browser support, convention over configuration and an easy-to-use API. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.

Basic usage example

Here we create a map with tiles of our choice, add a marker and bind a popup with some text to it:

// initialize the map on the "map" div
var map = new L.Map('map');

// create a CloudMade tile layer (or use other provider of your choice)
var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png', {
	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
	maxZoom: 18
});

// add the CloudMade layer to the map set the view to a given center and zoom
map.addLayer(cloudmade).setView(new L.LatLng(51.505, -0.09), 13);

// create a marker in the given location and add it to the map
var marker = new L.Marker(new L.LatLng(51.5, -0.09));
map.addLayer(marker);

// attach a given HTML content to the marker and immediately open it
marker.bindPopup("A pretty CSS3 popup.<br />Easily customizable.").openPopup();

Check out the examples section for more examples, or head straight to the documentation.

Contributing to Leaflet

The project is hosted on GitHub, waiting for your contributions — just send your pull requests to Vladimir Agafonkin (Leaflet maintainer). Let's make the best library for maps that can possibly exist!

You can also help the project a lot by reporting bugs on the GitHub issues page, showing your support for your favorite feature suggestions on Leaflet UserVoice page, tweeting to @LeafletJS or joining the Leaflet mailing list.