1

I am trying to apply a mask based on two conditions (elevation and MNDWI), however, I don't find a way to integrate the two conditions using sliders, which would update the map when any of the sliders are used. I have created the sliders and variables however they work independently, applying only one of the two thresholds when a slider is used. At the end of the code, the variable "desired" describes the desired output.

    var start = '2014-09-15';
    var end = '2014-12-30';
    var year = '2014_wet';

    var ndwicollection = ee.ImageCollection('LANDSAT/LC8_L1T_8DAY_NDWI')
                         .filterDate(start, end).first();
    print ('ndwicollection', ndwicollection);

    var srtm = ee.Image('USGS/SRTMGL1_003');

    var mndwiParams = {min: -1, max: 1, palette: ['green', 'yellow', 'blue']};

    // threshhold


    // Create a label and slider for MNDWI.
    var label = ui.Label('MNDWI Threshold');

    var slider = ui.Slider({
      min:-1,
      max: 1,
      step: 0.01,
      style: {stretch: 'horizontal', width:'500px' },
      onChange: (function(value) {
      Map.layers().reset();
      var ndwi_collection_mask =  ndwicollection.updateMask
      (ndwicollection.gte(value)); 
      Map.addLayer(ndwi_collection_mask, {palette: 'blue'}, 'MNDWI threshold '+String(value));
      return ndwi_collection_mask;})
      });
      slider.setValue(0.0);  // Set a default value.

    // Create a label and slider for Elevation.  
    var label1 = ui.Label('Elevation');
    var slider1 = ui.Slider({
      min:0,
      max: 3000,
      step: 1,
      style: {stretch: 'horizontal', width:'500px' },
      onChange: (function(value1) {
      Map.layers().reset();
      var srtmmask =  srtm.updateMask(srtm.lte(value1));
      Map.addLayer(srtmmask, {palette: 'blue'}, 'MNDWI threshold '+String(value1));
      return srtmmask;})
      });
      slider1.setValue(0);  // Set a default value.


    // Create a panel that contains both the slider and the label.
    var panel = ui.Panel({
      widgets: [label, slider, label1,slider1],
      layout: ui.Panel.Layout.flow('vertical'),
      style: {position: 'bottom-right',width: '520px'
          }
    });

    // Add the panel to the map.
    Map.add(panel);

//// to replace with sliders
    var desired = srtm.updateMask(srtm.lte(100)).and(ndwicollection.updateMask
    (ndwicollection.gte(0)));
    Map.addLayer(desired, {palette: 'blue'});
3

You can do this by calling the same function on either slider change and then accessing the values from the slider directly from within the function which in this case i've named updateLayer

var slider = ui.Slider({
  min:-1,
  max: 1,
  step: 0.01,
  style: {stretch: 'horizontal', width:'500px'},
  onChange: updateLayer
});

var slider1 = ui.Slider({
  min:0,
  max: 3000,
  step: 1,
  style: {stretch: 'horizontal', width:'500px'},
  onChange: updateLayer
});

The updating function itself will be something like this

function updateLayer(value){
  var ndwival = slider.getValue();
  var demval = slider1.getValue();
  print(ndwival,demval);
  Map.layers().reset();
  var desired = srtm.updateMask(srtm.lte(demval)).and(ndwicollection
                    .updateMask(ndwicollection.gte(ndwival)));
  Map.addLayer(desired, {palette: 'blue'});    
}

To start things off you can call this function once with any value as argument or none at all. Just a

updateLayer();

at the root level of your script should do it or wherever you want for the initial run with default values.

  • Thanks, after changing the values in 'desired' function for ndwival and demval it worked! – Oscar Aug 1 at 3:11
  • oops thanks for pointing that out! i'll fix my answer – Nishanta Khanal Aug 1 at 3:27

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.