Google Earth Engine – Changing Polygon Fill Color Based on User Drawing

google-earth-engine

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

Best Answer

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

Related Question