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?

  • Have you tried to convert the file to an 8bit image before publishing it in geoserver? – user39853 Oct 29 '14 at 7:04
  • 1
    I was having the same issue. However, to correct the white bounding box issue without changing my data or service, I added the WMS service through the 'Browser' and NO white bound box appeared. If the service is added through the 'Manage Layers' side bar on the left the same service will have a white bounding box. – a1234 Apr 16 '15 at 15:09
  • 1
    @a1234 thanks for that hint. Adding WMS layers through browser panel works much, much better than adding them through the left shortcut panel. This seems to be a bug, still in 2.18.3, as I cannot change image format to png. – ulrich Mar 7 '17 at 13:07

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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