[GIS] Changing Style of WMS dynamically in Leaflet

leafletwms

I have a Leaflet WMS Layer

layer = new L.tileLayer.wms('https://{s}.url.com/wms?', {
    layers: 'Workspace:Layer',
    format: 'image/png',
    version: '1.3.0',
    transparent: true,
    styles: 'style1',
});

If I choose 'style2', it works as expected, but I want to change it dynamically with a select box.
I tried the following but it does not work:

<select id="styles">
    <option selected="selected" onselect="layer.styles='style1';">Style1</option>
    <option onselect="layer.styles='style2';">Style2</option>
</select>

I also tried with layer.options.styles=''

Best Answer

I found a solution:

From Leaflet reference:

setParams: Merges an object with the new parameters and re-requests tiles on the current screen (unless noRedraw was set to true).

So the following works:

<select id="styles" onchange="layer.setParams({styles: this.value});">
    <option selected="selected"  value="style1">Style 1</option>
    <option value="style2">Style 2</option>
</select>
Related Question