Introduction to Leaflet

R. Alexander Miłowski

School of Information, UC Berkeley

What is Leaflet?


Leaflet is designed with simplicity, performance and usability in mind.

Developed by Vladimir Agafonkin:

  • easy maps,
  • using a simple JavaScript library,
  • based on HTML5, CSS3, SVG,
  • that is agnostic to where the data comes from.

Great documentation online.

(demo from the main page example)

Basic Map

Step through of demo:

  1. Add a container (div) with a height dimension:

    <div id='demo'></div>
    <style type="text/css">
    #demo {
       height: 20em;
  2. Include Leaflet:

    <link rel="stylesheet" href="" />
    <script src=""></script>

Basic Map - continued

  1. Create the map (one of many ways):

    // constructing the map by ID and then setting the center and zoom level.                 
    var map ='demo').setView([37.871293, -122.258556], 17);
  2. Add a tile layer for map details (e.g., OpenStreetMap):

    L.tileLayer('http://{s}{z}/{x}/{y}.png', {
        attribution: '© <a href="">OpenStreetMap</a> contributors'

Drawing on a Map

Add a marker

// add a marker in the given location, attach some popup content to it and open the popup
L.marker([37.871293, -122.258556]).addTo(map)
    .bindPopup('School of Information');

Draw a circle:

// add a circle[38.22, -122.313], 6000).addTo(map);

Earthquake Demo