0

I want to use the time slider in GEE to change the year, while showing the crop distribution and groundwater for the year. But my code can't control the display of both at the same time. Is there a way to solve this?

// Run this function on a change of the dateSlider.
var showcrop = function(range) {
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var data = cropLandcover.filter(ee.Filter.calendarRange(name,name,'year'));
    var layer = ui.Map.Layer(data, cropLandCoverVis , name + ' Cropdata');
    Map.layers().set(0, layer);
  });
};

var showwater = function(range) {
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var data1 = table.filter(ee.Filter.calendarRange(name,name,'year'));
    var layer1 = ui.Map.Layer(data1, {color: 'FF0000'}, name + ' Waterdata');
    Map.layers().set(0, layer1);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showwater
  });

https://code.earthengine.google.com/80915b70d76a37d646f865d40ab7dc2d

0

You will need to make one function which adds both maps at once to the map.

Furthermore, there need to be made two major improvements: you can't filter your waterdata on a calendarRange if there is no system:time_start property in the data. Either add that or filter on 'Year' === name (as I did). Next, you need to add the first layer to the map using set(0) and the second as set(1), so they will be added on top of each other.

var showBoth = function(range) {
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    // crop layer
    var data = cropLandcover.filter(ee.Filter.calendarRange(name,name,'year'));
    var layer = ui.Map.Layer(data, cropLandCoverVis , name + ' Cropdata');
    Map.layers().set(0, layer);
    // water data
    var data1 = table.filter(ee.Filter.eq('Year',name));
    var layer1 = ui.Map.Layer(data1, {color: 'FF0000'}, name + ' Waterdata');
    Map.layers().set(1, layer1);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showBoth
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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