Make WMS layer background transparent in Leaflet

Question

I have inserted the following layer from a GeoServer WMS in the following Leaflet map

:

var nexrad = new L.TileLayer.WMS("URL", {
    layers: 'Wrecks:WrecksGreaterNorthSea',
    format: 'image/png',
    transparent: true
});

but the background is not transparent. I have tried to set it by modifying the tiff image with QGIS creating a transparency band but it does not work. I have a second WMS layer in the map but I do not have this problem with this one.

Could you help me solve this issue, please?

doublebyte · Answer

The problem is not in the code, but on the image itself. The Geotiff has 3 bands, and the nodata value is set to 0

Band 1 Block=508x8 Type=Byte, ColorInterp=Red   NoData Value=0Band 2
  Block=508x8 Type=Byte, ColorInterp=Green   NoData Value=0 Band 3
  Block=508x8 Type=Byte, ColorInterp=Blue   NoData Value=0

However inspecting the image in QGIS, it seems that the background has the values of 255,255,255 (white).

The Geotiff has no way of "knowing" these values represent a "no value", unless you tell it. You can set the no-value to 255, either using GDAL or the GDAL wrapper inside QGIS (Raster->Conversion->Translate). Something like this:

gdal_translate -a_nodata 255
  WrecksGreaterNorthSea.tif output.tif

The resultant image will effectively show a transparent background where there is no data

I have no way of testing if the rendered image works in Geoserver, but here is an example using the L.ImageOverlay directive, where transparency works out of the box:

MickyInTheSky · Answer

I have had the same problem.
After some tests this code works for me:
var nexrad = new L.TileLayer.WMS("URL", {
    layers: 'Wrecks:WrecksGreaterNorthSea',
    transparent: true,
    format: 'image/png'       
});

Make WMS layer background transparent in Leaflet

2 Answers

Add your own answers!

Ask a Question