I use a GEE app to visualize operational model output (so, it updates daily). The app displays about 10 gridded layers, and I have added checkboxes to easily allow the user to turn on / off layers of interest. I also have a date slider, so a user can go back in time and view the output earlier in the year. I am pretty new to GEE, so my approach to changing the date, while not elegant, does work. On a change in choice with the date slider, all map layers are removed and then the new images are displayed.
Well, now, I would like to give the user some control over the colormap (for example, setting the maximum value) for some layers. No problem, I have added sliders for this, and I can grab the newly selected max value.
Here is where I am stuck. When the user uses the slider to select a new max value for the colormap, do I have to remove all layers and then re-display all of them, including the one changed one? I do not seem able to figure out how to just 'refresh' one layer.
The code below does not really work as intended, and I'm not sure why.
var now = Date.now();
var end = ee.Date(now).advance(-7, "month")
var tmp=end.format("YYYY_MM_dd").getInfo();
var uri_wy_hs = 'gs://cso_test_upload/wy_domain/snod_wo_assim/' + tmp + '_snod_wo_assim.tif';
var wy_hs = ee.Image.loadGeoTIFF(uri_wy_hs);
var uri_wy_swe = 'gs://cso_test_upload/wy_domain/swed_wo_assim/' + tmp + '_swed_wo_assim.tif';
var wy_swe = ee.Image.loadGeoTIFF(uri_wy_swe);
// Establish some color palette stuff
var palettes = require('users/gena/packages:palettes'); //brewermap and other colors...
var palette = palettes.cmocean.Thermal[7]; //use this for the CSO snow output (SWE) and density
var visparams = {min: 0, max:2, bands:['B0'], palette:palette}; //limits in meters - for swe
var visparams_hs = {min: 0, max:4, bands:['B0'], palette:palette}; //limits in meters - for hs
var vis = {min: 0, max: 2.0, palette: palette};
var vis_hs = {min: 0, max: 4.0, palette: palette};
// add test cso images
Map.addLayer(wy_hs,visparams_hs,'CSO Hs');
Map.addLayer(wy_swe,visparams,'CSO SWE')
/* Create UI Panels */
var panel = ui.Panel({style: {width:'25%'}});
ui.root.insert(0,panel);
var hspanel = ui.Panel({layout: ui.Panel.Layout.flow('horizontal'),style: {width: '100%'}});
panel.add(hspanel)
var hslabel = ui.Label('Hs (m)',{textDecoration: 'underline', fontSize: '12px', margin: '10px 5px'});
hspanel.add(hslabel);
var hsslider = ui.Slider({
min: 0,
max: 4,
value: 2,
step: 0.1,
style: {stretch: 'horizontal'},
onChange: updatehslayer
});
hspanel.add(hsslider);
var swepanel = ui.Panel({layout: ui.Panel.Layout.flow('horizontal'),style: {width: '100%'}});
panel.add(swepanel)
var swelabel = ui.Label('swe (m)',{textDecoration: 'underline', fontSize: '12px', margin: '10px 5px'});
swepanel.add(swelabel);
var sweslider = ui.Slider({
min: 0,
max: 2,
value: 1,
step: 0.1,
style: {stretch: 'horizontal'},
onChange: updateswelayer
});
swepanel.add(sweslider);
function updatehslayer(value){
var hsmax = hsslider.getValue();
var visparams_hs = {min: 0, max:hsmax, bands:['B0'], palette:palette};
Map.layers().reset([wy_hs]);
Map.addLayer(wy_hs,visparams_hs,'CSO Hs')
}
function updateswelayer(value){
var swemax = sweslider.getValue();
var visparams = {min: 0, max:swemax, bands:['B0'], palette:palette};
Map.layers().reset([wy_swe]);
Map.addLayer(wy_swe,visparams,'CSO swe')
}
