2

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

1 Answer 1

3

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.

3
  • 1
    Thanks, Great! I created 2 new maps for the 2-panel view and it works perfectly!
    – OscarBau
    Nov 7, 2022 at 13:41
  • 1
    Just one more thing, how to avoid conflict when both checkboxes are checked?
    – OscarBau
    Nov 7, 2022 at 13:44
  • 1
    Force each checkbox to uncheck the other box in the callback function: checkbox.setValue(false, false) // Don't trigger the callback again. Nov 7, 2022 at 14:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.