1

I made a panel on two screens by using the code below. There is in each panel on both screens, a dates selector and a run button for calculating the NDVI and adds results to the map as a layer. However, I don't know how to modify the code so that these panels work independently on the map to which they belong. If you know, can you tell me?

var roi = ee.Geometry.Polygon(
          [[[126.7664070152438, 37.70130604607567],
            [126.7664070152438, 37.42698739064678],
            [127.18663406602505, 37.42698739064678],
            [127.18663406602505, 37.70130604607567]]], null, false);

function controlPanel(){

  var Title = ui.Label({value: 'NDVI',style: {fontWeight: 'bold', fontSize: '16px'}});

  var Year_selector = ui.Select({
    
    items: [
      {label: '2013', value: 2013},
      {label: '2014', value: 2014},
      {label: '2015', value: 2015},
      {label: '2016', value: 2016},
      {label: '2017', value: 2017},
      {label: '2018', value: 2018},
      {label: '2019', value: 2019},
      {label: '2020', value: 2020},
      {label: '2021', value: 2021},
    ],style:{width: '150px'}
  
  }).setPlaceholder('Select year...');
  
  var runButton = ui.Button({label: 'Run', style: {width: '150px'}});
  
  runButton.onClick(function (){
    
    var start_date = Year_selector.getValue() + '-01-01';
    var end_date = Year_selector.getValue() + '-12-31';
    
    var L8 = ee.ImageCollection('LANDSAT/LC08/C01/T1_SR')
            .filterBounds(roi)
            .filterDate(start_date, end_date)
            .filterMetadata('CLOUD_COVER_LAND', 'less_than', 5)
            .filter(ee.Filter.eq('WRS_PATH',116))
            .filter(ee.Filter.eq('WRS_ROW',34))
            .median();
    
    var L8 = L8.clip(roi);
    
    var nir = L8.select('B5');
    var red = L8.select('B4');
    var ndvi = nir.subtract(red).divide(nir.add(red)).rename('NDVI');

    var ndviParams = {min: -1, max: 1, palette: ['blue', 'white', 'green']};
    
    //***********************************************************************
    map1.addLayer(ndvi, ndviParams, Year_selector.getValue() +' NDVI image');
    map2.addLayer(ndvi, ndviParams, Year_selector.getValue() +' NDVI image');
    //***********************************************************************
    
  });
  
  var panel = ui.Panel({
    widgets: [Title, Year_selector, runButton],
    layout: ui.Panel.Layout.flow('vertical'),
    style:{maxHeight: '90%'}
  });
  
  panel.style().set('position', 'top-left');

  return panel;

}

var map1 = ui.Map();
var map2 = ui.Map();

map1.add(controlPanel());
map2.add(controlPanel());

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

map1.setCenter(126.99, 37.55, 10);

map1.setControlVisibility({zoomControl: false, fullscreenControl: false});
map2.setControlVisibility({zoomControl: false, fullscreenControl: false});

var mapPanel = ui.Panel([ui.Panel(map1, null, {stretch:'both'}),ui.Panel(map2, null, {stretch:'both'})], ui.Panel.Layout.Flow('horizontal'), {stretch:'both'});

ui.root.widgets().reset([mapPanel]);
ui.root.setLayout(ui.Panel.Layout.Flow('vertical'));

1 Answer 1

1

For working independently each screen, you need to create a second controlPanel function and delete (see lines below) map2.addLayer at the first function and map1.addLayer at the second function.

//***********************************************************************
map1.addLayer(ndvi, ndviParams, Year_selector.getValue() +' NDVI image');
map2.addLayer(ndvi, ndviParams, Year_selector.getValue() +' NDVI image');
//***********************************************************************

Code looks as follows:

 var roi = ee.Geometry.Polygon(
              [[[126.7664070152438, 37.70130604607567],
                [126.7664070152438, 37.42698739064678],
                [127.18663406602505, 37.42698739064678],
                [127.18663406602505, 37.70130604607567]]], null, false);


function controlPanel1(){

  var Title = ui.Label({value: 'NDVI',style: {fontWeight: 'bold', fontSize: '16px'}});

  var Year_selector = ui.Select({
    
    items: [
      {label: '2013', value: 2013},
      {label: '2014', value: 2014},
      {label: '2015', value: 2015},
      {label: '2016', value: 2016},
      {label: '2017', value: 2017},
      {label: '2018', value: 2018},
      {label: '2019', value: 2019},
      {label: '2020', value: 2020},
      {label: '2021', value: 2021},
    ],style:{width: '150px'}
  
  }).setPlaceholder('Select year...');
  
  var runButton = ui.Button({label: 'Run', style: {width: '150px'}});
  
  runButton.onClick(function (){
    
    var start_date = Year_selector.getValue() + '-01-01';
    var end_date = Year_selector.getValue() + '-12-31';
    
    var L8 = ee.ImageCollection('LANDSAT/LC08/C01/T1_SR')
            .filterBounds(roi)
            .filterDate(start_date, end_date)
            .filterMetadata('CLOUD_COVER_LAND', 'less_than', 5)
            .filter(ee.Filter.eq('WRS_PATH',116))
            .filter(ee.Filter.eq('WRS_ROW',34))
            .median();
    
    L8 = L8.clip(roi);
    
    var nir = L8.select('B5');
    var red = L8.select('B4');
    var ndvi = nir.subtract(red).divide(nir.add(red)).rename('NDVI');

    var ndviParams = {min: -1, max: 1, palette: ['blue', 'white', 'green']};
    
    //***********************************************************************
    map1.addLayer(ndvi, ndviParams, Year_selector.getValue() +' NDVI image');
    //***********************************************************************
    
  });
  
  var panel = ui.Panel({
    widgets: [Title, Year_selector, runButton],
    layout: ui.Panel.Layout.flow('vertical'),
    style:{maxHeight: '90%'}
  });
  
  panel.style().set('position', 'top-left');

  return panel;

}

function controlPanel2(){

  var Title = ui.Label({value: 'NDVI',style: {fontWeight: 'bold', fontSize: '16px'}});

  var Year_selector = ui.Select({
    
    items: [
      {label: '2013', value: 2013},
      {label: '2014', value: 2014},
      {label: '2015', value: 2015},
      {label: '2016', value: 2016},
      {label: '2017', value: 2017},
      {label: '2018', value: 2018},
      {label: '2019', value: 2019},
      {label: '2020', value: 2020},
      {label: '2021', value: 2021},
    ],style:{width: '150px'}
  
  }).setPlaceholder('Select year...');
  
  var runButton = ui.Button({label: 'Run', style: {width: '150px'}});
  
  runButton.onClick(function (){
    
    var start_date = Year_selector.getValue() + '-01-01';
    var end_date = Year_selector.getValue() + '-12-31';
    
    var L8 = ee.ImageCollection('LANDSAT/LC08/C01/T1_SR')
            .filterBounds(roi)
            .filterDate(start_date, end_date)
            .filterMetadata('CLOUD_COVER_LAND', 'less_than', 5)
            .filter(ee.Filter.eq('WRS_PATH',116))
            .filter(ee.Filter.eq('WRS_ROW',34))
            .median();
    
    L8 = L8.clip(roi);
    
    var nir = L8.select('B5');
    var red = L8.select('B4');
    var ndvi = nir.subtract(red).divide(nir.add(red)).rename('NDVI');

    var ndviParams = {min: -1, max: 1, palette: ['blue', 'white', 'green']};
    
    //***********************************************************************
    map2.addLayer(ndvi, ndviParams, Year_selector.getValue() +' NDVI image');
    //***********************************************************************
    
  });
  
  var panel = ui.Panel({
    widgets: [Title, Year_selector, runButton],
    layout: ui.Panel.Layout.flow('vertical'),
    style:{maxHeight: '90%'}
  });
  
  panel.style().set('position', 'top-left');

  return panel;

}

var map1 = ui.Map();
var map2 = ui.Map();

map1.add(controlPanel1());
map2.add(controlPanel2());

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

map1.setCenter(126.99, 37.55, 10);

map1.setControlVisibility({zoomControl: false, fullscreenControl: false});
map2.setControlVisibility({zoomControl: false, fullscreenControl: false});

var mapPanel = ui.Panel([ui.Panel(map1, null, {stretch:'both'}),ui.Panel(map2, null, {stretch:'both'})], ui.Panel.Layout.Flow('horizontal'), {stretch:'both'});

ui.root.widgets().reset([mapPanel]);
ui.root.setLayout(ui.Panel.Layout.Flow('vertical'));

After running above code in GEE code editor, it can be observed in following picture that panels work independently of each other.

enter image description here

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.