1. Open-Source JavaScript Maps with Leaflet Will Abson – @wabson

2. What is Leaflet?

3. Is it like Google Maps?

4. Example Page Markup #map { height: 180px; }

5. Create a Map var map = L.map('map').setView([51.505, -0.09], 13);

6. Add a Layer L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: this.msg("Map data © OpenStreetMap contributors") }).addTo(map);

7. Add a Marker L.marker([51.5, -0.09]).addTo(map).bindPopup('A pretty CSS3 popup. Easily customizable.').openPopup();

8. Add a Shape var circle = L.circle([51.508, -0.11], 500, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }).addTo(map);

9. Why Leaflet? Lots of features, plugins, more coming! Open Source Modern, standards-based, mobile-friendly Uses HTML5 and CSS3 Lightweight 27k gzipped, 102k minified Compatible with a wide range of map tile providers and other layer types OpenStreetMap, MapBox, CloudMade, …

10. Don’t lock yourself in http://leafletjs.com/