Map Layout in Google Earth Engine

Question

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.

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
          .filter(ee.Filter.equals(
            'system:index',
            imageInfo.properties['system:index']))
          .first();
        
        // Add the image and its caption.
        row.add(makeGridCell(imageObject, imageInfo.properties['SENSING_TIME']));
        
        // Advance to the next image in the collection
        imageIndex += 1;
      }
      gridPanel.add(row);
    }
   
  });
  
  // Note: this panel is returned *before* it is filled by the evaluate().
  return gridPanel;   
}

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

https://code.earthengine.google.com/738f46defbc9346d8cd5bd4d726307d3