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: "https://services.sentinel-hub.com/ogc/wmts/myinstanceid?", // 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();
map.add(layer);
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”
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.
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.