Add Legends and Title to your Map in GEE

Google Earth Engine is a cloud-based platform for planetary-scale geospatial analysis that brings Google’s massive computational capabilities to bear on a variety of high-impact societal issues including deforestation, drought, disaster, disease, food security, water management, climate monitoring and environmental protection.

Gorelick et al. (2017)

Although GEE doesn’t have a lot of flexibility in displaying your map, you could play around with the palette to make your map look attractive. I addition, you could add “Title” and “Legends” and make your make look good. However, you cannot export and share your map. Only, thing you could do is take a screenshot of your map and share it.

In this tutorial, we will learn to add the legends to our map.

Data Used

The Global Multi-resolution Terrain Elevation Data 2010 (GMTED2010) dataset contains elevation data for the globe collected from various sources. The version of the dataset available here is Breakline Emphasis, 7.5 arc-seconds resolution. Breakline emphasis maintains the critical topographic features (streams or ridges) within the landscape by maintaining any minimum elevation or maximum elevation value on a breakline that passes within the specified analysis window. More details are available in the dataset report.

The primary source dataset for GMTED2010 is NGA’s SRTM Digital Terrain Elevation Data (DTED®, http://www2.jpl.nasa.gov/srtm/) (void-filled) 1-arc-second data. For the geographic areas outside the SRTM coverage area and to fill in remaining holes in the SRTM data, the following sources were used: non-SRTM DTED®, Canadian Digital Elevation Data (CDED) at two resolutions, Satellite Pour l’Observation de la Terre (SPOT 5) Reference3D, National Elevation Dataset (NED) for the continental United States and Alaska, GEODATA 9 second digital elevation model (DEM) for Australia, an Antarctica satellite radar and laser altimeter DEM, and a Greenland satellite radar altimeter DEM.

Here is the code:

var countries = ee.FeatureCollection("ft:1tdSwUL7MVpOauSgRzqVTOwdfy17KDbw-1d9omPw")
var country_name = ['Russia']
var country = countries.filter(ee.Filter.inList('Country', country_name));

Map.centerObject(country,3);  //Zoom to Study area
var image = ee.Image().toByte()
    //.paint(roi, 'fill') // Get color from property named 'fill'
    .paint(country, 2, 2); // Outline using color 3, width 5.
    
Map.addLayer(image, {palette: ['000000', '000000', '000000', '000000'], max: 0.5, opacity: 0.9,},"Boundary of "+country_name);

// Load a global elevation image.
var elev = ee.Image('USGS/GMTED2010')

// Add the elevation to the map.
Map.addLayer(elev, {}, 'elevation b/w');

// Use the terrain algorithms to compute a hillshade with 8-bit values.
var shade = ee.Terrain.hillshade(elev);
var clipped = shade.clipToCollection(country);
// Map.addLayer(shade, {}, 'hillshade', false);

// Create a "sea" variable to be used for cartographic purposes
var sea = elev.lte(0);
//Map.addLayer(sea.mask(sea), {palette:'000022'}, 'sea', false);

// Create a custom elevation palette from hex strings.
var elevationPalette = ['FAFDFB','061E84', '1BB747','F0CA0E', 'F07B0E', 'F90B04'];
// Use these visualization parameters, customized by location.
var visParams = {min: -200, max: 1000, palette: elevationPalette};

// Create a mosaic of the sea and the elevation data
var visualized = ee.ImageCollection([
  // Mask the elevation to get only land
  elev.mask(sea.not()).visualize(visParams),
  // Use the sea mask directly to display sea.
  sea.mask(sea).visualize({palette:'000022'})
]).mosaic();

// Convert the visualized elevation to HSV, first converting to [0, 1] data.
var hsv = visualized.divide(255).rgbToHsv();
// Select only the hue and saturation bands.
var hs = hsv.select(0, 1);
// Convert the hillshade to [0, 1] data, as expected by the HSV algorithm.
var v = shade.divide(255);
// Create a visualization image by converting back to RGB from HSV.
// Note the cast to byte in order to export the image correctly.
var rgb = hs.addBands(v).hsvToRgb().multiply(255).byte();
Map.addLayer(rgb.clip(country), {}, 'Elevation of '+country_name);


// Add checkbox//
var checkbox = ui.Checkbox('Boundary of '+country_name, true);
checkbox.onChange(function(checked) {
  // Shows or hides the first map layer based on the checkbox's value.
Map.layers().get(0).setShown(checked);
});
Map.add(checkbox);

 /************************ legend ****************************/
    
var names = [
  'Elevation -100 - 0m',
  'Elevation 0 - 200m',
  'Elevation 200 - 400m',
  'Elevation 400 - 600m',
  'Elevation 600 - 800m',
  'Elevation 800 - 1000m',
  ];

var values = [
  '1',
  '2',
  '3',
  '4',
  '5',
  '6'
  ];
    

var elevationPalette = ['FAFDFB','061E84', '1BB747','F0CA0E', 'F07B0E', 'F90B04'];

// set position of panel
var legend = ui.Panel({
  style: {
    position: 'bottom-left',
    padding: '8px 15px'
  }
});
 
// Create legend title
var legendTitle = ui.Label({
  value: 'Elevation Legend of '+country_name,
  style: {
    fontWeight: 'bold',
    fontSize: '18px',
    margin: '0 0 4px 0',
    padding: '0'
    }
});
 
// Add the title to the panel
legend.add(legendTitle);
 
var makeRow = function(color, name) {

  // Create the label that is actually the colored box.
  var colorBox = ui.Label({
    style: {
      backgroundColor: '#' + color,
      // Use padding to give the box height and width.
      padding: '8px',
      margin: '0 0 4px 0'
    }
  });

  // Create the label filled with the description text.
  var description = ui.Label({
    value: name,
    style: {margin: '0 0 4px 6px'}
  });

  // return the panel
  return ui.Panel({
    widgets: [colorBox, description],
    layout: ui.Panel.Layout.Flow('horizontal')
  });
};
 
// Add color and and names
for (var i = 0; i < 6; i++) {
  legend.add(makeRow(elevationPalette[i], names[i]));
  }  

// Add the legend to the map.
Map.add(legend);

---