Custom Control Example?

[Keith Turkowski]

I've updated to the latest master, and I'm trying to create a custom control... I've looked at several examples, but I can't quite figure it out.

I'm just trying to create a custom button in upper right corner that does an alert("Hello World"); when clicked.

So far I've got something like this...

L.Control.Hello = L.Control.extend({
options: {
position: 'topright'
},

onAdd: function (<what goes here??>) {

var className = 'leaflet-control-hello';
container = L.DomUtil.create('div', className);

var link = L.DomUtil.create('a', className + '-button', container);
link.href = '#';
link.title = 'Hello Button';

L.DomEvent.addListener(link, 'click', L.DomEvent.stopPropagation)
L.DomEvent.addListener(link, 'click', L.DomEvent.preventDefault)
L.DomEvent.addListener(link, 'click', alert('Hello World'), <what goes here??>);

return container;
}

});

....

map.addControl(new L.Control.Hello());

....

Any help would be appreciated, thanks!

[Elliott]

Hi,

I had some decent success...

Firstly, I recommend using the master source, rather than stable, as the control stuff has been refactored (for the better, unsurprisingly).

Feel free to look at my L.Control.Button: https://gist.github.com/2935327

Also take a look at the other controls in master.

OnAdd() is called when you use:

  var footButton = new L.Control.Button(footButtonOpts).addTo(map);

It is passed the map object to which your control is being added.

The third parameter passed to L.DomEvent.addListener is the context ('this' keyword) which you wish to have in the callback (second parameter).

Hope that helps!

Elliott

[Keith Turkowski]

Thanks, got it working the way I wanted... I basically ended up doing something along these lines...

HelloWorldControl = function(theHelloWorldFunction) {

    var control = new (L.Control.extend({
    options: { position: 'topright' },
    onAdd: function (map) {
        controlDiv = L.DomUtil.create('div', 'hello-world-button');
        L.DomEvent
            .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
            .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
            .addListener(controlDiv, 'click', this.HelloWorldFunction);

        // Set CSS for the control border
        var controlUI = L.DomUtil.create('div', 'hello-world-button-border', controlDiv);
        controlUI.title = 'Click for Hello World!';

        // Set CSS for the control interior
        var controlText = L.DomUtil.create('div', 'hello-world-button-interior', controlUI);
        controlText.innerHTML = 'Hello World';

        return controlDiv;
    }
    }));

    control.HelloWorldFunction = theHelloWorldFunction;

    return control;
};

....

HelloWorldFunction = function () { alert("Hello World");};

....


    this.leafletMap.addControl(HelloWorldControl(HelloWorldFunction));

[Dr. YSG]

Any pointers on how to setup the CSS?

[Dr. YSG]

I have a online demo in CodePen.io and the functional part is working, but I cannot match the styles of the Leaflet 0.5 or v 0.6 version controls. Any tips?

[Dr. YSG]

here is the url for the demo, feel free to fork and update:

http://codepen.io/DrYSG/pen/zJsiG