[GIS] Make WMS layer background transparent in Leaflet

leafletqgistransparencywms

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

Screenshot of the 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?

Best 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).

enter image description here

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

enter image description here

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:

enter image description here

Related Question