You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {i18n.unsupportedBrowser.chrome}
  • Firefox
  • Safari
  • undefined
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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) {
    return;
  }

  // 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.

Sample search results

TitleSample
Loading...