ImageryLayer - client side pixel filter

Explore in the sandboxView live

This sample uses an instance of ImageryLayer to visualize global sea temperature.

The pixelFilter property is used in this sample to add a custom continuous color ramp to the pixels. The color is determined based on the temperature or the value of the pixel. To assign a color to the pixels, you must loop through all the pixels displayed in the view.

function colorize(pixelData) {
  if (pixelData === null || pixelData.pixelBlock === null || pixelData.pixelBlock.pixels === null) {

  // The pixelBlock stores the values of all pixels visible in the view
  pixelBlock = pixelData.pixelBlock;

  // Get the min and max values of the data in the current view
  minValue = pixelBlock.statistics[0].minValue;
  maxValue = pixelBlock.statistics[0].maxValue;

  // The pixels visible in the view
  var pixels = pixelBlock.pixels;

  // The number of pixels in the pixelBlock
  var numPixels = pixelBlock.width * pixelBlock.height;

  // Calculate the factor by which to determine the red and blue
  // values in the colorized version of the layer
  factor = 255.0 / (maxValue - minValue);

  // Get the pixels containing temperature values in the only band of the data
  var tempBand = pixels[0];

  // Create empty arrays for each of the RGB bands to set on the pixelBlock
  var rBand = [];
  var gBand = [];
  var bBand = [];

  // Loop through all the pixels in the view
  for (i = 0; i < numPixels; i++) {
    // Get the pixel value (the temperature) recorded at the pixel location
    var tempValue = tempBand[i];
    // Calculate the red value based on the factor
    var red = (tempValue - minValue) * factor;

    // Sets a color between blue (coldest) and red (warmest) in each band
    rBand[i] = red;
    gBand[i] = 0;
    bBand[i] = 255 - red;

  // Set the new pixel values on the pixelBlock
  pixelData.pixelBlock.pixels = [rBand, gBand, bBand];
  pixelData.pixelBlock.pixelType = "U8"; // U8 is used for color

var layer = new ImageryLayer({
  url: url,
  pixelFilter: colorize,
  mosaicRule: mr

Since the image service has multidimensional information, you can set the multidimensionalDefinition property in the MosaicRule object to apply a pixelFilter based on water temperature at a specific water depth and time.