How to make a slider iterate in Google Earth Engine?

Question

I have a bunch of layers displayed, and I can make a slider so I can click through the layers (see code). So how do I make the slider bar display from 0 to NumLayers and iterate by 1 layer? (Right now I see a slider from 0 to 1 and I have to slide the bar very carefully to end up on a layer of interest).
var slider = ui.Slider();

slider.onSlide(function(value) {

var int_value = value * (Map.layers().length() - 1) >> 0;

Map.layers().get(int_value).setOpacity(1);

for (var i = int_value + 1; i < Map.layers().length(); i++) {

Map.layers().get(i).setOpacity(0);

}

});

print(slider);

Kuik · Accepted Answer

You can make a slider with the min, max and step argument. Then make a onchange function where all maps are set to opacity 0, except for the selected map.
// make a slider
var slider = ui.Slider({min: 0, 
                        max: Map.layers().length() - 1, 
                        value: 0, 
                        step: 1});
print(slider);

slider.onSlide(function(value) {
  
  // set opacity all layers 0
  for (var i = 0; i < Map.layers().length(); i++) {
    Map.layers().get(i).setOpacity(0);
  }
  
  // set opacity slided layer to 1
  Map.layers().get(value).setOpacity(1);
});

Note that with a large number of layers a client-side for loop may not be preferable. Link code

How to make a slider iterate in Google Earth Engine?

One Answer

Add your own answers!

Ask a Question