This sample shows how to add an instance of ImageryTileLayer that references a Cloud Optimized GeoTiff file to a Map in a MapView. A Cloud Optimized GeoTiff (COG) file is a regular GeoTiff file that is hosted on CORS enabled HTTPS server.
The COG file in this sample contains Landsat 8 satellite imagery taken over Bolivia on July 19, 2019. The COG takes advantage of all the capabilities of ImageryTileLayer, since it can be added by setting the url property of the ImageryTileLayer to point to the url of the COG file.
const layer = new ImageryTileLayer({
url: "https://ss6imagery.arcgisonline.com/imagery_sample/landsat8/Bolivia_LC08_L1TP_001069_20190719_MS.tiff",
bandIds: [3,2,1]
});
The Landsat 8 satellite imagery consists of nine spectral bands. The sample allows users to change between common band combinations for the ImageryTileLayer by updating the bandIds property.
// change the common bandIds combination for the landsat 8 imagery
const bandIdsSelect = document.getElementById("bandIdsSelect");
bandIdsSelect.addEventListener("change", ()=>{
const bands = bandIdsSelect.value.split(",").map(Number);
layer.bandIds = bands;
});
Users can click on the ImageryTileLayer to calculate the NDVI value and create a spectral profile chart for the clicked location as shown in the code snippet below.
view.on("click", (event) => {
view.graphics.removeAll();
layer.identify(event.mapPoint).then((results)=>{
if (results.value) {
view.graphics.add(
new Graphic({
geometry: event.mapPoint,
symbol: {
type: "simple-marker",
color: "cyan",
}
})
);
// calculate the NDVI value for the clicked location on the image
const ndvi = (results.value[4] - results.value[3]) / (results.value[4] + results.value[3]);
document.getElementById("ndviValueDiv").innerHTML = `NDVI value: <b>${ndvi.toFixed(3)}</b>`;
// Update the spectral chart for the clicked location on the image
spectralChart.data.datasets[0].data = results.value;
spectralChart.update(0);
if (chartDiv.style.display === "none"){
chartDiv.style.display = "block";
}
}
});
});