Leaflet For Some Cats.By

Calvin MetcalfWith apologies to Max Ogden

● I'm going to teach you all about Leaflet.js

● In a basic way that even a cat could understand

● Assuming your cat has a working knowledge of JavaScript like mine.

Leaflet is a small library for making maps in the browser.

It fills a similar niche to OpenLayers, GoogleMaps, or JQueryGeo

Straight forward method chaining approch

var map = L.map("map-div") .setView([42.349993,-71.049858],16); .addLayer( L.tileLayer("http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg") );

Pro Tip: Method chaining is just a non pretension term for monad.

What we made last slide

Tell Me More

Extendable

Large plugin community

Clustering

or

AJAXDid I mention it consumes GeoJSON natively?

Usually you'd do:

L.geoJson(some geoJson object, {options}).addTo(map);

L.GeoJSON.AJAX = L.GeoJSON.extend({ initialize: function (url, options) { this._layers = {}; L.Util.setOptions(this, options); var request = new XMLHttpRequest();

request.open("GET", url);var _this=this;request.onreadystatechange = function() {

if ( request.readyState === 4 && request.status === 200 ) {_this.addData( JSON.parse(request.responseText) );}

};request.send();

}});

L.GeoJSON.AJAX = L.GeoJSON.extend({ initialize: function (url, options) { this._layers = {}; L.Util.setOptions(this, options); var request = new XMLHttpRequest();

request.open("GET", url);var _this=this;request.onreadystatechange = function() {

if ( request.readyState === 4 && request.status === 200 ) {_this.addData( JSON.parse(request.responseText) );}

};request.send();

}});

L.geoJson.ajax=function(url,options){return new L.GeoJSON.AJAX(url,options);

}

Almost forgot

Co

de

Wo

rkin

g

Add D3 for double the awsome

Easy: use D3 to transform your data before putting it onto a map

Hard: use d3 to put the svg onto the map

Pro: web worker fractals!(not d3, not me)

leafletjs.com

github.com/calvinmetcalf

twitter.com/cwmma

kublaikat.tumblr.com

communistjs.com