I created a small script with 4 linked maps. Each shows a different visualization. map4 should show the calculated NDVI. But it doesnt work. The viz will not show. Anyone who know where's my mistake?

function maskS2clouds(image) {
  var qa = image.select('QA60');

  // Bits 10 and 11 are clouds and cirrus, respectively.
  var cloudBitMask = 1 << 10;
  var cirrusBitMask = 1 << 11;

  // Both flags should be set to zero, indicating clear conditions.
  var mask = qa.bitwiseAnd(cloudBitMask).eq(0)

  return image.updateMask(mask).divide(10000);

// Map the function over one year of data and take the median.
// Load Sentinel-2 TOA reflectance data.
var dataset = ee.ImageCollection('COPERNICUS/S2')
                  .filterDate('2018-01-01', '2018-06-30')
                  // Pre-filter to get less cloudy granules.
                  .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 20))

var rgbVis = {
  min: 0.0,
  max: 0.3,
  bands: ['B4', 'B3', 'B2'],

var image = ee.Image(

var ndvi = image.normalizedDifference(['B5', 'B4']).rename('NDVI');
var ndviParams = {min: -1, max: 1, palette: ['blue', 'white', 'green']};

var falseColor = {
  min: 0.0,
  max: 0.3,
  bands: ['B12', 'B11', 'B4'],

var vegetationHealth = {
  min: 0.0,
  max: 0.3,
  bands: ['B8', 'B11', 'B2'],

// Create a map for each visualization option.
var map1 = ui.Map()
map1.add(ui.Label('True Color'))
map1.addLayer(dataset.median(), rgbVis, 'RGB')

var map2 = ui.Map()
map2.add(ui.Label('False Color (Urban)'))
map2.addLayer(dataset, falseColor, 'False Color (Urban)')

var map3 = ui.Map()
map3.add(ui.Label('Healthy Vegetation'))
map3.addLayer(dataset, vegetationHealth, 'Healthy Vegetation')

var map4 = ui.Map()
map4.addLayer(ndvi, ndviParams, 'NDVI')

var linker = ui.Map.Linker([map1, map2, map3, map4]);

// Enable zooming on the top-left map.
map1.setControlVisibility({zoomControl: true});

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

// Create a grid of maps.
var mapGrid = ui.Panel(
      ui.Panel([map1, map2], null, {stretch: 'both'}),
      ui.Panel([map3, map4], 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.
map1.setCenter(-9.1695, 38.6917, 12);

 * Add a title and initialize

// Create a title.
var title = ui.Label('Title', {
  stretch: 'horizontal',
  textAlign: 'center',
  fontWeight: 'bold',
  fontSize: '24px'

var desc = ui.Label('Description', {
  stretch: 'horizontal',
  textAlign: 'center',
  fontWeight: 'normal',
  fontSize: '16px'

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

1 Answer 1


I suspect your issue is this line:

var image = ee.Image(

This reduces the Image Collection down to a single Sentinel 2 tile, which could be completely outside your study area on the other side of the world.

If you change it to var image = dataset.mosaic() you should be able to see values in map 4. If .mosaic() doesn't return satisfying results you can also think about using other reducers like .mean()

  • Thanks, this helps a lot! May 10, 2021 at 9:34

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.