2

I'm trying to create a color bar on Google Earth Engine and I'm not sure which portion of the code allows a user to define whether the color bar is to be made horizontal or vertical.

This is one example of a vertical color bar that I've seen online. From here.

// 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
legend.add(legendTitle);
 
// 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: [
ui.Label(viz['max'])
],
});
 
legend.add(panel);
 
// 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
legend.add(thumbnail);
 
// create text on top of legend
var panel = ui.Panel({
widgets: [
ui.Label(viz['min'])
],
});
 
legend.add(panel);
 
Map.add(legend);

However the style of the color bar I'd like to use is more similar to the color bar seen here. Unfortunately, as a new user I can't comment for clarification on the original post. Would anyone be able to explain which portion of the following code I would need to change in order to make the color bar vertical?

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

1 Answer 1

1

I provided an extra answer to that 2nd post you cited, but I wanted to link it here to help you out.

This Code creates 3 legends for the DEM:

Legend 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

Legend 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 this post)

A visual depiction of the code linked above and written below1

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 you could improve upon it. 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 gradient) so you could copy and compare Legend 2 with Legend 3 and see what I've changed.

In short, I replaced the gradient section of your example with the steps defined by the answer to this other post.

I'm not experienced enough to tell you exactly how it works behind the scenes, but changing the latlon() instances to 'Latitude', changing the bbox values, and matching the dimensions of the function to the thumbnail's style: max height value changed it to a stepped colourbar.

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




Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.