Page Summary
-
ui.Thumbnail generates a fixed-size thumbnail image asynchronously from an ee.Image.
-
The
ui.Thumbnailfunction takesimage,params,onClick, andstyleas optional arguments and returns a ui.Thumbnail object. -
The
imageargument specifies the ee.Image for the thumbnail, defaulting to an empty image if not provided. -
The
paramsargument allows setting parameters for the thumbnail, as described inui.Thumbnail.setParams(). -
The
onClickargument is a callback function executed when the thumbnail is clicked, andstyleallows applying CSS styles to the thumbnail.
| Usage | Returns |
|---|---|
ui.Thumbnail( image
, params
, onClick
, style
)
|
ui.Thumbnail |
| Argument | Type | Details |
|---|---|---|
image
|
Image, optional | The ee.Image from which to generate the thumbnail. Defaults to an empty ee.Image. |
params
|
Object, optional | For an explanation of the possible parameters, see ui.Thumbnail.setParams(). Defaults to an empty object. |
onClick
|
Function, optional | A callback fired when the thumbnail is clicked. |
style
|
Object, optional | An 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 }));
