Skip to content

Latest commit

 

History

History
70 lines (48 loc) · 5.52 KB

index.md

File metadata and controls

70 lines (48 loc) · 5.52 KB
Raw
layout
default

July 30, 2012 — Leaflet 0.4 Released with Lots of Exciting Improvements! — Read More in the Blog

Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin of CloudMade with a team of dedicated contributors. Weighing just about 27 KB of gzipped JS code, it still has all the features most developers ever need for online maps, while providing a smooth, pleasant user experience.

It is built from the ground up to work efficiently 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 and a simple API with convention over configuration. The OOP-based code of the library is designed to be modular, extensible and very easy to understand.

{: .usedby} Used by: Flickr foursquare Wikimedia Meetup WSJ Geocaching StreetEasy Nestoria City-Data Topix Chartbeat GIS Cloud CityMaps ...

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

// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);

// add a CloudMade tile layer with style #997
L.tileLayer('http://{s}.tile.cloudmade.com/[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>'
}).addTo(map);

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.').openPopup();

Learn more with the quick start guide, check out other tutorials, or head straight to the API documentation.

Contributing to Leaflet

The project is hosted on GitHub, waiting for your contributions --- just send your pull requests to @mourner (Vladimir Agafonkin, Leaflet author and 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.

<script> var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', cloudmadeAttribution = 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade', cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution}); var map = new L.Map('map'); map.setView(new L.LatLng(51.505, -0.09), 13).addLayer(cloudmade); var marker = new L.Marker(new L.LatLng(51.5, -0.09)); map.addLayer(marker); marker.bindPopup('A pretty CSS3 popup.
Easily customizable.').openPopup(); </script>