6

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?

3
  • Have you tried to convert the file to an 8bit image before publishing it in geoserver?
    – user39853
    Oct 29, 2014 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, 2015 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, 2017 at 13:07

2 Answers 2

5

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

2

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'       
});
2
  • isn't that the same code that the OP said wasn't working for them?
    – nmtoken
    Nov 19, 2020 at 16:09
  • the order is different Dec 11, 2020 at 11:07

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.