Extending Leaflet

Extending Leaflet

0 2


Presentation on the Esri Leaflet plugin and on how to extend Leaflet

On Github patrickarlt / extending-leaflet-talk

Extending Leaflet

http://patrickarlt.github.io/extending-leaflet-talk / @patrickarlt

So how did I get here

  • I work at Esri R&D Center Portland
  • I really like Leaflet
  • I started making a plugin for Leaflet to work with Esri services

Basemaps and Tiles

Feature Layer

Bonus: Clustering!

Coming Soon

  • Labeled Feature Layer (w/ Leaflet.label)
  • Heatmap Feature Layer

So how does it work?


  • Everything extends L.Class.
  • L.Class also mixins (includes), statics and default options.


A standard set of methods for defineing how things work.

A Custom Layer

L.MyLayer = L.Class.extend({
  statics: {
    FOO: 'bar'
  includes: L.Mixin.Events,
  options: {
    size: 512
  initialize: function(options){
    /* mix passed options with defaults */
    L.Util.setOptions(this, options);
  onAdd: function(map){
    /* how to add your layer to the map */
  onRemove: function(map){
    /* how to remove your layer from the map */

Virtual Grid

Create a consistant tile like grid to query an API with. This reduces calls for duplicate areas and results in smaller requests.


Virtual Grid In Action

Request Instagram content in each grid cell.


http://patrickarlt.github.io/extending-leaflet-talk / @patrickarlt