Google Earth Engine is a cloud-based platform for planetary-scale geospatial analysis that brings Google’s massive computational capabilities to bear on a variety of high-impact societal issues including deforestation, drought, disaster, disease, food security, water management, climate monitoring and environmental protection.
Gorelick et al. (2017)
Although GEE doesn’t have a lot of flexibility in displaying your map, you could play around with the palette to make your map look attractive. I addition, you could add “Title” and “Legends” and make your make look good. However, you cannot export and share your map. Only, thing you could do is take a screenshot of your map and share it.
In this tutorial, we will learn to add the legends to our map.
Data Used
The Global Multi-resolution Terrain Elevation Data 2010 (GMTED2010) dataset contains elevation data for the globe collected from various sources. The version of the dataset available here is Breakline Emphasis, 7.5 arc-seconds resolution. Breakline emphasis maintains the critical topographic features (streams or ridges) within the landscape by maintaining any minimum elevation or maximum elevation value on a breakline that passes within the specified analysis window. More details are available in the dataset report.
The primary source dataset for GMTED2010 is NGA’s SRTM Digital Terrain Elevation Data (DTED®, http://www2.jpl.nasa.gov/srtm/) (void-filled) 1-arc-second data. For the geographic areas outside the SRTM coverage area and to fill in remaining holes in the SRTM data, the following sources were used: non-SRTM DTED®, Canadian Digital Elevation Data (CDED) at two resolutions, Satellite Pour l’Observation de la Terre (SPOT 5) Reference3D, National Elevation Dataset (NED) for the continental United States and Alaska, GEODATA 9 second digital elevation model (DEM) for Australia, an Antarctica satellite radar and laser altimeter DEM, and a Greenland satellite radar altimeter DEM.
Here is the code:
var countries = ee.FeatureCollection("ft:1tdSwUL7MVpOauSgRzqVTOwdfy17KDbw-1d9omPw")
var country_name = ['Russia']
var country = countries.filter(ee.Filter.inList('Country', country_name));
Map.centerObject(country,3); //Zoom to Study area
var image = ee.Image().toByte()
//.paint(roi, 'fill') // Get color from property named 'fill'
.paint(country, 2, 2); // Outline using color 3, width 5.
Map.addLayer(image, {palette: ['000000', '000000', '000000', '000000'], max: 0.5, opacity: 0.9,},"Boundary of "+country_name);
// Load a global elevation image.
var elev = ee.Image('USGS/GMTED2010')
// Add the elevation to the map.
Map.addLayer(elev, {}, 'elevation b/w');
// Use the terrain algorithms to compute a hillshade with 8-bit values.
var shade = ee.Terrain.hillshade(elev);
var clipped = shade.clipToCollection(country);
// Map.addLayer(shade, {}, 'hillshade', false);
// Create a "sea" variable to be used for cartographic purposes
var sea = elev.lte(0);
//Map.addLayer(sea.mask(sea), {palette:'000022'}, 'sea', false);
// Create a custom elevation palette from hex strings.
var elevationPalette = ['FAFDFB','061E84', '1BB747','F0CA0E', 'F07B0E', 'F90B04'];
// Use these visualization parameters, customized by location.
var visParams = {min: -200, max: 1000, palette: elevationPalette};
// Create a mosaic of the sea and the elevation data
var visualized = ee.ImageCollection([
// Mask the elevation to get only land
elev.mask(sea.not()).visualize(visParams),
// Use the sea mask directly to display sea.
sea.mask(sea).visualize({palette:'000022'})
]).mosaic();
// Convert the visualized elevation to HSV, first converting to [0, 1] data.
var hsv = visualized.divide(255).rgbToHsv();
// Select only the hue and saturation bands.
var hs = hsv.select(0, 1);
// Convert the hillshade to [0, 1] data, as expected by the HSV algorithm.
var v = shade.divide(255);
// Create a visualization image by converting back to RGB from HSV.
// Note the cast to byte in order to export the image correctly.
var rgb = hs.addBands(v).hsvToRgb().multiply(255).byte();
Map.addLayer(rgb.clip(country), {}, 'Elevation of '+country_name);
// Add checkbox//
var checkbox = ui.Checkbox('Boundary of '+country_name, true);
checkbox.onChange(function(checked) {
// Shows or hides the first map layer based on the checkbox's value.
Map.layers().get(0).setShown(checked);
});
Map.add(checkbox);
/************************ legend ****************************/
var names = [
'Elevation -100 - 0m',
'Elevation 0 - 200m',
'Elevation 200 - 400m',
'Elevation 400 - 600m',
'Elevation 600 - 800m',
'Elevation 800 - 1000m',
];
var values = [
'1',
'2',
'3',
'4',
'5',
'6'
];
var elevationPalette = ['FAFDFB','061E84', '1BB747','F0CA0E', 'F07B0E', 'F90B04'];
// set position of panel
var legend = ui.Panel({
style: {
position: 'bottom-left',
padding: '8px 15px'
}
});
// Create legend title
var legendTitle = ui.Label({
value: 'Elevation Legend of '+country_name,
style: {
fontWeight: 'bold',
fontSize: '18px',
margin: '0 0 4px 0',
padding: '0'
}
});
// Add the title to the panel
legend.add(legendTitle);
var makeRow = function(color, name) {
// Create the label that is actually the colored box.
var colorBox = ui.Label({
style: {
backgroundColor: '#' + color,
// Use padding to give the box height and width.
padding: '8px',
margin: '0 0 4px 0'
}
});
// Create the label filled with the description text.
var description = ui.Label({
value: name,
style: {margin: '0 0 4px 6px'}
});
// return the panel
return ui.Panel({
widgets: [colorBox, description],
layout: ui.Panel.Layout.Flow('horizontal')
});
};
// Add color and and names
for (var i = 0; i < 6; i++) {
legend.add(makeRow(elevationPalette[i], names[i]));
}
// Add the legend to the map.
Map.add(legend);

Pingback: Earth Engine App: Take your GEE expertise to next level. – DINESH SHRESTHA
Pingback: Develop a Harmonic Model: Original vs Fitted NDVI values (Study Area: Thailand) – DINESH SHRESTHA
Pingback: Using Hansen Global Forest Change Data to determine Forest Cover, Forest Gain, and Forest Loss (Study Area: Malaysia) – DINESH SHRESTHA
Pingback: Make your map look Artistic – Add Grid Lines in your Map (Study Area: Canada) – DINESH SHRESTHA
Pingback: Night Light Maps (Study Area: South Asia) – DINESH SHRESTHA
Pingback: How to generate Histogram in Google Earth Engine? – DINESH SHRESTHA
Pingback: Using 2001 MODIS Land Cover Type Yearly Global 500m Data to Determine the Land-Cover Analysis (Study Area: Mexico) – DINESH SHRESTHA
Pingback: Learn How to Add two charts next to the map to interactively display a time-series of NDVI and reflectance for each click on the map? – DINESH SHRESTHA
Pingback: Create a Chart to show Landsat 8 TOA Spectra at three points near Mumbai City – DINESH SHRESTHA
Pingback: Learn how to calculate and export 90th Percentile Annual NDVI for years 1985-2019 using Landsat 8, 7, and 5 scenes (Study Area: Turkey) – DINESH SHRESTHA
Pingback: Use 2018 Landsat 8 Scenes for Land Cover Classification in Google Earth Engine (Study Area: Dubai) – DINESH SHRESTHA
Pingback: Land Cover Change Analysis between 1999 and 2018 in GEE (Study Area: Mumbai) – DINESH SHRESTHA
Pingback: Time-lapse: Animate 30m Landsat images generated 90th percentile Annual NDVI from 1999 to 2018 (Study Area: South America) – DINESH SHRESTHA
// Note the cast to byte in order to export the image correctly.
var rgb = hs.addBands(v).hsvToRgb().multiply(255).byte();
Map.addLayer(rgb.clip(country), {}, ‘Elevation of ‘+country_name);
Can kindly describe the this line of code sir
yours thankfully
Hi Arnab,
I am sorry for not getting back to you in time. I am happy to help. Please let me know what part of it you didn’t understand. Should you like to discuss in detail, you could email me at dinesh.shrestha015@gmail.com
I appreciate that you are learning from my blogs! Keep learning.