Adding a Legend in GEE

A legend is a quick guide and easy roadmap to enable the identification of the outputs of a particular analysis or study. In this blog, a legend is created for the supervised classification we did earlier. The following is a step-by-step guide for adding a legend in GEE.

  • Create the legend title and style it. By styling one can include the font type, font size and font weight among others.
var legendTitle = ui.Label({
  value: ' Supervised Classification',
  style: {
    fontWeight: 'bold',
    fontSize: '18px',
    margin: '0 0 4px 0',
    padding: '0'
    }
});
  • Add the title to the panel.
legend.add(legendTitle);
  • Create the row of the legend. The row will have the color and name of the items to be included in the legend, in this case urban and vegetation.
var makeRow = function(color, name) {
      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 description text for the colored box.
      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')
      });
};

  • Create the palette for vegetation and urban
var palette =['08731A','BF0F45'];
  • Create the names to be displayed on the palette
var names = ['Vegetation','Urban'];
  • Add the color palette and names to the legend
for (var i = 0; i < 2; i++) {
  legend.add(makeRow(palette[i], names[i]));
  }  
  • Add the legend to the map.
Map.add(legend);  
  • Below is a representation of the legend:

Previous Post
Next Post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.