ui.Thumbnail

  • ui.Thumbnail creates a fixed-size thumbnail image from an ee.Image asynchronously.

  • Thumbnail generation is customizable with parameters like dimensions, region, CRS, and format.

  • ui.Thumbnail allows for setting an onClick callback function and custom styles.

  • Backgrounds can be blended with the primary image for thumbnail visualizations.

  • The example demonstrates thumbnail creation for an elevation dataset with different background options.

A fixed-size thumbnail image generated asynchronously from an ee.Image.

UsageReturns
ui.Thumbnail(image, params, onClick, style)ui.Thumbnail
ArgumentTypeDetails
imageImage, optionalThe ee.Image from which to generate the thumbnail. Defaults to an empty ee.Image.
paramsObject, optionalFor an explanation of the possible parameters, see ui.Thumbnail.setParams(). Defaults to an empty object.
onClickFunction, optionalA callback fired when the thumbnail is clicked.
styleObject, optionalAn object of allowed CSS styles with their values to be set for this label. Defaults to an empty object.

Examples

Code Editor (JavaScript)

// The goal is to create a series of thumbnail images for an elevation dataset
// with different backgrounds. The background layers and image visualization
// are previewed in the Code Editor map before creating the thumbnails.

// Define a black background.
var blackBg = ee.Image.rgb(0, 0, 0)
  .visualize({min: 0, max: 255});
Map.addLayer(blackBg, {}, 'Black background');

// Define a water / land background.
var waterLandBg = ee.Image('NOAA/NGDC/ETOPO1').select('bedrock').gt(0.0)
  .visualize({palette: ['cadetblue', 'lightgray']});
Map.addLayer(waterLandBg, {}, 'Water / land background');

// A map display of a digital elevation model (DEM).
var image = ee.Image('AU/GA/DEM_1SEC/v10/DEM-S').select('elevation')
  .visualize({
     min: -10.0,
     max: 1300.0,
     palette: [
       '3ae237', 'b5e22e', 'd6e21f', 'fff705', 'ffd611', 'ffb613', 'ff8b13',
       'ff6e08', 'ff500d', 'ff0000', 'de0101', 'c21301', '0602ff', '235cb1',
       '307ef3', '269db1', '30c8e2', '32d3ef', '3be285', '3ff38f', '86e26f'
     ],
  });
Map.addLayer(image, {}, 'Elevation');

// Set the center of the map.
var lon = 133.95;
var lat = -24.69;
Map.setCenter(lon, lat, 4);

// Set the basic parameters for the thumbnail.
// Half-width of the thumbnail in degrees in EPSG:3857.
var delta = 22;
// Width and Height of the Thumbail image.
var pixels = 256;

var areaOfInterest = ee.Geometry.Rectangle(
  [lon - delta, lat - delta, lon + delta, lat + delta], null, false);

var parameters = {
  dimensions: [pixels, pixels],
  region: areaOfInterest,
  crs: 'EPSG:3857',
  format: 'png'};

// Create a thumbnail with no background fill.
// Masked pixels will be transparent.
print(ui.Thumbnail({image: image, params: parameters}));

// Use a black background to replace masked image pixels.
var imageWithBlackBg = blackBg.blend(image);
print(ui.Thumbnail({
  image: imageWithBlackBg, params: parameters}));

// Use the water / land background to replace masked image pixels.
var imageWithWaterLandBg = waterLandBg.blend(image);
print(ui.Thumbnail({
  image: imageWithWaterLandBg, params: parameters}));