Google Earth Engine – Linking UI Image Selection and Split Panel in Google Earth Engine

google-earth-enginegoogle-earth-engine-javascript-apiuser interface

I'm trying to create a split panel where a linked map loads different images and wipe allows one to see clearly the difference between years.

But I'm stuck with a weird issue when placing the panels containing the image Selectors.

When I just add the left map, it works fine. But when I add the right map, it takes both panels into the right map.

// Set a center and zoom level.
var center = {lon: -73.97, lat: 40.77, zoom: 13};


// Create two maps.
var leftMap = ui.Map(center);
var rightMap = ui.Map(center);

// Remove UI controls from both maps, but leave zoom control on the left map.
leftMap.setControlVisibility(false);
rightMap.setControlVisibility(false);
leftMap.setControlVisibility({zoomControl: true});


// Create a split panel with the two maps.
var splitPanel = ui.SplitPanel({
  firstPanel: leftMap,
  secondPanel: rightMap,
  orientation: 'horizontal',
  wipe: true
});

// Remove the default map from the root panel.
ui.root.clear();

// Add our split panel to the root panel.
ui.root.add(splitPanel);

////////////////////////
// Make the UI
////////////////////////

//////////
// Set the flow
/////////

var horizontalFlow = ui.Panel.Layout.flow('horizontal')
var verticalFlow = ui.Panel.Layout.flow('vertical')


// Year Select lists

var imageList = ["Image 1","Image 2","Image 3","Image 4","Image 5","Image 6"]

var imageSelect_1 = ui.Select(imageList,"Select Year 1 to Load")
var imageSelect_2 = ui.Select(imageList,"Select Year 2 to Load")


// query labels
var image1Label = ui.Label("Image 1: ")


var query1Panel = ui.Panel([imageSelect_1])



var image1Panel = ui.Panel({ 
                            widgets:[image1Label,query1Panel],
                            layout:verticalFlow,
                            style: {position: 'top-left'}
                            })

leftMap.add(image1Panel)


/// Image 2 panel
// query labels
var image2Label = ui.Label("Image 2: ")

var query2Panel = ui.Panel([imageSelect_2])

var image2Panel = ui.Panel({widgets:[image2Label,query2Panel],
                            layout:verticalFlow,
                            style: {position: 'top-right'}
                            })

// Error begins here.  if you comment the next line, left panel works
rightMap.add(image2Panel)

var linker = ui.Map.Linker([leftMap, rightMap]);

What am I doing wrong
I built this inspired by the Examples/User Interface/Split Panel

Best Answer

Remove the layout argument from the image1Panel and image2Panel panels:

var image1Panel = ui.Panel({ 
                            widgets:[image1Label,query1Panel],
                            //layout:verticalFlow,
                            style: {position: 'top-left'}
                            })

var image2Panel = ui.Panel({widgets:[image2Label,query2Panel],
                            //layout:verticalFlow,
                            style: {position: 'top-right'}
                            })

I'm not sure why it causes a problem - something to investigate more...

Here is the full script - note that I had to remove center from the initial left and right map definitions: https://code.earthengine.google.com/532e9627551537fff5eeaa9bdd641bfa

Related Question