Split Map on GEE : invalid select item : undefined

Question

I want to make split map on GEE, so i importing my image on asset in projects/ee-auliaputrisabita/assets/contohreclassgee. But if i want call the image asset function .select not going on. Here my code :

//Pembuatan Split Map Sisi Kiri
var leftMap = ui.Map();
leftMap.setControlVisibility(false);
var leftSelector = addLayerSelector(leftMap, 2, 'top-left');

//Pembuatan Split Map Sisi Kanan
var rightMap = ui.Map();
rightMap.setControlVisibility(false);
var rightSelector = addLayerSelector(rightMap, 1, 'top-right');


//Pengaturan Layer Peta Untuk Memilih Citra Yang Ingin Ditampilkan
function addLayerSelector(mapToChage, defaultValue, position)
{
    var label = ui.Label('Pilih Tahun');
    function updateMap(selection)
    {
        mapToChange.layers().set(0, ui.Map.Layer(images[selection]));
    }


var image = ee.FeatureCollection("projects/ee-auliaputrisabita/assets/contohreclassgee");

//Konfigurasi Layer Terpilih
var select = ui.Select({items: Object.keys(image), onChange: updateMap});
select.setValue(Object.keys(image)[defaultValue], true);
var controlPanel = ui.Panel({widgets: [label, select], style: {position:    position}});
mapToChange.add(controlPanel);
}


//Pembuatan Split Panel
var splitPanel = ui.SplitPanel({
firstPanel: leftMap,
secondPanel: rightMap,
wipe: true,
style: {stretch: 'both'}
});

//Meletakkan SplitPanel pada root UI
ui.root.widgets().reset([splitPanel]);
var linker = ui.Map.Linker([leftMap, rightMap]);
leftMap.centerObject(geometry, 9);
rightMap.centerObject(geometry, 9);

Answer 1

This script have a number of issues, all preventing it from running.

• You construct an ee.FeatureCollection from what you say is an image asset
• You have a typo in mapToChage
• images is not defined

Besides this, you haven't shared your asset, and your geometry is undefined.

But I think the main issue is related to client- and server-side objects. It looks like you are trying to pass a server-side object to ui.Select.items. The ui.* objects typically require client-side arguments. Read up on the distinction here.

I'm guessing you are trying to populate your ui.Select with the band names of your image, and add the selected band to the corresponding map. To do this, you have to get a client-side list of band names. You can do that with evaluate(). You could perhaps do something like this:

var image = ee.Image('projects/ee-auliaputrisabita/assets/contohreclassgee')

image.bandNames().evaluate(renderWidgets)


function renderWidgets(bandNames) {
  //Pembuatan Split Map Sisi Kiri
  var leftMap = ui.Map()
  leftMap.setControlVisibility(false)
  var leftDefaultBandIndex = 6 // You used 2
  var leftSelector = addLayerSelector(leftMap, leftDefaultBandIndex, 'top-left')
  
  //Pembuatan Split Map Sisi Kanan
  var rightMap = ui.Map()
  rightMap.setControlVisibility(false)
  var rightDefaultBandIndex = 7 // You used 1
  var rightSelector = addLayerSelector(rightMap, rightDefaultBandIndex, 'top-right')


  //Pengaturan Layer Peta Untuk Memilih Citra Yang Ingin Ditampilkan
  function addLayerSelector(mapToChange, defaultValue, position) {
    var label = ui.Label('Pilih Tahun')
  
    function updateMap(selection) {
      mapToChange.layers().set(0, ui.Map.Layer(image.select(selection)))
    }
          
    //Konfigurasi Layer Terpilih
    var select = ui.Select({
      items: bandNames,
      onChange: updateMap
    })
    select.setValue(bandNames[defaultValue], true)
    var controlPanel = ui.Panel({
      widgets: [label, select],
      style: {
        position: position
      }
    })
    mapToChange.add(controlPanel)
  }
  
  
  //Pembuatan Split Panel
  var splitPanel = ui.SplitPanel({
    firstPanel: leftMap,
    secondPanel: rightMap,
    wipe: true,
    style: {
      stretch: 'both'
    }
  })
  
  //Meletakkan SplitPanel pada root UI
  ui.root.widgets().reset([splitPanel])
  var linker = ui.Map.Linker([leftMap, rightMap])
  leftMap.centerObject(geometry, 9)
  rightMap.centerObject(geometry, 9)  
}

https://code.earthengine.google.com/08779323ee262ec90a7dbf5fba4b3987