Different mask output from Dashboard preview to playground?

Hi I am very new to SentinelHub, great tool for quick satellite data visualization!

I tried to build an example using Sentinel-3 OLCI, but notice I received different map mask views from the “Dashboard–>Preview” and Playground. The script I used to build the customized band at the end of this post.

Screenshots of my different outputs:

top: in “Dashboard—Band preview” (correctly mask land and unrelated water)

bottom: the same band in “Playground” (incorrect, all background is black)

the script I used for the band configuration is:

    //VERSION=3

//based on the sentinel-3 OLCI template

function setup() {

  return {

    input: r{

      bands: "B10", "B11", "B12", "dataMask"],

      units: "REFLECTANCE" // default value

    }],

    output: {

      id: "default",

      bands: 4,

      sampleType: "AUTO"

    }

  }

}

var cm=new ColorMapVisualizer(o

u0, z0,	0,	0     ]],

00.1, 0.2,	0,	0.8     ]],

85,  0,	1,	0.937254902  ]],

410, 0,	1,	0.466666667  ]],

615, 0.188235294,	1	,0]],

,20,,1,	0.92156862,	0    ]],

	25, 1,	0.37254902,	0    ]],

	30, 0.843137255,	0,	0]],

,35,	0.68627451,	0,	0]],

,40,	0.450980392,	0,	0]]

  ]);



function evaluatePixel(sample) {

    var idx= sample.B11-sample.B10-(709-681)/(751-681)*(sample.B12-sample.B10);

    var chl = 1457 * idx+ 2.895;

  	val=cm.process(chl);

    val.push(sample.dataMask *(chl > 0) );  //add the 4th channel

    return val

  }

Page 1 / 1

Could you try the same in EO-Browser? https://sentinelshare.page.link/Pk9W

The playground is a bit outdated, and AFAIK it is requesting JPEG images, and not PNGs.

hi batic. thank you for the comment! Yes it works very well within EO-Browser! but in that case, how could I get the leaflet script that I can embed into a webpage?

also, the link you provided (https://sentinelshare.page.link/Pk9W) seems blocked in our organization…

Chui,

Hey.

Playground displays transparent pixels as black because it requests images in JPEG format, which does not support transparency. You can still copy the embed code from Playground, just make sure to add format: "image/png" to the parameters for the leaflet layer. Then, this code should request images in PNG format, which supports transparency. The parameters for the leaflet layer should look something like the example below.

Small note: Some parameters for leaflet layer are not needed outside of Playground (added a comment in the example below).

let sentinelHub = L.tileLayer.wms(baseUrl, {

  tileSize: 512,

  attribution: '&copy; <a href="http://www.sentinel-hub.com/" target="_blank">Sentinel Hub</a>',

  urlProcessingApi:"some-url", // not needed outside of Playground

  maxcc:"20", 

  minZoom:6, 

  maxZoom:16, 

  preset:"LAYER_NAME", // not needed outside of Playground

  layers:"LAYER_NAME", 

  time:"selected-timespan", 

  format: "image/png", // explicitly set the format of the requested images

});

Unshortened link from @batic seems to be: Sentinel Hub EO Browser

Hello z.cern,

Brilliant!

I was thinking about the output image should not support alpha channel which causing the black background issue, but did not know how to control it. this fixes my issue!

also thank you for the comments on the unneeded parameters in leaflet.

Yes the link you provide open very well . did not realize SentinelHub can make troubleshooting much easier on the same platform without local environment.