0

I am building a ui in Earth Engine by following this example.. https://google.earthengine.app/view/forest-change

The example code can be found here.. https://code.earthengine.google.com/b02a58539a6374cdebd9416729a08f47

The snippet of code that influences the output of the opacity slider can be seen below...

opacitySlider.onSlide(function(value) {
  mapPanel.layers().forEach(function(element, index) {
    element.setOpacity(value);
  });
});

This function subsequently influences the opacity of every layer in the map panel.

I have additional functionality in my application that adds other boundaries/imagery that I would like to keep rendered on the map, even if the opacity slider is active.

Is there an easy way to specify only a select group of layers in the map panel to work with the opacity slider?

I am aware that there is a default layer panel with individual opacity sliders, but I'd like to keep that control hidden from the app.

1

When you add layers (that is, ui.Map.Layer objects, not images), remember them in a variable:

var opacityChangingLayers = [];
for (var key in layerProperties) {
  ... // Set up `masked` here...

  // Put the layer in a variable, ...
  var mapLayer = ui.Map.Layer(masked, {}, key, layer.defaultVisibility);
  // ... add it to the map, ...
  mapPanel.add(mapLayer);
  // ... and *also* put it in the array of layers we want to change.
  opacityChangingLayers.push(mapLayer);
}

Then change only those layers:

  opacityChangingLayers.forEach(function(element) {
    element.setOpacity(value);
  });
4
  • I have tried implementing your suggestions without success. I think I am just coding your solution into my app incorrectly. Here is a link to a working version of my application.. code.earthengine.google.com/a5d78cbba1ebe4494e9fc674900d95ec. I am trying to code the opacity slider to only work for the layers in the drop-down list – Eli Simonson Jan 26 at 18:29
  • @EliSimonson You should not put image objects in opacityChangingLayers; the line I wrote var opacityChangingLayers = []; is complete as-is. Only map layers go in that array, and that is done by the line opacityChangingLayers.push(mapLayer); – Kevin Reid Jan 26 at 20:32
  • @EliSimonson You also need to correctly incorporate the code I wrote in the first section: the layer object that needs to be pushed is, again, not the image: it is the object that ui.Map.Layer returns. – Kevin Reid Jan 26 at 20:33
  • Yup, your solution worked just fine when I saved the images as layer objects!! – Eli Simonson Jan 29 at 19:16

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.