Leaflet custom info control update with extra parameters

Question

I used custom info control to show information.The below code is working:

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); 
    this.update();
    return this._div;
};

info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);

and using info.update in highlightFeature and resetHighlight methods

function highlightFeature(e) {
    ...
    info.update(layer.feature.properties);
}

function resetHighlight(e) {
    ...
    info.update();
}

But I refactor the code and I separated the logic to different classes.So in info.update method,I should use some extra parameters.In this case,I easily can call with other parameters info.update in highlightFeature and resetHighlight methods.But in

info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info'); 
      //  this.update();
        return this._div;
    };

I did not use this.update(); in info.onAdd ,so 'Hover over a state' text does not display. When I use this.update() like that

info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info'); 
            this.update();
            return this._div;
        };

info.update = function (props,param1) {
.......
}

I got the error param1 is undefined.How to achieve this?Is there any way to call info.update with extra parameters in info.onAdd?

Answer 1

See this sample, based on yours (I tested, it works). Consider something, in any moment, calling createMyControl function and a global var called myControl to hold your control's object:

function createMyControl(data) {
    if (myControl) {
        myControl.createContent(data, false);
        return;
    }

    L.Control.MyControl = L.Control.extend({
            onAdd : function (map) {
                return this.createContent(data, true);
            },

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

            createContent : function (_data, create) {
                if (create) {
                    this._div = L.DomUtil.create('div', 'leaflet-bar my-control');
                }

                L.DomEvent.disableClickPropagation(this._div);

                var controlHeader = '<div class="my-control-header">' +
                    '<label>...</label>' +
                    '</div>';
                this._div.innerHTML = controlHeader + '<div>' + [...some stuff made with _data...] + '</div>';
                return this._div;
            }
        });

    L.control.myControl = function (opts) {
        return new L.Control.MyControl(opts);
    }

    myControl = L.control.MyControl({
            position : 'topright'
        });
    myControl.addTo(map);
};

Answer 2

You can achieve that with a function generator function.

Do the following,

instead of:

    info.update = function (props,param1) {
    .......
    }

you would do

info.update = function(param1, param2, ... ) {
    return function(props) {

        do whatever you need with param1, param2, etc. here;
        and all your code here;

    };

};

Or, you would be able to name your function generator function and use it

function myInfoUpdate(param1, param2, ... ) {
    return function(props) {

        do whatever you need with param1, param2, etc. here;
        and all your code here;

    };

};

info.update = myInfoUpdate(param1, param2, ... );

The same applies to any function(map)

info.onAdd = function (map) {
       this._div = L.DomUtil.create('div', 'info'); 
       this.update();
       return this._div;
};

or,

info.onAdd = function (customParams) {
    return function(map) {

           user customParams here;
    };

};