Adding To The Leaf Pile

Leaflet.js Plugin Development
Michael Moore
Flat Rock Geographics

https://github.com/stuporglue/...
Leaflet in 30 Seconds
●

JavaScript web mapping Library

●

Free

●

Lightweight
–

●

9k LOC vs. OpenLayer's 85k

Many pl...
Setup

1. Follow a tutorial on leafletjs.com
2. Change leaflet.js to leaflet-src.js
3. Get as close as you can without
cus...
Finding What To Change: API
●

Good API docs. Start there.
–

Find objects & methods related to task
Finding What To Change: API

Find those objects or in leaflet-src.js
● “L.Point = “
● “L.Point.prototype = ”
● “L.point = ...
Object Types
●

L.Object – the object itself
–

●

Initialization defined here

L.Object.prototype – the object definition...
Special functions to know
●

L.Class
–

●

L.Class.extend
–

●

Create a new class by extending another with
additional fu...
Finding What To Change: Debugger
●

Explore objects in debugger
–
–

●

Expand to see methods and variables
Use tab-comple...
Debugger Crash Course
Debugger Tools

1. Reload
2. Continue
3. Step In To
4. Step Over
5. Step Out
Spiders

Let's add some Halloween spiders to the map and make them dance
We will use 3 different methods!
Ways To Bend Leaflet To Your Will
●

Add new methods

●

Override existing methods

●

Create new objects by extending exi...
Static Spiders

Demo
// Customization Code
/* NONE*/
// Add some spider code
var spiders = [];
var spider,lat,lng;
var spi...
Adding a New Method
DEMO
// Customization Code
// We add a new function called *crawl* to the Marker object
L.Marker.inclu...
New Method (cont)
// Add some spiders code
var spiders = [];
var spider,lat,lng;
var spiderIcon = new L.Icon({iconUrl:'img...
Override Method
DEMO
// Customization Code
L.Marker.include({
// Save off the original update function so we can use it la...
Override Method (cont)
// Add some spiders code
var spiders = [];
var spider,lat,lng;
var spiderIcon = new L.Icon({iconUrl...
Object Extending
DEMO
L.Spider = L.Marker.extend({
// Anything we don't define will call up to the L.Marker object
options...
Object Extending (cont)

for(var i = 0;i<10;i++){
new L.Spider().addTo(map);
}
Get the Code on GitHub!
https://github.com/stuporglue/leaflet-spiders
Questions?

?
Resources
●

Leaflet Releases Source Code

●

Leaflet API

●

Leaflet Plugin Authoring Guide

●

Leaflet-Spiders on GitHub...
Upcoming SlideShare
Loading in …5
×

Adding To the Leaf Pile

1,069 views
953 views

Published on

Leaflet Plugin Development Crash Course

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,069
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • {"5":"When we find the name of the object we want to modify, we now need to find the code behind it. We&apos;ll search for it in leaflet-src.js \nThis is one of the slightly tricky conventions about the leaflet code. For any given leaflet object type there are three places you may need to look for code.\n","11":"So, here comes the code intensive part of the presentation. \nLike I said earlier, the WFS-Transactional plugin grew too unwieldy to present in a session like this, so instead I created three very simple plugins that all do the same thing. \nOn a very basic map, we&apos;re going to add dancing haloween spiders.\n","6":"The L.Point function is the actual object type that we will see in a minute the debugger. It includes initialization code.\nThe .prototype is like an object template. The .prototype is where class functions and variables are defined.\nThe L.point function handles fancy initialization, like if you want to be able to pass in several types of objects. \n","1":"Good Morning Everybody!\nThank you for coming to “Adding to the leaf pile” a presentation on Leaflet plugin development. \nI&apos;m Michael Moore, I&apos;m a GIS web developer for Flat Rock Geographics I&apos;m also a 2nd year MGIS student at the University of Minnesota.\nThis spring I started developing a website which uses Leaflet and it came to a point where we needed to use WFS-Transactional, which Leaflet doesn&apos;t support out of the box. So, I dug into Leaflet plugin development. \nThe actual code for that plugin ended up being to complex for a simple presentation, so I made a simple example to use instead, but we&apos;ll get to that in a minute. \n","7":"There are several special object types and functions in the code, but there are just three that deserve special mention today. \nL.extend adds a hash of new methods to an existing object and returns a new object type.\nL.Class.mergeOptions will set new default options in a class.\n","2":"For those of you who aren&apos;t familiar with Leaflet, here&apos;s a 30 second overview. It is a free JavaScript web mapping library. Other popular web mapping libraries include OpenLayers or The Google Maps API. \nLeaflet is very light weight, with only 9000 lines of code, as compared to OpenLayers 85,000 lines of code. The code is also very neatly organized and easy to read. \nLeaflet itself covers 90% of use cases that developers will have, and there are plugins for many other use cases. However, some things are still missing or maybe you just want to customize something that is already there. If that&apos;s the case you may want to make a leaflet plugin. \n","8":"Next up we&apos;re going to explore objects in the debugger. If you&apos;re going to do Leaflet development, or any other JavaScript development the debugger is going to be your best friend.\nYou can inspect variables, objects and functions. You can step through live code a line at a time and lots of other cool stuff. \n","3":"To develop a leaflet plugin, start by setting up your map, possibly by following one of the simple tutorials on the Leaflet website.\nOnce the map is working, change the reference to leaflet.js to leaflet-src.js The leaflet.js file is compressed, making it difficult to read or to use for debugging. The leaflet-src.js file is the full 9000 lines of code. \nNext, especially if you&apos;re extending existing functionality, get the map as close to working as you can. \nFor example, if you want popups to behave differently than normal, get regular popups working first. \n","9":"Here&apos;s a brief introduction to the Firebug debugger. Chrome, Safari and Internet Explorer all have built-in debuggers that are similar to this one. \nI have circled a couple of the key features.\n","4":"The next step is to find what you need to change. Ideally we will be able to modify an existing object type to do what we want instead of writing a new Leaflet object type from scratch. \nThe Leaflet API is s very good, so we&apos;ll start there. \n","10":"These buttons let you control the debugger when you&apos;re stepping through code a line at a time. \nWe will do a demo of this at the end, if there is time.\n"}
  • Adding To the Leaf Pile

    1. 1. Adding To The Leaf Pile Leaflet.js Plugin Development Michael Moore Flat Rock Geographics https://github.com/stuporglue/leaflet-spiders
    2. 2. Leaflet in 30 Seconds ● JavaScript web mapping Library ● Free ● Lightweight – ● 9k LOC vs. OpenLayer's 85k Many plugins for other use cases – Some things are still missing!
    3. 3. Setup 1. Follow a tutorial on leafletjs.com 2. Change leaflet.js to leaflet-src.js 3. Get as close as you can without customizing
    4. 4. Finding What To Change: API ● Good API docs. Start there. – Find objects & methods related to task
    5. 5. Finding What To Change: API Find those objects or in leaflet-src.js ● “L.Point = “ ● “L.Point.prototype = ” ● “L.point = “ ● “methodname: function(“ ●
    6. 6. Object Types ● L.Object – the object itself – ● Initialization defined here L.Object.prototype – the object definition – This is what we actually want to modify – May be inherited, or may be defined explicitly ● ● If inherited, you won't find it in the code L.object – convenience method – May have extra initialization options
    7. 7. Special functions to know ● L.Class – ● L.Class.extend – ● Create a new class by extending another with additional functions L.Class.include – ● Most Leaflet things inherit from this Set functions in existing class L.Class.mergeOptions – Set new default option values L.NewClass = L.Marker.extend({funcName: function(){}})
    8. 8. Finding What To Change: Debugger ● Explore objects in debugger – – ● Expand to see methods and variables Use tab-completion! Use debugger on-next to figure out what gets called. – Step through to find which function you want to change
    9. 9. Debugger Crash Course
    10. 10. Debugger Tools 1. Reload 2. Continue 3. Step In To 4. Step Over 5. Step Out
    11. 11. Spiders Let's add some Halloween spiders to the map and make them dance We will use 3 different methods!
    12. 12. Ways To Bend Leaflet To Your Will ● Add new methods ● Override existing methods ● Create new objects by extending existing ● Not covered – – ● New Objects From Scratch Modifying Leaflet Itself Not recommended – Reaching Inside Leaflet Objects
    13. 13. Static Spiders Demo // Customization Code /* NONE*/ // Add some spider code var spiders = []; var spider,lat,lng; var spiderIcon = new L.Icon({iconUrl:'img/spider.png'}); for(var i = 0;i<10;i++){ lat = Math.random()*180 - 90; lng = Math.random()*360 - 180; spider = new L.Marker([lat,lng],{icon:spiderIcon}); spider.addTo(map); }
    14. 14. Adding a New Method DEMO // Customization Code // We add a new function called *crawl* to the Marker object L.Marker.include({crawl: function(){ // Convert to a pixel and jiggle it up to 5 pixels in any direction var pixel = this._map.latLngToLayerPoint(this._latlng); pixel.x += Math.round(Math.random()*10) - 5; pixel.y += Math.round(Math.random()*10) - 5; this._latlng = this._map.layerPointToLatLng(pixel); this.update(); }});
    15. 15. New Method (cont) // Add some spiders code var spiders = []; var spider,lat,lng; var spiderIcon = new L.Icon({iconUrl:'img/spider.png'}); for(var i = 0;i<10;i++){ lat = Math.random()*180 - 90; lng = Math.random()*360 - 180; spider = new L.Marker([lat,lng],{icon:spiderIcon}); spider.addTo(map); spiders.push(spider); } // Every 200ms make each spider crawl setInterval(function(){ for(var i = 0;i<spiders.length;i++){ spiders[i].crawl(); } },200);
    16. 16. Override Method DEMO // Customization Code L.Marker.include({ // Save off the original update function so we can use it later _origUpdate: L.Marker.prototype.update, // Define our new update function update: function(){ // Convert to a pixel and jiggle it up to 5 pixels in any direction var pixel = this._map.latLngToLayerPoint(this._latlng); pixel.x += Math.round(Math.random()*10) - 5; pixel.y += Math.round(Math.random()*10) - 5; } }); this._latlng = this._map.layerPointToLatLng(pixel); return this._origUpdate();
    17. 17. Override Method (cont) // Add some spiders code var spiders = []; var spider,lat,lng; var spiderIcon = new L.Icon({iconUrl:'img/spider.png'}); for(var i = 0;i<10;i++){ lat = Math.random()*180 - 90; lng = Math.random()*360 - 180; spider = new L.Marker([lat,lng],{icon:spiderIcon}); spider.addTo(map); spiders.push(spider); } setInterval(function(){ for(var i = 0;i<spiders.length;i++){ spiders[i].update(); } },200);
    18. 18. Object Extending DEMO L.Spider = L.Marker.extend({ // Anything we don't define will call up to the L.Marker object options: { icon: new L.Icon({iconUrl:'img/spider.png'}) }, // Called when object created initialize: function(){ var lat = Math.random()*180 - 90; var lng = Math.random()*360 - 180; this._latlng = L.latLng(lat,lng); }, var self = this; setInterval(function(){self.crawl();}, 200); // Move the spider crawl: function(){ var pixel = this._map.latLngToLayerPoint(this._latlng); pixel.x += Math.round(Math.random()*10) - 5; pixel.y += Math.round(Math.random()*10) - 5; this._latlng = this._map.layerPointToLatLng(pixel); return this.update(); } }); L.spider = function(latlng,options){ return new L.Spider(); };
    19. 19. Object Extending (cont) for(var i = 0;i<10;i++){ new L.Spider().addTo(map); }
    20. 20. Get the Code on GitHub! https://github.com/stuporglue/leaflet-spiders
    21. 21. Questions? ?
    22. 22. Resources ● Leaflet Releases Source Code ● Leaflet API ● Leaflet Plugin Authoring Guide ● Leaflet-Spiders on GitHub – Leaflet-Spiders Demo

    ×