How to add color-map scale in Google Earth Engine?

Question

I want to add a colormap scale like below in my Earth Engine app. I cannot find a UI component for this. Can I do this in any other way in Earth Engine?

Answer 1

Here is an example of a continuous legend.

/**
 * @license
 * Copyright 2020 Google LLC.
 * SPDX-License-Identifier: Apache-2.0
 */


/*
 * Map layer setup
 */

// Compute the mean sea surface temperature (SST) value for each pixel by
// averaging MODIS Aqua data for one year.
var modisOceanColor = ee.ImageCollection('NASA/OCEANDATA/MODIS-Aqua/L3SMI');
var sst =
    modisOceanColor.select(['sst']).filterDate('2017-01-01', '2018-01-01');

var vis = {min: 0, max: 30, palette: 'navy,blue,aqua'};
var composite = sst.mean().visualize(vis);
Map.addLayer(composite);


/*
 * Legend setup
 */

// Creates a color bar thumbnail image for use in legend from the given color
// palette.
function makeColorBarParams(palette) {
  return {
    bbox: [0, 0, 1, 0.1],
    dimensions: '100x10',
    format: 'png',
    min: 0,
    max: 1,
    palette: palette,
  };
}

// Create the color bar for the legend.
var colorBar = ui.Thumbnail({
  image: ee.Image.pixelLonLat().select(0),
  params: makeColorBarParams(vis.palette),
  style: {stretch: 'horizontal', margin: '0px 8px', maxHeight: '24px'},
});

// Create a panel with three numbers for the legend.
var legendLabels = ui.Panel({
  widgets: [
    ui.Label(vis.min, {margin: '4px 8px'}),
    ui.Label(
        ((vis.max-vis.min) / 2+vis.min),
        {margin: '4px 8px', textAlign: 'center', stretch: 'horizontal'}),
    ui.Label(vis.max, {margin: '4px 8px'})
  ],
  layout: ui.Panel.Layout.flow('horizontal')
});

var legendTitle = ui.Label({
  value: 'Map Legend: median 2017 ocean temp (C)',
  style: {fontWeight: 'bold'}
});

// Add the legendPanel to the map.
var legendPanel = ui.Panel([legendTitle, colorBar, legendLabels]);
Map.add(legendPanel);

Code Editor script

Answer 2

Probably you can use the open available gena packages:

https://code.earthengine.google.com/0eb05a522875a71ae87165a2ed830c7f

There is an example given of a color-map and scale bar

Answer 3

I realise this is an old post that has been answered, but as the top answer doesn't give a stepped colourbar just as @Nazmul Ahasan posed, I gave myself a go of it while trying to find the answer myself.

This Code creates 3 legends for the DEM:

1 - A Horizontal, Stepped Colourbar, with the a defined Minimum, 1/2, and Maximum Values. This one is difficult to reposition (i.e. I couldn't figure out how to move its position). Source: Customizing a continuous legend in Google Earth Engine

2 - A Vertical, Stepped Colourbar, again with the same Min/Max. This can have its position changed very easily, i.e. bottom-left, top-center, etc... This one I haven't quite figured out how to add mid-point labels, but the code from Legend one can give someone a hint. This combines the steps of Legend 1, but in the vertical orientation of Legend 3.

3 - A Vertical, Gradient Colourbar, again with Min/Max values and easily repositionable. Source: https://mygeoblog.com/2017/03/02/creating-a-gradient-legend/ , via Creating a vertical color bar in Google Earth Engine

These have been collated from various sources (included in the code below and in the GEE code link) and integrated into one example so anyone can see how they work.

I'm very new to GEE and .js in general so the code could definitely be better, but this should cover it enough that someone more experienced could improve upon them. Each Legend section is self-contained (i.e. Legend 2 duplicates much of the same code as Legend 3, with a few changes to have steps instead of a gradeint) so you could copy whichever style you want without having to hunt through the code for the right parts.

// Pull the package from the GitHub repo which stores colour palettes to be used in GEE
// See https://github.com/gee-community/ee-palettes for more info
var palettes = require('users/gena/packages:palettes');
var HSpalette = palettes.niccoli.cubicl[7];

// Define region of interest
var regionOfInterest = ee.FeatureCollection("FAO/GAUL/2015/level0").filter(ee.Filter.eq('ADM0_NAME', 'Switzerland'));

// Image of interest
var img = ee.Image("WWF/HydroSHEDS/03VFDEM").clip(regionOfInterest);

// Centre the Map on the RoI
Map.centerObject(regionOfInterest,8);


var visParam = {
        min: 116,
        max: 4420,
        palette: HSpalette
        };

//Adds the DEM Layer to the map with the visualisation parameters
Map.addLayer(img, visParam, "Switzerland DEM");

// Legend Stuff

//LEGEND VERSION 1 (Horizontal, Centered, position is not easily changed)
// Source: https://gis.stackexchange.com/questions/421937/customizing-a-continuous-legend-in-google-earth-engine

// Creates a 7-step color bar thumbnail image for use in legend from the given color palette
function makeColorBarParams(palette) {
  return {
    bbox: [0, 0, 7, 0.1],
    dimensions: '100x10',
    format: 'png',
    min: 0,
    max: 7,
    palette: HSpalette,
  };
}

// Create the colour bar for the legend
var colorBar = ui.Thumbnail({
  image: ee.Image.pixelLonLat().select('longitude').int(),
  params: makeColorBarParams(visParam.palette),
  style: {position: 'bottom-left', stretch: 'horizontal', margin: '0px 8px', maxHeight: '24px'},
});

// Create a panel with three numbers for the legend
var legendLabels = ui.Panel({
  widgets: [
    ui.Label(visParam.min, {margin: '4px 8px'}),
    ui.Label(
        ((visParam.max-visParam.min) / 2+visParam.min),
        {margin: '4px 8px', textAlign: 'center', stretch: 'horizontal'}),
    ui.Label(visParam.max, {margin: '4px 8px'})
  ],
  layout: ui.Panel.Layout.flow('horizontal')
});

// Legend title
var legendTitle = ui.Label({
  value: 'Legend 1 - Height (m)',
  style: {fontWeight: 'bold'}
});

// Add the legendPanel to the map
var legendPanel = ui.Panel([legendTitle, colorBar, legendLabels]);
Map.add(legendPanel);

// LEGEND VERSION 2 (Vertical, Stepped, position can be changed intuitively)

// Creates a 7-step color bar thumbnail image for use in legend from the given color palette
function makeColorBarParams2(palette) {
  return {
    bbox: [7, 0, 0, 8],
    dimensions: '10x196',
    format: 'png',
    min: 0,
    max: 7,
    palette: HSpalette,
  };
}
// set position of panel
var legendpos = ui.Panel({
  style: {
    position: 'bottom-left',
    padding: '8px 15px'
  }
});
 
 
// Create legend title
var legendTitle2 = ui.Label({
  value: 'Legend 2 - Height (m)',
  style: {
    fontWeight: 'bold',
    fontSize: '16px',
    margin: '0 0 4px 0',
    padding: '0'
    }
});

 // Add the title to the panel
legendpos.add(legendTitle2); 

// create text on top of legend
var panel = ui.Panel({
    widgets: [
      ui.Label(visParam['max'])
    ],
  });

legendpos.add(panel);
  
// create thumbnail from the image
var thumbnail = ui.Thumbnail({
  image: ee.Image.pixelLonLat().select('latitude').int(),
  params: makeColorBarParams2(visParam.palette),
  style: {position: 'bottom-center', stretch: 'vertical', margin: '0px 8px', maxHeight: '200px'}
  //style: {padding: '1px', position: 'bottom-center'}
});

// add the thumbnail to the legend
legendpos.add(thumbnail);

// create text on bottom of legend
var panel2 = ui.Panel({
    widgets: [
      ui.Label(visParam['min'])
    ],
  });

legendpos.add(panel2);

Map.add(legendpos);

//LEGEND 3 (Vertical, Gradient, position can be changed intuitvely)
//Source: https://mygeoblog.com/2017/03/02/creating-a-gradient-legend/
// set position of panel
var legendpos3 = ui.Panel({
  style: {
    position: 'bottom-right',
    padding: '8px 15px'
  }
});
 
// Create legend title
var legendTitle3 = ui.Label({
  value: 'Legend 3 - Height (m)',
  style: {
    fontWeight: 'bold',
    fontSize: '16px',
    margin: '0 0 4px 0',
    padding: '0'
    }
});

 // Add the title to the panel
legendpos3.add(legendTitle3); 

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

// create text on top of legend
var panel3 = ui.Panel({
    widgets: [
      ui.Label(visParam['max'])
    ],
  });

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

// add the thumbnail to the legend
legendpos3.add(thumbnail3);

// create text on top of legend
var panel4 = ui.Panel({
    widgets: [
      ui.Label(visParam['min'])
    ],
  });

legendpos3.add(panel4);

Map.add(legendpos3);