2

I am exploring the User Interface tools in Google Earth Engine and using them to make time-series charts of vegetation information upon map clicks.

When I run the code, the first time, everything works as expected and I am able to click the map and produce graphs. Then if I was to change something in the code and click run again, I am left with a white screen until I click Run again.

Why do you have to click run twice? This is not really an issue currently but I am imagining a scenario down the road where a similar script is incorporated in an app where it may cause problems for users.

My code is pasted below but the same will happen with the example script provided in the Earth Engine Code editor that I used as a guide, see link.

https://code.earthengine.google.com/276556d172aae00d653f8e60c8e942d6

// // Development script for inspecting TC and NDVI timeseries for MT HUC08 waterheds

// watershed name
var shed = 'Shields'

// Define a mask to clip the timeseries data by.
var mask = ee.FeatureCollection("USGS/WBD/2017/HUC08").filterMetadata('name','equals',shed);

var startDate = '2013-05-01' // set start date
var endDate = '2018-05-31' // set end date
var cloudMax = 5 // set max percentage of clouds per scene

var l8 = ee.ImageCollection("LANDSAT/LC08/C01/T1_TOA")
  .filter(ee.Filter.lt('CLOUD_COVER', cloudMax))
  .filterBounds(mask)
  .filterDate(startDate,endDate);
// print(l8,'l8');

// create and map a function to add TC bands to images in the collection, keep all bands
var withTCT = l8.map(function(image) {

  var tcBands = image
    .select(['B1','B2','B3','B4','B5','B6','B7'])
    .rename(['CSTL','BLU','GRN','RED','NIR','SWIR1','SWIR2'])
    .clip(mask);

  // Create an Array of Tasseled Cap coefficients for LS8. (Li et al., 2016)
  var coefficients = ee.Array([
    [0.2540, 0.3037, 0.3608, 0.3564, 0.7084, 0.2358, 0.1691], // brightness
    [-0.2578, -0.3064, -0.3300, -0.4325, 0.6860, -0.0383, -0.2674], // greenness
    [0.1877, 0.2097, 0.2038, 0.1017, 0.0685, -0.7460, -0.5548] // wetness
  ]);

  // Make an Array Image, with a 1-D Array per pixel.
  var arrayImage1D = tcBands.toArray();

  // Make an Array Image with a 2-D Array per pixel, 6x1.
  var arrayImage2D = arrayImage1D.toArray(1);

  // Do a matrix multiplication: 6x6 times 6x1.
  var componentsImage = ee.Image(coefficients)
    .matrixMultiply(arrayImage2D)
  // Get rid of the extra dimensions.
    .arrayProject([0])
    .arrayFlatten(
      [['brightness', 'greenness', 'wetness']]);

  return tcBands.addBands(componentsImage);
});
// print(withTCT, 'withTCT');

// create and map a function to add NDVI band to images in collection, keep only NDVI
var ndviCol = l8.map(function(image) {
  return image.select().addBands(image.normalizedDifference(['B5', 'B4'])); // // NOTE THIS clever trick to only select the new ndvi band
});
// print(ndviCol,'ndvi')

// Display the first three bands of the imagery as median composite
var vizImage = l8.median().clip(mask);
Map.centerObject(mask,10);
Map.addLayer(vizImage, {bands: ['B4', 'B3', 'B2'], min: 0, max: 0.5}, 'image');

// Create new collection of just the TC bands
var tcCol = withTCT.select(['brightness','greenness','wetness']);
print(tcCol, 'tcCollection');

// Create a panel to hold our widgets.
var panel = ui.Panel();
panel.style().set({
  width: '300px'
});

// Create an intro panel with labels.
var intro = ui.Panel([
  ui.Label({
    value: 'Taselled Cap/NDVI Inspector',
    style: {fontSize: '20px', fontWeight: 'bold'}
  }),
  ui.Label('Click a point on the map to inspect.')
]);
panel.add(intro);

// Create panels to hold lon/lat values.
var lon = ui.Label();
var lat = ui.Label();
panel.add(ui.Panel([lon, lat], ui.Panel.Layout.flow('horizontal')));

// Register a callback on the default map to be invoked when the map is clicked.
Map.onClick(function(coords) {
  // Update the lon/lat panel with values from the click event.
  lon.setValue('lon: ' + coords.lon.toFixed(2)),
  lat.setValue('lat: ' + coords.lat.toFixed(2));

  // Add a red dot for the point clicked on.
  var point = ee.Geometry.Point(coords.lon, coords.lat);
  var dot = ui.Map.Layer(point, {color: 'FF0000'});
  Map.layers().set(1, dot);

  // Create an NDVI chart.
  var ndviChart = ui.Chart.image.series(ndviCol, point, ee.Reducer.mean(), 500);
  ndviChart.setOptions({
    title: 'NDVI Over Time',
    vAxis: {title: 'NDVI'},
    hAxis: {title: 'date', format: 'YYYY', gridlines: {count: 7}},
  });
  panel.widgets().set(2, ndviChart);

  // Create TC 3-band chart.
  var tcChart = ui.Chart.image.series(tcCol, point)
      .setOptions({
        title: 'Taselled Cap Components Over Time',
        vAxis: {title: 'band value'},
        hAxis: {title: 'date', format: 'YYYY', gridlines: {count: 7}},
      });
  panel.widgets().set(3, tcChart);
});

Map.style().set('cursor', 'crosshair');

// Add the panel to the ui.root.
ui.root.insert(0, panel);

1 Answer 1

2

In general, running a script twice should do the same thing each time. Therefore, the behavior you are observing is a bug.

I have confirmed it myself and reported it.

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.