I have managed to do a split panel with GEE, but I don't manage to change the contrast. I know the good contrast for the picture are min: 150 and max: 8000.

Also, the first image (2010) I used Landsat 7, which is displaying some strange colors.

Here is my code:

var images = {
'2010': ee.ImageCollection('LANDSAT/LE07/C01/T1_SR')
                  .filterDate('2010-01-01', '2010-12-31')
                  .select(['B3', 'B2', 'B1'])
                  var filled1a = image.focal_mean(1, 'square', 'pixels', 2);
                  return filled1a.blend(image)}),
'2013': ee.ImageCollection('LANDSAT/LC08/C01/T1_SR')
                  .filterDate('2013-03-01', '2013-10-31')
                  .select(['B4', 'B3', 'B2'])
'2019': ee.ImageCollection('LANDSAT/LC08/C01/T1_SR')
                  .filterDate('2018-01-01', '2018-12-31')
                  .select(['B4', 'B3', 'B2'])

 * Set up the maps and control widgets

// Create the left map, and have it display layer 0.
var leftMap = ui.Map();
var leftSelector = addLayerSelector(leftMap, 0, 'top-left');

// Create the right map, and have it display layer 1.
var rightMap = ui.Map();
var rightSelector = addLayerSelector(rightMap, 1, 'top-right');

// Adds a layer selection widget to the given map, to allow users to change
// which image is displayed in the associated map.
function addLayerSelector(mapToChange, defaultValue, position) {
  var label = ui.Label('Choose an image to visualize');

  // This function changes the given map to show the selected image.
  function updateMap(selection) {
    mapToChange.layers().set(0, ui.Map.Layer(images[selection]));

  // Configure a selection dropdown to allow the user to choose between images,
  // and set the map to update when a user makes a selection.
  var select = ui.Select({items: Object.keys(images), onChange: updateMap});
  select.setValue(Object.keys(images)[defaultValue], true);

  var controlPanel =
      ui.Panel({widgets: [label, select], style: {position: position}});


 * Tie everything together

// Create a SplitPanel to hold the adjacent, linked maps.
var splitPanel = ui.SplitPanel({
  firstPanel: leftMap,
  secondPanel: rightMap,
  wipe: true,
  style: {stretch: 'both'}

// Set the SplitPanel as the only thing in the UI root.
var linker = ui.Map.Linker([leftMap, rightMap]);
leftMap.setCenter(-67.37, -20.55, 12);

Link to my GEE script:


1 Answer 1


To adjust the contrast, as you said you want to set the min and max value of visualization to 500 and 8000 respectively, you want to specify those values for the layer. ui.Map.Layer takes visualization parameters as second parameter so you can specify this in your script as

function updateMap(selection) {
    mapToChange.layers().set(0, ui.Map.Layer(images[selection],{min:500,max:8000}));

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.