3

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=''

4
  • 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

2 Answers 2

6

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>
2
  • 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
  • Can't find this method on Leaflet documentation. Is it deprecated?
    – smartmouse
    Feb 5 at 13:35
0

An alternative could be to handle it in the logic part of your application, instead of HTML side. You could use

Util.setOptions(<your_layer>, {})

Util comes from leaflet library; <your_layer> it the layer (in your case a WMS layer) you want to update; {} is the object that contains the properties you want to change.

Your Answer

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

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