Extending Leaflet Control

[Elliott]

Hi all,

I've been trying to extend leaflet's L.Control, much in the same way as control.layers, attribution, scale and zoom. 

My aim has been to make a new control type to sit in the corner of a map, where buttons could be programmatically added and removed by a script (which would set their icon url and text), and callback functions added to click events on those buttons. I've managed to cobble together an example http://imgur.com/DBKXl

Questions:

• Is extending L.Control the best way to go about this?
  
• Do I then have to rebuild all of leaflet, or is it possible to just include my 'leaflet-control-buttons.js' file along with the cdn-served leaflet.js?
• Feature requests/ideas that I could include?

Cheers

[Mal]

I've been wondering about this too... Doesn't seem like you can extend
the base L.Control class with just the distribution code, though that
may be more due to some JavaScript ineptitude on my part. Based on
other examples I've seen I'm guessing you need to do a full build.

On Apr 29, 3:38 pm, Elliott <elliotthuns...@gmail.com> wrote:
> Hi all,
>
> I've been trying to extend leaflet's L.Control, much in the same way as
> control.layers, attribution, scale and zoom.
>
> My aim has been to make a new control type to sit in the corner of a map,
> where buttons could be programmatically added and removed by a script
> (which would set their icon url and text), and callback functions added to
> click events on those buttons. I've managed to cobble together an examplehttp://imgur.com/DBKXl
>
> Questions:
>

>    - Is extending L.Control the best way to go about this?
>    - Do I then have to rebuild all of leaflet, or is it possible to just

>    include my 'leaflet-control-buttons.js' file along with the cdn-served
>    leaflet.js?

>    - Feature requests/ideas that I could include?
>
> Cheers

[Elliott]

Sorry, I should have posted an update once I got it to work...

You can do this, but the best route (or at least the way I did it) is to use the master code from github, grab it and make sure you point at the correct js and css files. Add the leaflet.js file script tag before your own js class file's script tag (otherwise L.Control.extend won't exist), and you're fine. The inheritance of L.Control has changed a smidge, so that you can now extend L.Control, whereas previously L.Attribution (and zoom, etc) used to extend L.Class.

The bare bones of my class are:

L.Control.Button = L.Control.extend({
    options: {
        position: 'bottomleft'
    },
    initialize: function(options) {
        this._button = {};
        this.setButton(options);  //method of this class, not inherited
    },

    onAdd: function(map) {
        this._map = map;
        var container = L.DomUtil.create('div', 'leaflet-control-button');

        this._container = container;

        this._update();
        return this._container;
    },

    //etc, etc
});​ 

Let me know if I missed anything, or if there's a better way of doing this. I'd recommend looking through L.DomUtil to build up your little DOM structure, and L.DomEvent for events.

Elliott

[Mal]

Ah, thanks for the update! Guess I should start tracking the repo
instead of the release in the CDN...