Change palette color in Google Earth Engine

Question

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:

https://code.earthengine.google.com/180bc2a78ec92b433ea7c369bb2e249c

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();
  leftMap.setControlVisibility(false);
  var leftSelector = addLayerSelector(leftMap, 0, 'top-left');

Create the right map, and have it display layer 1.

  var rightMap = ui.Map();
  rightMap.setControlVisibility(false);
  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}});

  mapToChange.add(controlPanel);
  }

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.

  ui.root.widgets().reset([splitPanel]);
  var linker = ui.Map.Linker([leftMap, rightMap]);
  leftMap.setCenter(-65.49522105694524,-24.717770902233013, 13);

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
    .visualize(colorizedVis)
    .copyProperties(img, img.propertyNames()))}

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