<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>ImageryTileLayer - raster function | Sample | ArcGIS Maps SDK for JavaScript</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1"></script>
<!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
<script type="module" src="https://js.arcgis.com/5.0/"></script>
<arcgis-map basemap="gray-vector">
<arcgis-zoom slot="top-left"></arcgis-zoom>
<calcite-card slot="top-right">
<div id="info-div" slot="heading">
<span id="instruction">Move the pointer over the image for more info.</span>
<div id="chart-div" slot="description" hidden>
<canvas id="spectral-chart" height="300"></canvas>
<div slot="footer-start">
<div id="ndvi-value-div" hidden>
<span>Processed NDVI value:</span>
<b id="ndvi-value-element"></b>
const [rasterFunctionConstants, ImageryTileLayer, Graphic, promiseUtils] =
"@arcgis/core/layers/support/rasterFunctionConstants.js",
"@arcgis/core/layers/ImageryTileLayer.js",
"@arcgis/core/Graphic.js",
"@arcgis/core/core/promiseUtils.js",
const viewElement = document.querySelector("arcgis-map");
const chartDiv = document.getElementById("chart-div");
const spectralCanvas = document.getElementById("spectral-chart");
const instructionElement = document.getElementById("instruction");
const ndviValueDiv = document.getElementById("ndvi-value-div");
const ndviValueElement = document.getElementById("ndvi-value-element");
await viewElement.componentOnReady();
"https://tiledimageservices.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Glacier_landsat_8/ImageServer";
const { NDVI3 } = rasterFunctionConstants.colormapName; // NDVI and NDVI2
// Create an NDVI raster function with output scaled to 0–255.
const ndviRasterFunction = {
scientificOutput: false, // True outputs values from -1 to 1.
// Apply a predefined color map to the NDVI raster function result.
functionName: "Colormap",
functionArguments: { colormapName: NDVI3, raster: ndviRasterFunction },
// Initialize the layer with the last autocast RasterFunction in the chain.
const layer = new ImageryTileLayer({ url, rasterFunction });
viewElement.map.add(layer);
await viewElement.whenLayerView(layer);
viewElement.goTo(layer.fullExtent);
const hideChartAndNdvi = (hide) => {
instructionElement.hidden = !hide;
ndviValueDiv.hidden = hide;
const debouncedUpdate = promiseUtils.debounce(async (x, y) => {
// Convert screen coords to map point.
const point = viewElement.toMap({ x, y });
// Get spectral values at the clicked location.
const results = await layer.identify(point);
// Update the spectral chart and NDVI based on spectral values.
spectralChart.data.datasets[0].data = results.value;
ndviValueElement.textContent = `${(results.processedValue - 100) / 100}`;
ndviValueElement.textContent = "";
const graphic = new Graphic({ symbol: { type: "simple-marker", color: "cyan" } });
viewElement.graphics.add(graphic);
viewElement.addEventListener("arcgisViewPointerMove", ({ detail: { x, y } }) => {
// Update the location of the marker graphic.
graphic.geometry = viewElement.toMap({ x, y });
debouncedUpdate(x, y).catch((error) => {
// Silently ignore expected abort errors coming from debounced calls.
if (!promiseUtils.isAbortError(error)) console.error(error);
// Create the spectral profile chart.
const visibleBandLabels = ["Coastal - 0.45", "Blue - 0.51", "Green - 0.59", "Red - 0.67"];
const infraredBandLabels = ["NIR - 0.88", "SWIR1 - 1.65", "SWIR2 - 2.229", "Cirrus - 1.38"];
spectralChart = new Chart(spectralCanvas, {
labels: [...visibleBandLabels, ...infraredBandLabels],
datasets: [{ borderColor: "rgb(75, 192, 192)", tension: 0.1 }],
y: { title: { display: true, text: "DN" }, min: 4500, max: 30000 },
x: { title: { display: true, text: "Band Ids - wavelength (micrometer)" } },
legend: { display: false },
title: { display: true, text: "Spectral profile" },