Effect picture
Implementation code
var legend = ui.Panel({
style: {
position: 'bottom-left',
padding: '8px 15px'
}
});
var legendTitle = ui.Label({
value: 'NDVI',
style: {
fontWeight: 'bold',
fontSize: '18px',
margin: '0 0 9px 0',
padding: '0'
}
});
legend.add(legendTitle);
var makeRow = function(color, name) {
var colorBox = ui.Label({
style: {
backgroundColor: '#' + color,
padding: '8px',
margin: '0 0 4px 0'
}
});
var description = ui.Label({
value: name,
style: {margin: '0 0 4px 6px'}
});
return ui.Panel({
widgets: [colorBox, description],
layout: ui.Panel.Layout.Flow('horizontal')
});
};
var palette =['FF0000', '22ff00', '1500ff'];
var names = ['Red','Green','Blue'];
for (var i = 0; i < 3; i++) {
legend.add(makeRow(palette[i], names[i]));
}
Map.add(legend);
ui.Thumbnail
function makeColorBarParams(palette) {
return {
bbox: [0, 0, 1, 0.1],
dimensions: '100x10',
format: 'png',
min: 0,
max: 1,
palette: palette,
};
}
var colorBar = ui.Thumbnail({
image: ee.Image.pixelLonLat().select(0),
params: makeColorBarParams('navy,blue,aqua'),
style: {stretch: 'horizontal', margin: '0px 8px', maxHeight: '24px'},
});
var legendLabels = ui.Panel({
widgets: [
ui.Label(1, {margin: '4px 8px'}),
ui.Label(15,{margin: '4px 8px', textAlign: 'center', stretch: 'horizontal'}),
ui.Label(30, {margin: '4px 8px'})
],
layout: ui.Panel.Layout.flow('horizontal')
});
print(colorBar)
print(legendLabels)