I´m stucked creating a new Leaflet custom control

Question

I´ve read the Leaflet doc and some online tutorials but nothing works for me.

I´m looking to add a new single button under the Leaflet zoom control (topleft) but can´t find the way to add it.

I´ve tried something like this:

    var control = L.Control.Button = L.Control.extend({
                options: {
                    position: 'topleft'
                },
                onAdd: function(map) {
                    this._map = map;
                    var container = L.DomUtil.create("div", "leaflet-control-button");
                    this._container = container;
                    return this._container;
                },
                onRemove: function(map) {},
    
            });

control.addTo(map);

The button function is show some data that I´ve get from an API (I almost have ready the function).

Please, someone help me, I would appreciate it so much!

Answer 1

You are on the right way. Add the leaflet control css class to the container, so it is correct displayed leaflet-bar leaflet-control

L.Control.Button = L.Control.extend({
    options: {
        position: 'topleft'
    },
    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
        var button = L.DomUtil.create('a', 'leaflet-control-button', container);
        L.DomEvent.disableClickPropagation(button);
        L.DomEvent.on(button, 'click', function(){
            console.log('click');
        });

        container.title = "Title";

        return container;
    },
    onRemove: function(map) {},
});
var control = new L.Control.Button()
control.addTo(map);