Google Earth Engine – Selection of Panel View

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

I am trying to create an app where the user can select the number of maps in each view.

I am using ui.checkbox as a way to select the options.

The problem is that after checking and unchecking the boxes one of the views stops rendering properly.

Is this the correct way to do this?

Would it be better to use ui.select?

// Create a grid of 4 maps.
var mapGrid = ui.Panel(
    [
      ui.Panel([rightMap, brightMap], null, {stretch: 'both'}),
      ui.Panel([leftMap, bleftMap], null, {stretch: 'both'})
    ],
    ui.Panel.Layout.Flow('horizontal'), {stretch: 'both'});
    
// Create a grid of 2 maps.
var mapGrid2 = ui.Panel(
    [
    ui.Panel([rightMap, brightMap], null, {stretch: 'both'})],
    ui.Panel.Layout.Flow('horizontal'), {stretch: 'both'});

var checkbox = ui.Checkbox('4 panels', false);
checkbox.onChange(function(checked) {
  if (checked) {
    ui.root.widgets().reset([side_panel,mapGrid]);
  } else {
    ui.root.widgets().reset([side_panel,singleMap]);
  }
});

// second split panel check box
var checkbox1 = ui.Checkbox('2 panels', false);
checkbox1.onChange(function(checked) {
  if (checked) {
    ui.root.widgets().reset([side_panel, mapGrid2]);
  } else {
    ui.root.widgets().reset([side_panel,singleMap]);
  }
});

code link

Best Answer

UI elements can only be used in one place at a time. You're using the same maps in multiple panels without ever resetting the panels, so once you click a button, those maps are parented to whichever panel is being used first, and de-parented (removed) from the other panel. When you eventually display the panel from which they were removed, well, they've been removed.

Switching those maps out of the currently displayed panel and into the other one, before displaying it, is tricky, so your best bet is to just not reuse the maps between panels.

Related Question