Leaflet.incrementerControl

incrementer-control.css

a[disabled], a[disabled]:hover {
  pointer-events: none;
  cursor: default;
  /* display: none; */
}

incrementer-control.js

L.Control.Incrementer = L.Control.extend({
    onAdd: function(map) {
        var self = this;
        let cnt = document.createElement('div');
        L.DomEvent.disableClickPropagation(cnt);
        cnt.classList.add('leaflet-bar');
        cnt.classList.add('leaflet-control');
        if ( self.customClass ) cnt.classList.add(self.customClass);

        let plus = document.createElement('a');
        let minus = document.createElement('a');

        plus.classList.add('leaflet-control-zoom');
        minus.classList.add('leaflet-control-zoom');

        plus.setAttribute('role', 'button');
        minus.setAttribute('role', 'button');

        plus.appendChild(self.plusNode||document.createTextNode('+1'));
        minus.appendChild(self.minusNode||document.createTextNode('-1'));

        self.plusDisable = function () {
            plus.setAttribute('disabled', true);
            plus.classList.add('leaflet-disabled');
        };
        self.plusEnable = function () {
            plus.removeAttribute('disabled');
            plus.classList.remove('leaflet-disabled');
        };
        self.minusDisable = function () {
            minus.setAttribute('disabled', true);
            minus.classList.add('leaflet-disabled');
        };
        self.minusEnable = function () {
            minus.removeAttribute('disabled');
            minus.classList.remove('leaflet-disabled');
        };
        self.disable = function () {
            self.plusDisable();
            self.minusDisable()
        };
        self.enable = function (force) {
            if ( force ) {
                self.plusEnable();
                self.minusEnable();
            };
            if ( self.value > self.start ) {
                self.minusEnable();
            };
            if ( self.value < self.end ) {
                self.plusEnable();
            };
        };

        plus.ondblclick = function (event) {
            event.stopPropagation();
            return false;
        };
        minus.ondblclick = function (event) {
            event.stopPropagation();
            return false;
        };

        L.DomEvent.on(plus, 'click', function () {
            self.inc();
            if ( self.value==self.end ) {
                self.plusDisable();
            } else if ( minus.hasAttribute('disabled') ) {
                self.minusEnable();
            }
            self.callback(self);
        });
        L.DomEvent.on(minus, 'click', function () {
            self.dec();
            if ( self.value==self.start ) {
                self.minusDisable();
            } else if ( plus.hasAttribute('disabled') ) {
                self.plusEnable();
            }
            self.callback(self);
        });

        if ( self.step>0 ) {
            cnt.appendChild(plus);
            cnt.appendChild(minus);
        } else {
            cnt.appendChild(minus);
            cnt.appendChild(plus);
        };

        return cnt;
    },

    onRemove: function(map) {
        // Nothing to do here
    }
});

L.control.incrementer = function(opts_, opts) {
    let ctrl = new L.Control.Incrementer(opts);
    let incOpts = opts_||{};

    ctrl.customClass = incOpts.customClass;

    ctrl.plusNode = incOpts.plus;
    ctrl.minusNode = incOpts.minus;

    ctrl.value = incOpts.value ? incOpts.value : 5;

    [ctrl.start, ctrl.end] = [incOpts.start||0, incOpts.end||10].sort((a, b) => a-b);

    ctrl.step = incOpts.step ? incOpts.step : 1;
    ctrl.inc = ()=>{ctrl.value+=Math.abs(ctrl.step)};
    ctrl.dec = ()=>{ctrl.value-=Math.abs(ctrl.step)};
    ctrl.callback = incOpts.callback ? incOpts.callback : ((me)=>{console.log(ctrl)});

    return ctrl;
}

// L.control.watermark({ position: 'bottomleft' }).addTo(map);