(JAYA)🎄Low Rate Call Girls Lucknow Call Now 8630512678 Premium Collection Of ...
Adding To the Leaf Pile
1. Adding To The Leaf Pile
Leaflet.js Plugin Development
Michael Moore
Flat Rock Geographics
https://github.com/stuporglue/leaflet-spiders
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. 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. Finding What To Change: API
●
Good API docs. Start there.
–
Find objects & methods related to task
5. Finding What To Change: API
Find those objects or in leaflet-src.js
● “L.Point = “
● “L.Point.prototype = ”
● “L.point = “
● “methodname: function(“
●
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. 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. 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
11. Spiders
Let's add some Halloween spiders to the map and make them dance
We will use 3 different methods!
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. 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. 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. 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. 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. 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. 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();
};
{"5":"When we find the name of the object we want to modify, we now need to find the code behind it. We'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'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'm Michael Moore, I'm a GIS web developer for Flat Rock Geographics I'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'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'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't familiar with Leaflet, here'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's the case you may want to make a leaflet plugin. \n","8":"Next up we're going to explore objects in the debugger. If you'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'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'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'll start there. \n","10":"These buttons let you control the debugger when you're stepping through code a line at a time. \nWe will do a demo of this at the end, if there is time.\n"}