Intro to ImageryTileLayer | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to add an instance of ImageryTileLayer to a Map. The ImageryTileLayer in this sample contains world tiled elevation data. The destination-in composite blendMode is set on the layer. This blend mode masks the contents of the background layer (in this case the world imagery tile layer) where the contents of both layers overlap. Everything else is removed from the result. So the blended result shows the high elevation areas of the world.

      // Create and load the ImageryTileLayer for tiled elevation data.
      const imageryTileLayer = new ImageryTileLayer({
        url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
        blendMode: "destination-in", // Draw only where TileLayer and ImageryTileLayer overlap.
        title: "World Elevation ImageryTileLayer",
      });
      await imageryTileLayer.load();
      const bandStats = imageryTileLayer.serviceRasterInfo.statistics[0];

      // Create a base TileLayer for the imagery background.
      const tileLayerUrl =
        "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer";
      const tileLayer = new TileLayer({ url: tileLayerUrl, listMode: "hide-children" });

This layer is then added to a GroupLayer along with the World Imagery TileLayer to isolate the blending effects set on the ImageryTileLayer from the rest of the map.

      // Group elevation and imagery layers to confine blend mode effects to this group.
      const groupLayer = new GroupLayer({
        title: "Group Layer",
        layers: [tileLayer, imageryTileLayer],
      });

The sample also shows how to leverage client-side rendering by changing the parameters of the RasterStretchRenderer set on the imagery tile 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.

      const updateRenderer = () => {
        // Clone the layer's renderer to modify it at runtime.
        const renderer = imageryTileLayer.renderer.clone();
        const isMinMax = stretchType === "min-max";
        const [min, max] = isMinMax ? slider.value : [0, 0];

        // Configure the cloned renderer with the UI's settings.
        renderer.customStatistics = isMinMax ? [{ ...bandStats, min, max }] : [bandStats];
        renderer.numberOfStandardDeviations = isMinMax ? 1 : slider.value;
        renderer.stretchType = stretchType;
        imageryTileLayer.renderer = renderer; // Assign the new renderer.
      };