Google-Earth-Engine – How to Refresh Layers and UI Elements in Google Earth Engine App

google-earth-enginegoogle-earth-engine-javascript-api

I want to create a Google Earth Engine app. When a user selects something from the dropdown element and clicks on the load button I want it to load that particular layer and its label displayed on map.

The problem I am facing is that when user clicks on Display button again and again, it loads the same layer number of times the button is clicked. Also, I want to hide the other layers that were loaded first when any other element from the list is selected.

This is my code https://code.earthengine.google.com/882a81c42e593ddaa8461e65b98f269c

var srtm = ee.Image("USGS/SRTMGL1_003");
var modis_ndvi = ee.ImageCollection("MODIS/061/MOD13A2").first();
// Select Element
var variables = ['SRTM','MODIS NDVI'];
var Selector = ui.Select({
  items: variables,
  placeholder: 'Select',
  style:{position: 'top-left', width:'150px'}
  })

var button = ui.Button({
  label:'Display',
  style: {margin:'15px 0 0 0'},
})
var panel_selector = ui.Panel({
    widgets: [Selector, button],
    layout: ui.Panel.Layout.Flow('horizontal'),
    style: {position: 'top-right'},
  });
Map.add(panel_selector)

var loadComposite = function() {
  var gv = Selector.getValue();
  if(gv=="SRTM"){
  Map.addLayer(srtm,{min:200, max:4000, palette:['yellow','orange','red']},'SRTM');
  var label_srtm = ui.Label({value:'SRTM 30m'})
  Map.add(label_srtm)
  }
  else if(gv=="MODIS NDVI"){
    Map.addLayer(modis_ndvi,{},'MODIS NDVI');
    var label_modis = ui.Label({value:'MODIS 1NDVI km'})
    Map.add(label_modis)
  }
  
};

button.onClick(loadComposite);

How to fix it?

I have tried ui.root.clear and but that hides everything

Best Answer

Use Map.clear() which will clear all previously loaded layers.

Related Solutions

Google Earth Engine – Exporting Image from App-Side using Google Earth Engine

You can use the getDownloadURL() image method to print a download URL to a ui.Label element. The following snippet is a complete example. Note that this should only be used to download small regions, it is not intended for large-scale data distribution applications.

/**
 * @license
 * Copyright 2019 Google LLC.
 * SPDX-License-Identifier: Apache-2.0
 */

// Import an image and display it to the Map.
var img = ee.Image('LANDSAT/LC08/C01/T1_SR/LC08_044034_20140318');
var imgVis = {bands: ['B6', 'B5', 'B4'], min: 500, max: 3000};
Map.centerObject(img, 12);
Map.addLayer(img, imgVis, 'Image');

// Define a function to generate a download URL of the image for the
// viewport region. 
function downloadImg() {
  var viewBounds = ee.Geometry.Rectangle(Map.getBounds());
  var downloadArgs = {
    name: 'ee_image',
    crs: 'EPSG:5070',
    scale: 30,
    region: viewBounds.toGeoJSONString()
 };
 var url = img.getDownloadURL(downloadArgs);
 urlLabel.setUrl(url);
 urlLabel.style().set({shown: true});
}

// Add UI elements to the Map.
var downloadButton = ui.Button('Download viewport', downloadImg);
var urlLabel = ui.Label('Download', {shown: false});
var panel = ui.Panel([downloadButton, urlLabel]);
Map.add(panel);

Code Editor link

google-earth-engine – How to Fix Selected Layers Not Updating in Google Earth Engine

In order to make the dropdown lists work; you can use the next solution:

Create image dictionary
Create function to get image from image collection (where the collection includes your two images)
Create left and right map displaying a default image.
Create function to change map.

This is my code:

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

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

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

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

var S2021 = ee.ImageCollection('COPERNICUS/S2_SR')
                  .filterDate('2021-01-01', '2021-12-30')
                  .filterBounds(geometry)
                  // Pre-filter to get less cloudy granules.
                  .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE',15))
                  .map(maskS2clouds);
                  
var S2020 = ee.ImageCollection('COPERNICUS/S2_SR')
                  .filterDate('2020-01-01', '2020-12-30')
                  .filterBounds(geometry)
                  // Pre-filter to get less cloudy granules.
                  .filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE',15))
                  .map(maskS2clouds);                  
                  
/*var S2021_style = {
  min: 0.0,
  max: 0.3,
  bands: ['B4', 'B3', 'B2'],
};

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

Map.setCenter(103.804, 1.3714, 12); */

// create image dictionary
var images = {
  '2020': getImage(0),
  '2021': getImage(1),
};

// --------------Function to get image from image collection --------------------
function getImage(number) {
  number = ee.Number(number)
  var collection = ee.ImageCollection([S2020.mean(), S2021.mean()]) // collection of images
  var listOfImages = collection.toList(collection.size()); // list of images
  var image = ee.Image(listOfImages.get(number)); // get individual image
  return image.visualize({bands: ['B4', 'B3', 'B2'], max: 0.3}); //style
}

/*
Map.addLayer(S2021.mean(), S2021_style, '2021');
Map.addLayer(S2020.mean(), S2020_style, '2020');

var leftMap = ui.Map()
var rightMap = ui.Map()

var S2021_img = ui.Map.Layer(S2021.mean(),S2021_style)
var S2020_img = ui.Map.Layer(S2020.mean(),S2020_style)

var S2021_layer = leftMap.layers()
var S2020_layer = rightMap.layers()

S2021_layer.add(S2021_img)
S2020_layer.add(S2020_img)

var S2021_label = ui.Label('Sentinel 2021')
S2021_label.style().set('position', 'bottom-left')

var S2020_label = ui.Label('Sentinel 2020')
S2020_label.style().set('position', 'bottom-right')

leftMap.add(S2021_label)
rightMap.add(S2020_label)
*/
//---------------- Create the left map, and have it display layer 0.
var leftMap = ui.Map();
leftMap.setControlVisibility(false);
var leftSelector = addLayerSelector(leftMap, 0, 'top-left');

//----------------- Create the right map, and have it display layer 1.
var rightMap = ui.Map();
rightMap.setControlVisibility(false);
var rightSelector = addLayerSelector(rightMap, 1, 'top-right');

//----- Adds a layer selection widget to the given map, to allow users to change
//----- which image is displayed in the associated map.
function addLayerSelector(mapToChange, defaultValue, position) {
  var label = ui.Label('Select image');

  // This function changes the given map to show the selected image.
  function updateMap(selection) {
    mapToChange.layers().set(0, ui.Map.Layer(images[selection]));
  }

  // Configure a selection dropdown to allow the user to choose between images,
  // and set the map to update when a user makes a selection.
  var select = ui.Select({items: Object.keys(images), onChange: updateMap});
  select.setValue(Object.keys(images)[defaultValue], true);

  var controlPanel =
      ui.Panel({widgets: [label, select], style: {position: position}});

  mapToChange.add(controlPanel);
}

var splitPanel = ui.SplitPanel ({
  firstPanel: leftMap,
  secondPanel: rightMap,
  orientation: 'horizontal',
  wipe: true
})

ui.root.clear()

ui.root.add(splitPanel)

var linkPanel = ui.Map.Linker([leftMap, rightMap])

// ----------set center using left map
leftMap.setCenter(103.804, 1.3714, 12);

Best Answer

Related Solutions

Google Earth Engine – Exporting Image from App-Side using Google Earth Engine

google-earth-engine – How to Fix Selected Layers Not Updating in Google Earth Engine

Related Question