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({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.

// Add our split panel to the root panel.

// 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({ 
                            style: {position: 'top-left'}


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

var query2Panel = ui.Panel([imageSelect_2])

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

// Error begins here.  if you comment the next line, left panel works

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

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

1 Answer 1


Remove the layout argument from the image1Panel and image2Panel panels:

var image1Panel = ui.Panel({ 
                            style: {position: 'top-left'}

var image2Panel = ui.Panel({widgets:[image2Label,query2Panel],
                            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

  • That did the trick. Weird! Thanks, it works. Ehy did you need to remove center? Nov 4, 2019 at 10:02
  • Re: remove center: it must have been an imported object I did not have access to. Re: setting layout: interesting behavior - you can set it, but you must use the function directory (ui.Panel.Layout.flow('vertical')) it cannot be set as a variable and called. Here is a script to demonstrate - comment/uncomment lines 21 and 28: code.earthengine.google.com/0af9856ff60c0e5bd7ed2cf30a575f67 Nov 4, 2019 at 16:17
  • Re: center strange, as it's the first line of my script. Re: layout and here I thought I was being smart by making it a variable.... Thanks! Nov 4, 2019 at 18:28
  • Re: center: I think I must have just missed it when I copied the script over to the Editor. Best wishes! Nov 4, 2019 at 18:37

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.