What's the best way to add Sentinel imagery into web app (created with arcgis sdk js)?

Badge +1

I’m trying to add imagery to a map element created with arcgis sdk for js 4.X. My plan is to consume the OGC API from sentinel hub and pass the “geometry” custom parameter combined with format: image/png (so the image is transparent outside my aoi). i’m using WMTS layer, below is part of my code:


import WMTSLayer from "@arcgis/core/layers/WMTSLayer.js";
const map = new Map({
      basemap: "osm",

async addWmtsLayer() {

    const coordinates = //WKT POLYGON string
    const layer = new WMTSLayer({
      url: "", // url to the service
      activeLayer: {
        id: FALSE-COLOR,
      customParameters: {
        GEOMETRY: coordinates
        CRS: "CRS:84",
        TIME: "2024-01-28/2024-06-28",
        FORMAT: "image/png",
      visible: false,
    await layer.load();

The above code works but I’m getting an strange behavior, whenever I add the wmts layer, the requested image appears inside my aoi but the map gets full of “blank tiles”

blank tiles on map element when the wtms layer is added
it looks like tiles with no information are being added, overlaying the basemap. if i  remove the WMTS layer the map goes back to normal.

Is there something wrong with my logic or with my request?
Is there a better way to add sentinel imagery for specific aoi ? I was thinking on maybe getting the blob of the image using processing api and add it to the map in some way.

Thanks in advance.

Best answer by matt.ballard 8 July 2024, 17:03

View original

2 replies

Userlevel 3
Badge +4

Hey @daniel1uno, can you try adding an additional custom parameter: "transparent": "true".  This should turn white tiles where no data is present to transparent.

Badge +1

Thanks @matt.ballard , that did the trick. Everything works as expected now.


Planet Monitoring

© 2024 Planet Labs PBC. All rights reserved.
| Privacy Policy | California Privacy Notice | California Do Not Sell
Your Privacy Choices | Cookie Notice | Terms of Use