Transparency on wms
FernetB opened this issue · 10 comments
Hi, first thanks for this awesome library!
Well, the problem right know is that transparency is no longer working
I guess that is for some sort of change in the sentinel api, they say that we need to migrate to v3
I don't know if that's the problem, but i can't do that with this library.
Do u know what could be happening?
Cheers!
PD: here's my post in the sentinel forum https://forum.sentinel-hub.com/t/transparency-is-not-working/2942
Hi @FernetB, glad you find it useful!
Since you mention that this has happened recently, it is possible that it is connected to a recent change to the service, where TRANSPARENCY and BGCOLOR parameters in OGC have been removed.
If you were previously returning 3 values and setting those parameters, you now have to return 4 values (red, green, blue and transparency). The usual fourth value is dataMask. Please see the examples.
If this doesn't help, can you maybe share a bit more details about how you fetch your images?
Thanks for the fast response!
I was using this:
const getMapParams = {
transparent: true,
geometry: {
type: "Polygon" as "Polygon",
coordinates,
},
bbox,
fromTime: null,
toTime: date,
width: 512,
height: 512,
format: MimeTypes.PNG,
};
// layer is created with WmsLayer class
const blob = await layer.getMap(getMapParams, ApiType.WMS);
How can i applied that to this?
This looks OK (though you can remove transparent now if you wish - it has no impact).
What you need to change is the layer itself. Since you are using WmsLayer, I am assuming that the layer's data processing script is defined in the Sentinel Hub Dashboard.
The process is as follows:
- log into Sentinel Hub Dashboard
- select the appropriate configuration (click on its name)
- for the layer you are using, expand its details (click on down arrow)
- edit "Data processing" script:
- click on the pencil next to it
- in the right column, you should have your custom script / "evalscript"
- change it according to the examples
Hope it helps, let us know if we can help further.
Hey, thanks for helping me out!
I have this
//VERSION=3
let viz = ColorMapVisualizer.createDefaultColorMap();
function evaluatePixel(samples) {
let val = index(samples.B08, samples.B04);
val = viz.process(val);
val.push(samples.dataMask);
return val;
}
function setup() {
return {
input: [{
bands: [
"B04",
"B08",
"dataMask"
]
}],
output: {
bands: 4
}
}
}
I don't understand what is happening here because I didn't do this scripts but now i have to solve it.
Maybe I have to add let val = index(samples.B08, samples.B04, samples.dataMask); ?
PD: The source is Sentinel-2-L1C
No problem, glad to help.
There is no need to change this script, it is correct (it was probably automatically converted). I checked the correctness by creating my own layer and it correctly shows transparency both for Process API and OGC WMS requests.
Are you sure you are not getting transparent images? Note that you need to open the result in an image app which shows transparency; browsers usually show just some color (instead of checked background).
For example, if you replace instance ID and layer ID in the following request, you should be able to download an image with two stripes (orbits) and transparency elsewhere:
https://services.sentinel-hub.com/ogc/wms/<INSTANCE_ID>?layers=<YOUR_LAYER_ID>&request=GetMap&crs=CRS:84&bbox=8.773384,37.116526,18.816963,44.879228&width=512&height=496&format=image/png&time=2020-11-25/2020-11-27&preview=2
Can you maybe check that this works for you?
Note that the format is image/png, as JPEG does not support transparency.
I was seeing the wrong instance ID.
The real script was
var bRatio = (B02 - 0.175) / (0.39 - 0.175);
var NGDR = (B02 - B03) / (B02 + B03);
var ndwi = (B08-B11)/(B08+B11);
var ndvi = (B08-B04)/(B08+B04);
var gain = 7;
var threshold_ndwi = 0.005;
var threshold_ndvi = 0.4;
var nubes = [136/255, 136/255, 136/255];
var agua = [0,0,1];
if (B11>0.3 && bRatio > 1) {
return nubes;
}
if (B11 > 0.1 && bRatio > -0.1 && NGDR>0) {
return nubes;
}
if (ndwi > threshold_ndwi && ndvi<threshold_ndvi) {
return colorBlend(Math.pow(ndwi,0.25), [0,1], [[1,1,1],agua]);
}
return colorBlend(ndvi,
[ 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9],
[[87/255,0,0/255],
[200/255,0/255,0/255],
[255/255,92/255,0/255],
[255/255,174/255,0/255],
[255/255,247/255,0/255],
[255/255,255/255,0/255],
[208/255,255/255,0/255],
[94/255,218/255,0/255],
[0/255,179/255,0/255],
[0/255,64/255,0/255]
]);
We that script we see this.
Yes, this script returns just three values (red, green and blue) and does not set the fourth one (transparency).
The most simple way to fix it is to wrap the whole code in a function, get the result, and append dataMask value to it. In other words, this code works:
var bRatio = (B02 - 0.175) / (0.39 - 0.175);
var NGDR = (B02 - B03) / (B02 + B03);
var ndwi = (B08-B11)/(B08+B11);
var ndvi = (B08-B04)/(B08+B04);
var gain = 7;
var threshold_ndwi = 0.005;
var threshold_ndvi = 0.4;
var nubes = [136/255, 136/255, 136/255];
var agua = [0,0,1];
function getRGBValues() {
if (B11>0.3 && bRatio > 1) {
return nubes;
}
if (B11 > 0.1 && bRatio > -0.1 && NGDR>0) {
return nubes;
}
if (ndwi > threshold_ndwi && ndvi<threshold_ndvi) {
return colorBlend(Math.pow(ndwi,0.25), [0,1], [[1,1,1],agua]);
}
return colorBlend(ndvi,
[ 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9],
[[87/255,0,0/255],
[200/255,0/255,0/255],
[255/255,92/255,0/255],
[255/255,174/255,0/255],
[255/255,247/255,0/255],
[255/255,255/255,0/255],
[208/255,255/255,0/255],
[94/255,218/255,0/255],
[0/255,179/255,0/255],
[0/255,64/255,0/255]
]);
}
const rgbValues = getRGBValues();
rgbValues.push(dataMask);
return rgbValues;You are greater than Maradona. Love you so much! @sinergise-anze
You are the best man, works like a charm!
Thank you so much!!
Happy to help! 😊