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!

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!

• javascript
• leaflet

2 Answers 2

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);

For "leaflet": "^1.9.4", I've used this code, for adding button:

 const customButton = L.control({ position: 'topleft' });
 customButton.onAdd = () => {
    const buttonDiv = L.DomUtil.create('div', 'button-wrapper');

    buttonDiv.innerHTML = `<button>Custom Button</button>`;
    buttonDiv.addEventListener('click', () => console.log('click'))
    return buttonDiv;
};
customButton.addTo(map)