2

I am working on a Google Earth Engine app where I would like to allow the user to draw an area of interest polygon (AOI). After drawing, the AOI polygon should only show the boundary colour (such as red color) and no fill color (as the photos attached) so that the map under AOI polygon can be viewed. I do not know how to make the polygon with no fill color. Could you please help me with this? Below is my code:

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();
}

function drawPolygon() {
  clearGeometry();
  drawingTools.setShape('polygon');
  drawingTools.draw();
}

var symbol = {
  rectangle: '⬛',
  polygon: '🔺',
  point: '📍',
};
/*
* Panel setup
*/
var controlPanel = ui.Panel({
  widgets: [
    ui.Label('1. Select a drawing mode.'),
    ui.Button({
      label: symbol.rectang[![enter image description here][1]][1]le + ' Rectangle',
      onClick: drawRectangle,
      style: {stretch: 'horizontal'}
    }),
    ui.Button({
      label: symbol.polygon + ' Polygon',
      onClick: drawPolygon,
      style: {stretch: 'horizontal'}
    }),
  ],
  layout: null,
});

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

Blockquote

enter image description here

1 Answer 1

2

This is not possible with the rectangle and polygon geometry types because they are closed geometries. You can show just the line with the line input to the ui.Map.DrawingTools.setShape method. However, this is not a closed geometry, so the resulting area of interest will only be the pixels that interest the line, which is probably not what you want. An alternative approach is to create a FeatureCollection from the geometry and then paint the FeatureCollection to a raster and display it (remove the drawn geometry object). I recognize the code is from the Interactive Region Reduction App tutorial - here is the section of code you can modify to display the geometry on a raster with only outline pixels showing (no fill).

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');
clearGeometry();

See the full script that resets the map layer each time you click a drawing button: https://code.earthengine.google.com/1a8ac989376b297f02fc3e0a39e0d81a

1
  • Thank you for your great help, Justin. It worked well!
    – user30985
    Dec 22, 2022 at 0:45

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.