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 / 2),
        {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