I've modified this code: https://code.earthengine.google.com/?scriptPath=Examples:User+Interface/Split+Panel but I can't change the maps color pallet

This is the color pallet that I want to use:

var colorizedVis = {
min: -1.0,
max: 1.0,
palette: [
'FFFFFF', 'CE7E45', 'DF923D', 'F1B555', 'FCD163', '99B718', '74A901',
'66A000', '529400', '3E8601', '207401', '056201', '004C00', '023B01',
'012E01', '011D01', '011301'

My code can be found here:


or here:

Demonstrates before/after imagery comparison with a variety of dates.

Configure the imagery

  var images = {

  'L5_01_98' : ee.Image('LANDSAT/LT05/C01/T1_8DAY_EVI/19990101'),

  '5_04_08' : ee.Image('LANDSAT/LT05/C01/T1_8DAY_EVI/20080414'),
  '5_01_11' : ee.Image('LANDSAT/LT05/C01/T1_8DAY_EVI/20110117'),


  var colorizedVis = {
    min: 0.0,
    max: 1.0,
    palette: [
      'FFFFFF', 'CE7E45', 'DF923D', 'F1B555', 'FCD163', '99B718', '74A901',
      '66A000', '529400', '3E8601', '207401', '056201', '004C00', '023B01',
      '012E01', '011D01', '011301'

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(-65.49522105694524,-24.717770902233013, 13);

Grey Pallet

1 Answer 1


Style the images in your dictionary with the visualize method. Make a styling function that calls on your visualization arguments (includes the palette you want) and apply it to each image. Here is the function:

function styleImg(img){
  return ee.Image(img
    .copyProperties(img, img.propertyNames()))}

See lines 8-34: https://code.earthengine.google.com/77633bcde657e10a829a9aa2a83550de

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.