Creating a gradient legend

To show what these colors mean

See some example code we used to display global yearly rainfall below.

var chirps = ee.ImageCollection("UCSB-CHG/CHIRPS/PENTAD")

// Calculate rainfall in 2009
var P ="precipitation").filterDate('2009-01-01', '2009-12-31').sum()

// create vizualization parameters
var viz = {min:0, max:3500, palette:['ffffff','b7f0ae','21f600','0000FF','FDFF92','FF2700','d600ff']};

// add the map
Map.addLayer(P, viz);

// set position of panel
var legend = ui.Panel({
style: {
position: 'bottom-left',
padding: '8px 15px'

// Create legend title
var legendTitle = ui.Label({
value: 'Rainfall (mm)',
style: {
fontWeight: 'bold',
fontSize: '18px',
margin: '0 0 4px 0',
padding: '0'

// Add the title to the panel

// create the legend image
var lon = ee.Image.pixelLonLat().select('latitude');
var gradient = lon.multiply((viz.max-viz.min)/100.0).add(viz.min);
var legendImage = gradient.visualize(viz);

// create text on top of legend
var panel = ui.Panel({
widgets: [


// create thumbnail from the image
var thumbnail = ui.Thumbnail({
image: legendImage,
params: {bbox:'0,0,10,100', dimensions:'10x200'},
style: {padding: '1px', position: 'bottom-center'}

// add the thumbnail to the legend

// create text on top of legend
var panel = ui.Panel({
widgets: [



See a live example here.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s