google-earth-engine – How to Change Image on Map Using Slider in Google Earth Engine

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

I want to switch between map layers in Google Earth Engine using a slider. The idea is to set the opacity of the layers iteratively, like in this app:
https://nrtwur.users.earthengine.app/view/raddalert

Here's a simple example:

// Some layers.
var l0 = ui.Map.Layer({eeObject: ee.Image(1), opacity: 1}); // Initially, only this one will be shown.
var l1 = ui.Map.Layer({eeObject: ee.Image(1), opacity: 0});
var l2 = ui.Map.Layer({eeObject: ee.Image(1), opacity: 0});
var l3 = ui.Map.Layer({eeObject: ee.Image(1), opacity: 0});
var l4 = ui.Map.Layer({eeObject: ee.Image(1), opacity: 0});

// Adding layers to the Map.
Map.layers().set(0, l0);
Map.layers().set(1, l1);
Map.layers().set(2, l2);
Map.layers().set(3, l3);
Map.layers().set(4, l4);

// Layer list
var layerList = Map.layers();
print(layerList);

// Slider to define which image will be shown.
var slider = ui.Slider({
  min: 0, 
  max: layerList.length() - 1, 
  value: 0, 
  step: 1
});

Map.add(slider);

// Function that changes the opacity of layers
slider.onSlide(); // ???

https://code.earthengine.google.com/21a6281d1a93c9e3e1b7b90dc216702b?noload=true

The idea is:

Set the minimum and maximum value of the slider according to the number of images to be displayed. If I have 5 layers then the min and max values should be 0 and 4 respectively.
The slider's value property changes the image being shown on the map.

I know I can get the answer by iteratively changing the opacity of the layers, but I couldn't implement the idea in GEE.

Best Answer

The trick is to save what the previously selected image was so you can easily set the Image to transparent. For this I use the variable current. Then you can get the newly selected Image from the layer list and set the opacity to 1.

var current = 0
// Slider to define which image will be shown.
var slider = ui.Slider({
  min: 0, 
  max: layerList.length() - 1, 
  value: current, 
  step: 1
});

Map.add(slider);

// Function that changes the opacity of layers
slider.onSlide(function(value){
  layerList.get(current).setOpacity(0);
  layerList.get(value).setOpacity(1);
  current = value
});

Related Solutions

Google Earth Engine – Changing Max Band Value of Sentinel 5P Methane in GEE

Rather than change the values of the band, you can change how the values are stretched when displaying.

In the corner of the map, click the gear next to your layer. Where it says custom choose an option. Play with that until you have one you like, then you can copy those values into your script.

Here's what the above setting looks like. It's the 2 sigma stretch.

Google Earth Engine – Using Multiple Masks

I removed the functions I created. I thought I had to create mask function and then use them with map(). Instead, I apply the .where() directly to the means that are computed.


var cou_t = ['Tompkins'];

var st_y = ['New York'];

var cobo = ee.FeatureCollection("TIGER/2016/Counties").filter(ee.Filter.inList('NAME', cou_t)).geometry();

var st_ny = ee.FeatureCollection("TIGER/2018/States").filter(ee.Filter.inList('NAME', st_y));

var tomp = cobo.intersection(st_ny);

// Played around with different dates, like January, March, July
var start_date = ee.Date('2012-01-01');                 // <<<<----       
var end_date = ee.Date('2012-01-02');                   // <<<<----    

var daymet = ee.ImageCollection("NASA/ORNL/DAYMET_V4")
.filterDate(start_date, end_date)
.map(function(im){return im.clip(tomp)});

var daymean = daymet.map(function (image) {
var dayx = image.select('tmax');
  var dayn = image.select('tmin');
  // Apply threshold
  // Hot temp on max. temp.
  var dayxt = dayx.where(dayx.lt(10.0),0).rename('hotmax');
  // Low temp. on max. temp. (e.g. high temp on a very cold day)
  var dayxt2 = dayxt.where(dayxt.gt(26.0),0).rename('lowmax');
  // Low temp. on cold day
  var daynt = dayxt2.where(dayn.lt(10.0),0).rename('coldlow');
  // Calculate mean temp.
  var tavg = dayx.add(dayn).divide(2).rename('avg');
  var tavghc = tavg.where(dayx.lt(10.0),0).rename('meanhotcol');
  var tavgcc = tavghc.where(dayx.gt(26.0),0).rename('meanhihot');
  var tavgcc2 = tavgcc.where(dayn.lt(10.0),0).rename('meanfinal');
  return image.addBands([dayxt,dayxt2,daynt,tavg,tavghc,tavgcc,tavgcc2]);
});

var start_date2 = ee.Date('2012-03-15');                 // <<<<----       
var end_date2 = ee.Date('2012-03-16');                   // <<<<----    

var daymet2 = ee.ImageCollection("NASA/ORNL/DAYMET_V4")
.filterDate(start_date2, end_date2)
.map(function(im){return im.clip(tomp)});

var daymean2 = daymet2.map(function (image) {
var dayx = image.select('tmax');
  var dayn = image.select('tmin');
  // Apply threshold
  // Hot temp on max. temp.
  var dayxt = dayx.where(dayx.lt(10.0),0).rename('hotmax');
  // Low temp. on max. temp. (e.g. high temp on a very cold day)
  var dayxt2 = dayxt.where(dayxt.gt(26.0),0).rename('lowmax');
  // Low temp. on cold day
  var daynt = dayxt2.where(dayn.lt(10.0),0).rename('coldlow');
  // Calculate mean temp.
  var tavg = dayx.add(dayn).divide(2).rename('avg');
  var tavghc = tavg.where(dayx.lt(10.0),0).rename('meanhotcol');
  var tavgcc = tavghc.where(dayx.gt(26.0),0).rename('meanhihot');
  var tavgcc2 = tavgcc.where(dayn.lt(10.0),0).rename('meanfinal');
  return image.addBands([dayxt,dayxt2,daynt,tavg,tavghc,tavgcc,tavgcc2]);
});

var start_date3 = ee.Date('2012-07-15');                 // <<<<----       
var end_date3 = ee.Date('2012-07-16');                   // <<<<----    

var daymet3 = ee.ImageCollection("NASA/ORNL/DAYMET_V4")
.filterDate(start_date3, end_date3)
.map(function(im){return im.clip(tomp)});

var daymean3 = daymet3.map(function (image) {
var dayx = image.select('tmax');
  var dayn = image.select('tmin');
  // Apply threshold
  // Hot temp on max. temp.
  var dayxt = dayx.where(dayx.lt(10.0),0).rename('hotmax');
  // Low temp. on max. temp. (e.g. high temp on a very cold day)
  var dayxt2 = dayxt.where(dayxt.gt(26.0),0).rename('lowmax');
  // Low temp. on cold day
  var daynt = dayxt2.where(dayn.lt(10.0),0).rename('coldlow');
  // Calculate mean temp.
  var tavg = dayx.add(dayn).divide(2).rename('avg');
  var tavghc = tavg.where(dayx.lt(10.0),0).rename('meanhotcol');
  var tavgcc = tavghc.where(dayx.gt(26.0),0).rename('meanhihot');
  var tavgcc2 = tavgcc.where(dayn.lt(10.0),0).rename('meanfinal');
  return image.addBands([dayxt,dayxt2,daynt,tavg,tavghc,tavgcc,tavgcc2]);
});

Map.setCenter(-76,42.4);
Map.setZoom(9);
Map.addLayer(daymean,null,"one");
Map.addLayer(daymean2,null,"two");
Map.addLayer(daymean3,null,"three");

The code environment: https://code.earthengine.google.com/44c7a3e19ea8dbdfd381efcde7296d40

Best Answer

Related Solutions

Google Earth Engine – Changing Max Band Value of Sentinel 5P Methane in GEE

Google Earth Engine – Using Multiple Masks

Related Question