Dynamic layer data processing from web application

What I need to know is the way of using EVALSCRIPT parameter in the WMTS URL. How can I include the following evalscript into the URL?

//VERSION=3

function evaluatePixel(samples) {
let val = index(samples.B08, samples.B04);
return [val, samples.dataMask];
}

function setup() {
return {
input: [{
bands: [
“B04”,
“B08”,
“dataMask”
]
}],
output: {
bands: 2
}
}
}

Time span (start and end date) that is used for data processing can be passed to WMTS service using TIME parameter.
The actual implementation in the web application (e.g. opening a calendar widget, choosing a date and adding it to WMTS end-point) is up to the developer.

You might also want to look into our JS library, which integrates many of these functionalities:

GitHub - sentinel-hub/sentinelhub-js: Download and process satellite imagery...

Download and process satellite imagery in JavaScript or TypeScript using Sentinel Hub services. - GitHub - sentinel-hub/sentinelhub-js: Download and process satellite imagery in JavaScript or TypeS...

EO Browser uses it, for example. And talking about EO Browser, it is open-source, so you can take parts of the code you want and re-use it:

GitHub - sentinel-hub/EOBrowser: The Earth Observation Browser is a search...

The Earth Observation Browser is a search tool for Sentinel-1, -2, -3, Landsat 5, 7, 8, Modis and Envisat satellite imagery - GitHub - sentinel-hub/EOBrowser: The Earth Observation Browser is a sea...

Hi,

We are not using OpenLayers and do not have much experience in its use.

However, it could be worth trying to edit line 48 to 75 of this example and try to replace TileWMS in line 51 with the WMTS equivalent and adjust the URL.

Also, using the params property looks like the way to go! You can find the documentation on it here.

Hope that helps you as a start!

Cheers

Hi,
Thank you. This is a perfect help.
One more question on EVALSCRIPT is how I can request tiles with this parameter by using OpenLayers. I usually work with this way but it is difficult to find the way to attach EVALSCRIPT. No properties for this could be found on the API document.

openlayers.org

OpenLayers v6.4.3 API - Module: ol/source/WMTS

Hi,

The Evalscript needs to be BASE64-encoded if you want to pass it to the additional request parameter EVALSCRIPT in the request URL. You can convert your evalscript on a website like this one.

Then you just pass it to the EVALSCRIPT parameter in your URL and it should work. See this example that I edited from the OGC API examples on our website:

http://services.sentinel-hub.com/ogc/wmts/{INSTANCE_ID}?REQUEST=GetTile&BBOX=3238005,5039853,3244050,5045897&RESOLUTION=10&TILEMATRIXSET=PopularWebMercator512&LAYER=TRUE_COLOR&MAXCC=20&TILEMATRIX=14&TILEROW=3065&TILECOL=4758&TIME=2018-03-29/2018-05-29&EVALSCRIPT=Ly9WRVJTSU9OPTMKCmZ1bmN0aW9uIGV2YWx1YXRlUGl4ZWwoc2FtcGxlcykgewpsZXQgdmFsID0gaW5kZXgoc2FtcGxlcy5CMDgsIHNhbXBsZXMuQjA0KTsKcmV0dXJuIFt2YWwsIHNhbXBsZXMuZGF0YU1hc2tdOwp9CgpmdW5jdGlvbiBzZXR1cCgpIHsKcmV0dXJuIHsKaW5wdXQ6IFt7CmJhbmRzOiBbCiJCMDQiLAoiQjA4IiwKImRhdGFNYXNrIgpdCn1dLApvdXRwdXQ6IHsKYmFuZHM6IDIKfQp9Cn0=

Note: You still need to specify the LAYER parameter because the layer in your collection actually defines the data source (e.g. Sentinel-2 L1C) you are requesting data from. The EVALSCRIPT parameter in the URL is prioritised and will be displayed, not the one from the layer.

If you don’t really need to define the Evalscript in your request URL, you can easily create a configuration in your dashboard and configure a layer with your evalscript as described here.

Cheers

Hey,

I scrambled around the internet a bit and compiled a simple example. I extended the WMTS class to accommodate the additional time and evalscript parameters and created a simple way to change them both. I included a readme for easier start.

My example on Github

Hope it helps somewhat.

Good luck