1

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 enter image description here

1 Answer 1

1

You need to replace Map with mapPanel:

var drawingTools = mapPanel.drawingTools();

2
  • Thank you for your help OscarBau. It works well.
    – user30985
    Dec 15, 2022 at 20:17
  • @user30985 don't forget to accept the answer by clicking on the checkmark
    – OscarBau
    Dec 16, 2022 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.