Tutorial 6.2

This tutorial explains the snippets of script to be developed for first Web Application

2. Script structure

2.5. Add Legend of elevation

Below code snippet define a function to add a legend for elevation map (ALOS) on the bottom right of map vies of the final web application.

//////////////////Add Legend function STARTS here///////////////////////

// For the web application, to display the legend of elevation

// Below function create a legend as a thumbnail inserted to UI (user interface) panel

function makeLegend(elev) {

  var lon = ee.Image.pixelLonLat().select('longitude');

  var gradient = lon.multiply((elev.max-elev.min)/100.0).add(elev.min);

  var legendImage = gradient.visualize(elev);

  var panel = ui.Panel({

    layout: ui.Panel.Layout.flow('horizontal'),

    style: {

          position: 'bottom-right',

          padding: '5x 5px',

          color: '000000'



    widgets: [


      ui.Label({style: {stretch: 'horizontal'}}),


      ui.Label({style: {stretch: 'horizontal'}}),


      ui.Label({style: {stretch: 'horizontal'}}),


      ui.Label({style: {stretch: 'horizontal'}}),




  // Create legend title //

  var legendTitle = ui.Label({

    value: 'Elevation (m)',

    style: {

      stretch: 'horizontal',

      textAlign: 'center',

      fontWeight: 'bold',

      fontSize: '14px',



  var thumb = ui.Thumbnail({

    image: legendImage

    params: {bbox:'0,10,100,8'dimensions:'356x15'}, 

    style: {padding: '0.5px'}


  return ui.Panel({style:{position: 'bottom-right'}}).add(legendTitle).add(thumb).add(panel);



//////////////////Add Legend function ENDS here///////////////////////