2

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?

1
  • 1
    After fiddling a bit, it seems that by changing info.update = function (props,param1) {} to info.update = function (props,param1=null) {} the error will be supressed.
    – NettaB
    Jul 1 '17 at 10:01
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);
};
1

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

};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.