Google Earth Engine – Remove Layer with Map.layers.set()

google-earth-enginegoogle-earth-engine-javascript-api

I have a script using Map.layers.set(). However, I do not know the role of this function.
Could you please help me to understand this.

 var drawingTools = Map.drawingTools();
drawingTools.setShown(false);
while (drawingTools.layers().length() > 0) {
  var layer = drawingTools.layers().get(0);
  drawingTools.layers().remove(layer);
}
var dummyGeometry =
    ui.Map.GeometryLayer({geometries: null, name: 'geometry', color: 'red'});

drawingTools.layers().add(dummyGeometry);

function clearMap() {
  var mapLayers = Map.layers();
  if (mapLayers.length() > 0) {
    mapLayers.reset();
  }
}   
function clearGeometry() {
  var layers = drawingTools.layers();
  layers.get(0).geometries().remove(layers.get(0).geometries().get(0));
}
function drawRectangle() {
  clearMap();
  clearGeometry();
  drawingTools.setShape('rectangle');
  drawingTools.draw();
}

var symbol = {
  rectangle: '⬛',
};
var controlPanel = ui.Panel({
  widgets: [
    ui.Label('1. Select a drawing mode.'),
    ui.Button({
      label: symbol.rectangle + ' Rectangle',
      onClick: drawRectangle,
      style: {stretch: 'horizontal'}
    }),
  ],
  style: {position: 'top-left'},
  layout: null,
});
Map.add(controlPanel); 
var chartPanel = ui.Panel({
  style:
      {height: '235px', width: '600px', position: 'bottom-right', shown: false}
});

var index_chose;
function chartNdviTimeSeries() {
  // Make the chart panel visible the first time a geometry is drawn.
  if (!chartPanel.style().get('shown')) {
    chartPanel.style().set('shown', true);
  }
  var aoi = drawingTools.layers().get(0).getEeObject();
  var aoiFc = ee.FeatureCollection(aoi);
  var empty = ee.Image().byte();
  var outline = empty.paint({
    featureCollection: aoiFc,
    color: 1,
    width: 3
  });
  
  
//Map.addLayer(outline, {palette: 'red'}, 'AOI').setShown(1);
var area=ui.Map.Layer(outline, {palette: 'red'}, 'AOI').setShown(1)
Map.layers().set(0, area)  


  // Set the drawing mode back to null; turns drawing off.
  drawingTools.setShape(null);

  
  // Chart NDVI time series for the selected area of interest.
  var chart = ui.Chart.image
                  .seriesByRegion({
                    imageCollection: ee.ImageCollection('MODIS/061/MOD13A2'),
                    regions: aoi,
                    reducer: ee.Reducer.mean(),
                    band:select_index.getValue(),
                    xProperty: 'system:time_start'
                  })
                  .setOptions({
                    titlePostion: 'none',
                    legend: {position: 'none'},
                    hAxis: {title: 'Date'},
                    vAxis: {title: select_index.getValue()},
                    series: {0: {color: '23cba7'}}
                  });

  // Replace the existing chart in the chart panel with the new chart.
  chartPanel.widgets().reset([chart]);
drawingTools.onDraw(ui.util.debounce(chartNdviTimeSeries, 500));
drawingTools.onEdit(ui.util.debounce(chartNdviTimeSeries, 500));

dummyGeometry.setShown(false)
}

// Index set-up
var label_index= ui.Label('Select vege index');
var index=['NDVI','EVI'];
var select_index=ui.Select({
  items:index,
  onChange:chartNdviTimeSeries
  });


Map.add(ui.Panel([label_index,select_index],ui.Panel.Layout.flow('horizontal')));
Map.add(chartPanel);

Best Answer

A short explanation in your code would be:

If you use:

Map.addLayer(outline, {palette: 'red'}, 'AOI').setShown(1);

each time that you run the function, it will create new layer.

If you use:

var area=ui.Map.Layer(outline, {palette: 'red'}, 'AOI').setShown(1)

It create a variable containing the layer and their visualization.

And:

Map.layers().set(0, area)

Is used to specify the position in the layers list. When you run the function it will be always placed (or replace) in the position 0 in this case.

Related Question