I have different vegetation indexes and would like to generate a time series chart of a specific vegetation index based on the user's selection and regions defined by the user's drawing. I would like to generate a chart when selecting the vegetation index and creating a polygon, as an image attached. However, my script either generated the time series chart without my selection or did not generate the chart when I selected the vegetation index. 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: '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();
}
function drawPolygon() {
clearMap();
clearGeometry();
drawingTools.setShape('polygon');
drawingTools.draw();
}
function drawPoint() {
clearMap();
clearGeometry();
drawingTools.setShape('point');
drawingTools.draw();
}
var symbol = {
rectangle: '⬛',
polygon: '🔺',
point: '📍',
};
var controlPanel = ui.Panel({
widgets: [
ui.Label('1. Select a drawing mode.'),
ui.Button({
label: symbol.rectangle + ' Rectangle',
onClick: drawRectangle,
style: {stretch: 'horizontal'}
}),
ui.Button({
label: symbol.polygon + ' Polygon',
onClick: drawPolygon,
style: {stretch: 'horizontal'}
}),
ui.Button({
label: symbol.point + ' Point',
onClick: drawPoint,
style: {stretch: 'horizontal'}
}),
ui.Label('2. Draw a geometry.'),
ui.Label('3. Wait for chart to render.'),
ui.Label(
'4. Repeat 1-3 or edit/move\ngeometry for a new chart.',
{whiteSpace: 'pre'})
],
style: {position: 'bottom-left'},
layout: null,
});
Map.add(controlPanel);
var chartPanel = ui.Panel({
style:
{height: '235px', width: '600px', position: 'bottom-right', shown: false}
});
Map.add(chartPanel);
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');
clearGeometry();
// Set the drawing mode back to null; turns drawing off.
drawingTools.setShape(null);
// Reduction scale is based on map scale to avoid memory/timeout errors.
var mapScale = Map.getScale();
var scale = mapScale > 5000 ? mapScale * 2 : 5000;
// Chart NDVI time series for the selected area of interest.
var chart = ui.Chart.image
.seriesByRegion({
imageCollection: ee.ImageCollection('MODIS/006/MOD13A2'),
regions: aoi,
reducer: ee.Reducer.mean(),
band:select_index.getValue(),
scale: scale,
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]);
}
// Index set-up
var label_index= ui.Label('Select vege index');
var index=['NDVI','EVI'];
var select_index=ui.Select({
items:Object.values(index),
onChange: chartNdviTimeSeries
});
Map.add(ui.Panel([label_index,select_index], ui.Panel.Layout.flow('horizontal')));
drawingTools.onDraw(ui.util.debounce(chartNdviTimeSeries, 500));
drawingTools.onEdit(ui.util.debounce(chartNdviTimeSeries, 500));