Introduction to Leaflet

R. Alexander Miłowski

milowski@ischool.berkeley.edu

School of Information, UC Berkeley

What is Leaflet?

Marketing

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;
    }
    </style>
                   
  2. Include Leaflet:

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></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 = L.map('demo').setView([37.871293, -122.258556], 17);
                   
  2. Add a tile layer for map details (e.g., OpenStreetMap):

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
                      
                   

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
L.circle([38.22, -122.313], 6000).addTo(map);
         

Earthquake Demo