1

I want to create a grid of 4 NDVI maps from different dates with the same parameters so I can check variance over a period

I tried to change an example named 'Linked Maps' in User Interface folder in order to do so, but I only get 4 empty maps without any layers I still need to use inspector to see the NDVI value in each map (once I click a point in a map) in order to adjust the visualisation paramters for all the maps

var img1 = ee.Image('COPERNICUS/S2/20180302T081839_20180302T083044_T36SYB');
var img2 = ee.Image('COPERNICUS/S2/20180307T081801_20180307T081804_T36SYB');
var img3 = ee.Image('COPERNICUS/S2/20180312T081729_20180312T082903_T36SYB');
var img4 = ee.Image('COPERNICUS/S2/20180317T081651_20180317T082118_T36SYB');

var img1_ndvi = img1.normalizedDifference(['B8','B4']);
var img2_ndvi = img2.normalizedDifference(['B8','B4']);
var img3_ndvi = img3.normalizedDifference(['B8','B4']);
var img4_ndvi = img4.normalizedDifference(['B8','B4']);

var IMAGES = [ 'img1_ndvi',
              'img2_ndvi', 
              'img3_ndvi', 
              'img4_ndvi'];

var NAMES = ['Last NDVI Image',
             'Second last',
             'Third last', 
             'Four last'];

var vis_params = {min: 0.1, max: 0.6, palette: 'FFFFFF, CE7E45, DF923D,     F1B555, FCD163, 99B718, 74A901, 66A000, 529400,' +
    '3E8601, 207401, 056201, 004C00, 023B01, 012E01, 011D01, 011301'};

var maps = [];
IMAGES.forEach(function(image, name, index) {
  var map = ui.Map();
  map.add(ui.Label(name));
  map.addLayer(IMAGES[index], vis_params, name);
  map.setControlVisibility(false);
  maps.push(map);
});

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 title.
var title = ui.Label('NDVI maps for the Last 4 Images', {
  stretch: 'horizontal',
  textAlign: 'center',
  fontWeight: 'bold',
  fontSize: '16px'
});
// 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'}
);
// Add the maps and title to the ui.root.
ui.root.widgets().reset([title, mapGrid]);
ui.root.setLayout(ui.Panel.Layout.Flow('vertical'));
maps[0].setCenter(35.07, 31.8, 6);
1

Two things I spotted:

1) In your array IMAGES you use strings for the names of the images, but those are not automatically cast to the objects - use the variable names directly.

2) It's easier if you loop over the NAMES list, like in the example.

Working version of your code:

https://code.earthengine.google.com/a12bf01f9231c36bfbb13c022887f0ad

var img1 = ee.Image('COPERNICUS/S2/20180302T081839_20180302T083044_T36SYB');
var img2 = ee.Image('COPERNICUS/S2/20180307T081801_20180307T081804_T36SYB');
var img3 = ee.Image('COPERNICUS/S2/20180312T081729_20180312T082903_T36SYB');
var img4 = ee.Image('COPERNICUS/S2/20180317T081651_20180317T082118_T36SYB');

var img1_ndvi = img1.normalizedDifference(['B8','B4']);
var img2_ndvi = img2.normalizedDifference(['B8','B4']);
var img3_ndvi = img3.normalizedDifference(['B8','B4']);
var img4_ndvi = img4.normalizedDifference(['B8','B4']);

var IMAGES = [ img1_ndvi,
              img2_ndvi, 
              img3_ndvi, 
              img4_ndvi];

var NAMES = ['Last NDVI Image',
             'Second last',
             'Third last', 
             'Four last'];

var vis_params = {min: 0.1, max: 0.6, palette: 'FFFFFF, CE7E45, DF923D,     F1B555, FCD163, 99B718, 74A901, 66A000, 529400,' +
    '3E8601, 207401, 056201, 004C00, 023B01, 012E01, 011D01, 011301'};

var maps = [];
NAMES.forEach(function(name, index) {
  var map = ui.Map();
  map.add(ui.Label(name));
  map.addLayer(IMAGES[index], vis_params, name);
  map.setControlVisibility(false);
  maps.push(map);
});

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 title.
var title = ui.Label('NDVI maps for the Last 4 Images', {
  stretch: 'horizontal',
  textAlign: 'center',
  fontWeight: 'bold',
  fontSize: '16px'
});
// 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'}
);
// Add the maps and title to the ui.root.
ui.root.widgets().reset([title, mapGrid]);
ui.root.setLayout(ui.Panel.Layout.Flow('vertical'));
maps[0].setCenter(35.07, 31.8, 6);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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