I want to show the band compositions of sentinel-2 (i.e. 4 linked maps) in different years. However, can anyone give me a clue on how to add the panel of slider onto the split maps?

Here is the codes: https://code.earthengine.google.com/475585174fe8971bff87bb822ddc770c

The code is shown below:

// Display a grid of linked maps in different years

// A helper function to show the image for a given year on the default map.
var showLayer = function(year) {

year = ee.Number(year)

var startdate = ee.Date.fromYMD(year,9,1);
var enddate = ee.Date.fromYMD(year,9,30);

// Create an initial mosiac, which we'll visualize in a few different ways.
var image = ee.ImageCollection('COPERNICUS/S2')
    .filterDate(startdate, enddate)
    // Scale the images to a smaller range, just for simpler visualization.
    .map(function f(e) { return e.divide(10000); })

// Each map has a name and some visualization parameters.
var MAP_PARAMS = {
  'Natural Color (B4/B3/B2)': ['B4', 'B3', 'B2'],
  'Land/Water (B8/B11/B4)': ['B8', 'B11', 'B4'],
  'Color Infrared (B8/B4/B3)': ['B8', 'B4', 'B3'],
  'Vegetation (B12/B11/B4)': ['B12', 'B12', 'B4']

// Shared visualization parameters for the images.
function getVisualization(bands) {
  return {gamma: 1.3, min: 0, max: 0.3, bands: bands};

 * Configure maps, link them in a grid

// Create a map for each visualization option.
var maps = [];
Object.keys(MAP_PARAMS).forEach(function(name) {
  var map = ui.Map();
  map.addLayer(image, getVisualization(MAP_PARAMS[name]), name);

var linker = ui.Map.Linker(maps);

// Enable zooming on the top-left map.
maps[0].setControlVisibility({zoomControl: true});

// Show the scale (e.g. '500m') on the bottom-right map.
maps[3].setControlVisibility({scaleControl: true});

// Create a grid of maps.
var mapGrid = ui.Panel(
      ui.Panel([maps[0], maps[1]], null, {stretch: 'both'}),
      ui.Panel([maps[2], maps[3]], null, {stretch: 'both'})
    ui.Panel.Layout.Flow('horizontal'), {stretch: 'both'});

// Center the map at an interesting spot in Greece. All
// other maps will align themselves to this parent map.
maps[0].setCenter(21.2712, 38.4151, 12);

 * Add a title and initialize

// Create a title.
var title = ui.Label('September 2018 Sentinel-2 Visualizations', {
  stretch: 'horizontal',
  textAlign: 'center',
  fontWeight: 'bold',
  fontSize: '24px'

// Add the maps and title to the ui.root.
ui.root.widgets().reset([title, mapGrid]);

// Create a label and slider.
var label = ui.Label('Select Year');
var slider = ui.Slider({
  min: 2016,
  max: 2019,
  step: 1,
  onChange: showLayer,
  style: {stretch: 'horizontal'}

// Create a panel that contains both the slider and the label.
var panel = ui.Panel({
  widgets: [label, slider],
  layout: ui.Panel.Layout.flow('vertical'),
  style: {
    position: 'top-right',
    padding: '7px'


// How to add panel to the Map (i.e. right after the title) ?? 

// Set default values on the slider and map.
  • 2
    Could you please add your code as part of the question, rather than an external link. If the link becomes invalid, the code will stay here and help other people. Commented Feb 24, 2020 at 21:38
  • Sure! The code is shown below:
    – Mars
    Commented Feb 26, 2020 at 21:28

1 Answer 1


You need to add the panel of the slider to the widgets' list

// Add the maps and title to the ui.root.
ui.root.widgets().reset([title, panel, mapGrid]);

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.