Web Cartography 7

Leaflet basics

written for 0.7.x

 

http://leafletjs.com/

Pros

  • open-source
  • lightweight
  • extensible with plugins
  • clean API
  • easy-to-understand
  • not too much OOP clutter
  • proj4 support
  • used by Mapbox and many more

Cons

  • no basemap included (OSM ftw)
  • development a bit too slow

L.*

Options are almost always optional (wow) and passed as an object. Behold:

var map = L.map("map", {
    option1: false,
    option2: true
});

Syntax sugar

new L.Map("map") = L.map("map"); // because of class factories

Passing options

Always peep into the docs before reinventing the wheel

Fluent interface

map.setZoom(5)
    .setView([10, 10])
    .addLayer(layer); // very addictive

L.map

  • the most important class
  • no L.map means no fun
  • no center and zoom means no map
var options = {
    center: [0, 0],
    zoom: 5
    // other properties (see the docs!)
};

var map = L.map(document.getElementById("map"), options); // produces the same as
var map = L.map("map", options);

Raster layers

L.tileLayer

  • no basemap, remember?
  • implements ILayer interface
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
  • L.tileLayer.wms
  • L.tileLayer.canvas
  • L.imageOverlay

Vector layers

Vector layers inherit from abstract L.path class

and implement ILayer interface

  • L.path
    • L.polyline
    • L.polygon
      • L.rectangle
    • L.circle
      • L.circleMarker

They all share methods and properties defined by L.path!

Thanks to the ILayer interface you add them the same way like raster layers

Web Cartography 7: Leaflet basics

By Michal Zimmermann

Web Cartography 7: Leaflet basics

  • 1,359