5

I want to use opacity on one of my WMS layers in Leaflet. The documentation has an opacity option for L.tileLayer but not explicitly for L.tileLayer.wms, I only see a transparent option (not supported for the WMS I want to use, I'm using a cascading WMS and it defaults to gif I think, I have not found a way how I can cascade it as a PNG). Does this mean that you can't use opacity only on L.tileLayer and not for L.tileLayer.wms?

This does not do anything:

var gemini = L.tileLayer.wms('rootUrl', {
    layers: 'myLayer',
    format: 'image/png',
    maxZoom: 21,
    opacity: 0.5;
});

2 Answers 2

6

The opacity option of L.TileLayer.WMS works as expected. See a working example.

If you check the documentation for Leaflet 1.0, you'll see that a L.TileLayer.WMS inherits options, methods and events from L.TileLayer and L.GridLayer.

4
  • Thank you for the verification that the L.TileLayer options also apply to L.TileLayer.WMS. Got it to work now =)
    – geogrow
    Nov 11, 2016 at 12:15
  • 1
    Actually, opacity is an option from L.GridLayer. L.TileLayer.WMS inherits from both L.TileLayer (e.g. crossOrigin option) and L.GridLayer (e.g. tileSize option). Nov 11, 2016 at 12:19
  • Oh yes you are right, I was looking in the documentation for 0.7. Just start to get hang of webmapping and js =)
    – geogrow
    Nov 11, 2016 at 12:22
  • Yeah, having the documentation make sense when there are lots of inheritances took a lot of work :-) Nov 11, 2016 at 12:52
6

Opacity does something else. It changes the transparency within the feature. However, if what you are trying to do is to hide the background or nodata info from your WMS, you need to set transparency together with the format. Leaving out one will not work.leaflet defaults to jpg so set format to png for it to work.

So your code should read:

var gemini = L.tileLayer.wms('rootUrl', {
    layers: 'myLayer',
    transparent: 'true'
    format: 'image/png',
    maxZoom: 21,
    opacity: 0.5;
});
1
  • 1
    Fixing a syntax error, many developers made some copy paste of this code and they does not understand why it doesnt work transparency: 'true' //wrong code transparent: 'true' //good code May 25, 2022 at 13:56

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.