[GIS] Add legend in a SplitPanel in Google-Earth Engine

google-earth-enginejavajavascriptlegend

I have made a code with a Split Panel (1) , now i what to add a legend like this example:

https://code.earthengine.google.com/b5d35a19689ec5698e59f36a9b3ae6f8

this is my original code that I want to use:

(1) https://code.earthengine.google.com/e1438ab2c27221380f9b7c68c8c8b0a1

Best Answer

You could add the legend to both maps, and you'd get something that looks ok.

var leftMap = ui.Map();
leftMap.add(createLegend())
leftMap.setControlVisibility(true);
var leftSelector = addLayerSelector(leftMap, 0, 'top-left');

var rightMap = ui.Map();
rightMap.add(createLegend())
rightMap.setControlVisibility(true);
var rightSelector = addLayerSelector(rightMap, 1, 'top-right');

function createLegend() {
    var legend = ui.Panel({
    style: {
      position: 'bottom-left',
      padding: '8px 15px'
    }
  })

  // Create legend title
  var legendTitle = ui.Label({
    value: 'Rainfall (mm)',
    style: {
      fontWeight: 'bold',
      fontSize: '18px',
      margin: '0 0 4px 0',
      padding: '0'
      }
  });

   // Add the title to the panel
  legend.add(legendTitle); 

  // create text on top of legend
  var panel = ui.Panel({
      widgets: [
        ui.Label(viz['max'])
      ],
    });
  legend.add(panel);

  var lon = ee.Image.pixelLonLat().select('latitude');
  var gradient = lon.multiply((viz.max-viz.min)/100.0).add(viz.min);
  var legendImage = gradient.visualize(viz);
  var thumbnail = ui.Thumbnail({
    image: legendImage, 
    params: {bbox:'0,0,10,100', dimensions:'10x200'},  
    style: {padding: '1px', position: 'bottom-center'}
  });

  // add the thumbnail to the legend
  legend.add(thumbnail);

  // create text on top of legend
  var panel = ui.Panel({
      widgets: [
        ui.Label(viz['min'])
      ],
    });

  legend.add(panel);
  return legend
}

https://code.earthengine.google.com/7be167882a772c6ddcbc67b2345eac64

Related Question