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>

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

  • Does selecting the new style generate a new GetMap request?
    – nmtoken
    Sep 6, 2017 at 8:43
  • probably not ...
    – pLumo
    Sep 6, 2017 at 8:50
  • 1
    WMS style is applied on the server, not in the client, though...
    – nmtoken
    Sep 6, 2017 at 8:53
  • I know that ... But I can change the style with the GetMap request in the URL with "STYLE=[...]". So yes, there should be a new GetMap request when I change the Style, but how can I achieve that ?
    – pLumo
    Sep 6, 2017 at 9:07

1 Answer 1


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>
  • Thanks so much for posting this - finding it has just saved me a lot of time and hassle.
    – Jamie
    Dec 15, 2020 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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