Passing multiple arguments to callback function in Leaflet layer method bindTooltip()

Question

I have a few GeoJSON layers on a Leaflet map that I am using the bindTooltip method on. Specifically, I am trying to use a function as the argument to bindTooltip so that I can produce some custom html for each of my tooltips.

The documentation on this method states : "Binds a tooltip to the layer with the passed content and sets up the necessary event listeners. If a Function is passed it will receive the layer as the first argument and should return a String or HTMLElement."

For example:

function simpleTooltip(layer){
    return 'simple tooltip';
}
geojsonLayer.bindTooltip(simpletooltip);

returns 'simple tooltip' as a tooltip for each feature of my GeoJSON layer as expected.

But, if I want to pass another variable to simpleTooltip with the following syntax:

function simpleTooltip(layer, name){
    return 'simple tooltip'+ name;
}
geojsonLayer.bindTooltip(simpletooltip(layer, "steve" );

I get no tooltips and the rest of my <script> doesn't run.

I'm assuming that I'm having these errors because bindTooltip is expecting to receive the name of a function and not the return value of the callback function (in this case simpleTooltip()).

Is it possible to make the callback function be a function of both the layer and an additional variable that helps customize the html(in my case)?

Maybe there is some way to overload or edit the bindTooltip() function to additionally accept a list of arguments to the callback function.

Using Leaflet 1.5.0

Answer 1

Since tooltip content function has only one predefined argument, which is layer object, the simplest way to pass additional arguments to function is to 'misuse' layer object for that purpose by adding our own object properties with required values. Property name can be any as long as it does not interfere with standard layer properties.

In your case that would look something like:

function simpleTooltip(layer){
    return 'simple tooltip ' + layer._myProperty;
}

geojsonLayer._myProperty = 'steve'
geojsonLayer.bindTooltip(simpletooltip);

Another possibility would be to pass additional argument as bindTooltip custom option, which can have any name as long as it does not interfere with standard options:

function simpleTooltip(layer){
    return 'simple tooltip ' + this.options.myOption;
}

geojsonLayer.bindTooltip(simpletooltip, {myOption: 'steve'});