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?

L.Class

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

Interfaces

A standard set of methods for defineing how things work.

• Layers should impliment ILayer
• Interactions should impliment IHandler
• Controls impliment IControl

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.

https://github.com/patrickarlt/leaflet-virtual-grid

Virtual Grid In Action

Request Instagram content in each grid cell.

Thanks

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