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 theimage1Panel
andimage2Panel
panels: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