google-earth-engine,google-earth-engine-javascript-api – GEE App: How to Display the Polygon on the Map Panel Based on User Drawing

Question

I have two panels, including a drawing panel and a map panel. I would like 1) when clicking on the drawing panel, users can draw a polygon and this polygon will be shown on the map panel. 2) this polygon should only show the boundary colour and no fill colour as photo attached below. This is my code:

var area=ee.FeatureCollection('tile');
var areaVis = area.style({
  color: 'black',
  width: 2,
  fillColor: '#FFFFFF77' // with alpha set for partial transparency
});
var area_layer=ui.Map.Layer(areaVis).setName('Feature');
// Create the main map and set the classification layer
var mapPanel=ui.Map();
mapPanel.centerObject(area);
var layers=mapPanel.layers();
layers.add(area_layer,'layer feature');

//////APP DRAWING
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: 'grid', color: 'green'});

drawingTools.layers().add(dummyGeometry);
function clearGeometry() {
  var layers = drawingTools.layers();
  layers.get(0).geometries().remove(layers.get(0).geometries().get(0));
}
function drawRectangle() {
  clearGeometry();
  drawingTools.setShape('rectangle');
  drawingTools.draw();
}

var symbol = {
  rectangle: '⬛'
};
/*
 * Panel setup
 */
var controlPanel = ui.Panel({
  widgets: [
    ui.Button({
      label: symbol.rectangle + ' Rectangle',
      onClick:  drawRectangle,
      style: {stretch: 'horizontal'}
    }),
  ],
  layout: null,
});

var main_panel = ui.Panel({style:{position: 'top-left'}});
main_panel.add(controlPanel);

// Replace the root with a SplitPanel that contains the inspector and map.
ui.root.clear();
ui.root.add(ui.SplitPanel(main_panel, mapPanel));

This is the result I would like to have

Answer 1

You need to replace Map with mapPanel:

var drawingTools = mapPanel.drawingTools();