leaflet for some cats (with apologies to Max Ogden)
-
Upload
calvin-metcalf -
Category
Documents
-
view
480 -
download
0
description
Transcript of leaflet for some cats (with apologies to Max Ogden)
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