gee_app.js

var aoi = aoi;

// Tip 01 - Side Panel
var panelMain = ui.Panel();

panelMain.style().set({
  width: '390px',
  position: 'bottom-right',
  //border: '1px solid #000000'
});

ui.root.add(panelMain);



// Tip 02 - Title
//panelMain.add(ui.Label('This is my app'))

panelMain.add(ui.Label('This is my app',{fontWeight: 'bold', fontSize: '18px'}));



// Tip 03 - SubPanel Horizontal/Vertical Flow
var subpanel_a = ui.Panel({ layout: ui.Panel.Layout.Flow('horizontal') });
subpanel_a.add(ui.Label('This is a link', {fontSize:'12px'}, 'https://docs.google.com/spreadsheets/d/16EEt8DVBhwLP_Ly65CS2qP6ozSkqCOjEgGtyIz9_1aA/edit#gid=0'));
subpanel_a.add(ui.Label('         |         ', {fontSize:'12px'}));
panelMain.add(subpanel_a);

panelMain.add(ui.Label('A tool to analyze suitable locations for potential business activity. Select variables and criterias below to be considered in the analysis.', {fontSize:'10px'}));



// Tip 04 - Checkbox
var esa_lc = ee.ImageCollection('ESA/WorldCover/v100').first().clip(aoi);

var subpanel_b = ui.Panel({layout: ui.Panel.Layout.Flow('vertical')});

var item_b01 = ui.Checkbox({
  label: 'Land Cover',
  value: false,
  style: {fontSize: '11px', fontWeight: 'bold', width: '190px', height: '30px'}
});

var update_b01 = function() {
  Map.layers().forEach(function(layer) {
    if (layer.getName() === 'Land Cover') {
      Map.remove(layer);
    }
  });
  
    if (item_b01.getValue()) {
      Map.addLayer(esa_lc, {bands:'Map'}, 'Land Cover');
    }
};

item_b01.onChange(update_b01);
panelMain.add(item_b01);


// Tip 05 - Dropdown
var subpanel_c = ui.Panel({layout: ui.Panel.Layout.Flow('horizontal')});

var item_c01 = ui.Label('Oil Palm Plantation', {fontSize: '11px', fontWeight: 'bold', width: '100px', height: '30px'});

var oilpalm = ee.ImageCollection("BIOPAMA/GlobalOilPalm/v1").select('classification').mosaic().clip(aoi);
var oilpalm_mask = oilpalm.neq(3);

var item_c02 = ui.Select({
  items: ['Industrial', 'Smallholder', 'All'],
  placeholder: 'Type',
  style: {width: '100px'},
});

var filter_c02 = function() {
  var selection_c02 = item_c02.getValue();
  var filtered_c02;
  
  if (selection_c02 === 'Industrial') {
    var filtered_c02 = oilpalm.eq(1).selfMask();
  } else if (selection_c02 == 'Smallholder') {
    var filtered_c02 = oilpalm.eq(2).selfMask();
  } else if (selection_c02 == 'All') {
    var filtered_c02 = oilpalm;
  }
  
  return filtered_c02;
};

var update_c02 = function() {
  Map.layers().forEach(function(layer) {
    if (layer.getName() === 'Oil palm plantation') {
      Map.remove(layer);
    }
  });
  
  var filtered_c02 = filter_c02();
  if (filtered_c02) {
    var visParams = {};
    if (item_c02.getValue() === 'Industrial') {
      visParams = {palette: ['pink']};
    } else if (item_c02.getValue() === 'Smallholder') {
      visParams = {palette: ['red']};
    } else if (item_c02.getValue() === 'All') {
      visParams = {min: 1, max: 2, palette: ['pink', 'red']};
    }
    Map.addLayer(filtered_c02.updateMask(oilpalm_mask), visParams, 'Oil palm plantation');
  }
};

item_c02.onChange(update_c02);

subpanel_c.add(item_c01);
subpanel_c.add(item_c02);
panelMain.add(subpanel_c);



// Tip 04 - Slider
var subpanel_d = ui.Panel({layout: ui.Panel.Layout.Flow('horizontal')});
var item_d01 = ui.Label('Tree Cover Loss', {fontSize: '11px', fontWeight: 'bold', width: '100px', height: '30px'});

var treeLoss = ee.Image('UMD/hansen/global_forest_change_2023_v1_11').select('lossyear').clip(aoi);

var item_d02 = ui.Slider({
  min: 1,
  max: 23,
  value: 10,
  step: 1,
  style: {width: '200px'},
});

var filter_d02 = function() {
  var selection_d02 = item_d02.getValue();
  var filtered_d02 = treeLoss.updateMask(treeLoss.lte(selection_d02));
  
  return filtered_d02;
};

var update_d02 = function() {
  Map.layers().forEach(function(layer) {
    if (layer.getName() === 'Tree loss year') {
      Map.remove(layer);
    }
  });
  
  var filtered_d02 = filter_d02();
  Map.addLayer(filtered_d02, {min:1, max: item_d02.getValue(), palette:['yellow','red']}, 'Tree loss year');
};

item_d02.onChange(update_d02);

subpanel_d.add(item_d01);
subpanel_d.add(item_d02);
panelMain.add(subpanel_d);

// item_b01




// Tip 49 - Basemap
var darkBasemap = [{featureType: 'water', elementType: 'geometry.fill',
  stylers: [{color: '404040'}]
}];

Map.setOptions('Dark', {'Dark': darkBasemap});




// Tip 50
Map.style().set('cursor', 'crosshair');

Map.centerObject(aoi);