Open-Source JavaScript Maps with Leaflet Will Abson

What is Leaflet?

Is it like Google Maps?

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

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

Add a Layer L.tileLayer(" { attribution: this.msg("Map data © OpenStreetMap contributors") }).addTo(map);

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

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

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, …

Don’t lock yourself in