Is it possible to create a map layout in the Google Earth Engine?

For example, I would like to create a layout that contains several images on one page. Below is what I would like to see in the layout.

enter image description here


1 Answer 1


Here's an example of creating a grid out of ui.Thumbnail widgets. These are non-interactive, simple single images that look like you showed; it'd also be possible to use ui.Maps instead if you wanted.

I built this by heavily editing the “Airstrip Thumbnails” example available in the Code Editor; replacing its previous/next buttons with a grid layout.


var box = ee.Geometry.Polygon([[
 [-62.955, 2.433], [-62.830, 2.433],
 [-62.830, 2.559], [-62.955, 2.559]]]);

function makeGridCell(image, caption) {
  var thumbnail = ui.Thumbnail({
    image: image,
    params: {
      bands: ['B3', 'B2', 'B1'],
      min: 0,
      max: 1200,
      gamma: [1.1, 1.1, 1],
      dimensions: '256x256',
      region: box,
    style: {margin: '0.5em 0.5em 0.1em 0.5em'}
  var imagePanel = ui.Panel([thumbnail]);
  var captionLabel = ui.Label({
    value: caption,
    style: {margin: '0 0.5em 0.5em 0.5em'},
  var mainPanel = ui.Panel({
    widgets: [imagePanel, captionLabel],
  return mainPanel;

function makeGridFromCollection(columnCount, imageCollection) {
  var gridPanel = ui.Panel({layout: ui.Panel.Layout.flow('vertical')});
  // Fetch the collection to find out how many images it has, what to label the cells,
  // and what the collection IDs are.
  imageCollection.toList(30 /* maximum count */).evaluate(function (imageCollectionInfo) {
    // Loop over rows and then columns, filling out the grid with images.
    var imageIndex = 0;
    while (imageIndex < imageCollectionInfo.length) {
      // Construct a panel to serve as one row of the grid.
      var row = ui.Panel({layout: ui.Panel.Layout.flow('horizontal')});
      // Fill the row with images, until it is full or there are no images.
      while (imageIndex < imageCollectionInfo.length && row.widgets().length() < columnCount) {
        // evaluate() gave us JSON data but we need an `ee.Image`; 
        // find it by matching the system:index (which is guaranteed to be present).
        var imageInfo = imageCollectionInfo[imageIndex];
        var imageObject = imageCollection
        // Add the image and its caption.
        row.add(makeGridCell(imageObject, imageInfo.properties['SENSING_TIME']));
        // Advance to the next image in the collection
        imageIndex += 1;
  // Note: this panel is returned *before* it is filled by the evaluate().
  return gridPanel;   

var images = ee.ImageCollection('LANDSAT/LT05/C01/T1_SR')
    .filterDate('1984-01-01', '1987-08-01');
ui.root.add(makeGridFromCollection(4, images));


  • Thank you Kevin; Can you please let me know how to save the thumbnails and download them? Apr 24, 2022 at 12:57
  • @YasirAl-husseinawi You can use ee.data.getThumbId followed by makeThumbUrl to download the same image that ui.Thumbnail produces. If you want a single image containing the entire thumbnail layout — EE doesn't have a feature to do that, and while it's possible to build as if it were a geographic image using extensive reprojection tricks, that's not my expertise.
    – Kevin Reid
    Apr 24, 2022 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.