Learning to


By Christopher Baines

Following Along


Either download the repository zip / tgz

Or, clone the repository

Be prepared to...

  • Make a basic map
  • Add some things
  • Use some GeoJSON

What is Leaflet

“An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps”

Contribute on GitHub

Key Features

  • Free Software
  • Extremely lightweight — around 34 KB of gzipped JS code
  • No external dependencies
  • Multi-touch support
  • GeoJSON Layers
  • Markers (custom markers support)
  • Popups
  • Use any map Provider
  • Browser Support works in IE7
Full list of features

Your First Map

var map = L.map('map', {
    center: [50.9087036, -1.4045204], // The Art House Cafe
    zoom: 13

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
   attribution: '© OpenStreetMap contributors'

What a Marker!

Marker Documentation

What a Marker!

// Add a marker over the Art House Cafe

var marker = L.marker([50.9087036, -1.4045204])


A Suprising Popup

Popup Documentation

A Suprising Popup

// Add a popup to the marker

marker.bindPopup("The Art House Cafe");

A Round Circle

Circle Documentation

A Round Circle

// Add a circle to the map

var circle = L.circle(artHouseCafe, 50, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0

Cafes with GeoJSON

GeoJSON Documentation

Cafes with GeoJSON

// Load some GeoJSON exported from OpenStreetMap using the OverpassAPI
// (http://overpass-turbo.eu/s/7yI)

getJSON("cafes.json", function(cafes) {


// plus a utility function: getJSON

GeoJSON with Custom Icons

Icon Documentation

GeoJSON with Custom Icons

// Load some GeoJSON exported from OpenStreetMap using the OverpassAPI
// (http://overpass-turbo.eu/s/7yI)

var coffeeIcon = L.icon({
  iconUrl: 'coffee.png',

  iconSize:     [32, 37], // size of the icon
  iconAnchor:   [16, 37], // point of the icon which will
  popupAnchor:  [16, 0] // point from which the

getJSON("cafes.json", function(cafes) {

  // Coffee icon from
  // http://mapicons.nicolasmollet.com/markers/restaurants-bars/bars/coffee/

  L.geoJson(cafes, {
    pointToLayer: function(feature, latLng) {
      if (feature.properties.cuisine == "coffee_shop") {
        var marker = L.marker(latLng, {
          icon: coffeeIcon

        return marker;
      } else {
        return L.marker(latLng);
    onEachFeature: function(feature, layer) {



A short selection

One Alternative worth Considering

OpenLayers 3 is a

“A high-performance, feature-packed library for all your mapping needs”

In comparison to Leaflet, this library is more powerful, at the expense of being larger and more complicated.

OpenLayers 3 Examples

Useful Links