[GIS] Creating DateSlider for whole image collection in Earth Engine

google-earth-enginegoogle-earth-engine-javascript-api

I am need to create DateSlider for whole Sentinel-NDVI collection during given period. Is there any way to do so? https://developers.google.com/earth-engine/ui_widgets, here I found an example, but I was not able adjust it to my case.

var Start_period = ee.Date('2020-01-01');
var End_period = ee.Date(now);

var sentinel_dataset = ee.ImageCollection("COPERNICUS/S2_SR")
    .filterBounds(subset)
    .filterDate(Start_period, End_period)
    .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 20))
    .map(maskS2clouds);

var collection = sentinel_dataset.map(function(image) {
  return image.select().addBands(image.normalizedDifference(['B8', 'B4'])).rename('NDVI');
});

print(collection);

var vis = {min: 0, max: 1, palette: [
  'FFFFFF', 'CE7E45', 'FCD163', '66A000', '207401',
  '056201', '004C00', '023B01', '012E01', '011301'
]};

Best Answer

UI widgets needs client-side arguments. In this case, you can call evaluate() on your dates to get their client-side values. I'm putting them together into a dictionary to be able to have a single object to call evaluate() on, to simplify things.

ee.Dictionary({start: Start_period, end: End_period})
  .evaluate(renderSlider) 

function renderSlider(dates) {
  var slider = ui.DateSlider({
    start: dates.start.value, 
    end: dates.end.value, 
    period: 5, // Every 5 days
    onChange: renderDateRange
  })
  Map.add(slider)
}

function renderDateRange(dateRange) {
  var image = collection
    .filterDate(dateRange.start(), dateRange.end())
    .median()

  var vis = {min: 0, max: 1, palette: [
    'FFFFFF', 'CE7E45', 'FCD163', '66A000', '207401',
    '056201', '004C00', '023B01', '012E01', '011301'
  ]}  
  var layer = ui.Map.Layer(image, vis, 'NDVI')
  Map.layers().reset([layer])
}

https://code.earthengine.google.com/46314d510bf295c19e40413af5628055

Related Question