Intro to ImageryTileLayer

Explore in the sandboxView live

This sample shows how to add an instance of ImageryTileLayer to a Map in a MapView. The ImageryTileLayer in this sample contains tiled elevation data for Mt. Baldy, CA in UTM zone 11 projection. The layer is reprojected on the fly to match the spatial reference of the view, which is Web Mercator in this case.

      
// create a ImageryTileLayer from tiled elevation service
var layer = new ImageryTileLayer({
  url:
    "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Elevation/MtBaldy_Elevation/ImageServer",
  opacity: 0.9
});

The sample also shows how to leverage client-side rendering by changing the RasterStretchRenderer of the layer.The user can update the RasterStretchRenderer parameters at runtime and see the changes immediately. To change the renderer properties, you must first clone the renderer, then change the property, and then set the new renderer back on the layer. The updateRenderer function in the sample is called whenever the user changes the renderer properties by interacting with the user interface.

                                 
// This function is called when the layer view is loaded
// or when user changes the renderer settings from the UI
function updateRenderer() {
  // clone the layer renderer
  // layer's renderer needs to be cloned if it changes at runtime
  var renderer = layer.renderer.clone();
  renderer.colorRamp = colorRamp;
  var bandStat = layer.rasterInfo.statistics[0];
  renderer.stretchType = stretchType;
  switch (stretchType) {
    case "min-max":
      renderer.statistics = [
        {
          min: valueSlider.values[0],
          max: valueSlider.values[1],
          avg: bandStat.avg,
          stdev: bandStat.stddev
        }
      ];
      break;
    case "standard-deviation":
      renderer.numberOfStandardDeviations = valueSlider.values[0];
      renderer.statistics = [bandStat];
      break;
    case "percent-clip":
      renderer.minPercent = valueSlider.values[0];
      renderer.maxPercent = valueSlider.values[0];
      break;
  }
  // apply the cloned renderer back to the layer's renderer
  // changes will be immediate
  layer.renderer = renderer;
}