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);