Google Earth Engine – Managing Values from Textbox Widget

Question

I am a newbie in GEE and I am trying to build up an apparently simple widgets combination that allows to center the map around a point whose coordinates are entered by the users into text boxes.
I have tried the following code:

var lon = ui.Textbox({
  value: 1.0,
  placeholder: 'Enter longitude here...',
  onChange: function(value) {
    return(value);
  }
});
print(lon);

var lat = ui.Textbox({
   value: 1.0,
  placeholder: 'Enter latitude here...',
  onChange: function(value) {
    return(value);
  }
});
print(lat);

var Lo = ee.Number.parse(lon);
var La = ee.Number.parse(lat);
var button = ui.Button({
  label: 'Go to Location',
  onClick: function() {
    Map.setCenter(Lo,La,1);
  }
});
print(button);

which returns the following error:

Provided center object has invalid values for lat, lon, or zoom. Expected numeric values.

I am afraid that either I am not able to convert the text into number, or I am making a mistake in the structures defining "lon" and "lat"

Answer 1

I believe this should solve your problem. See comments in the code below.

var lon = ui.Textbox({
  value: 1.0,
  placeholder: 'Enter longitude here...',
  onChange: function(value) {
    // set value with a dedicated method
    lon.setValue(value);
    return(value);
  }
});
print(lon);

var lat = ui.Textbox({
   value: 1.0,
  placeholder: 'Enter latitude here...',
  onChange: function(value) {
    // set value with a dedicated method
    lat.setValue(value);
    return(value);
  }
});
print(lat);


var Lo;
var La;

var button = ui.Button({
  label: 'Go to Location',
  onClick: function() {
    // you don't have to convert it into EE objects since you are
    // working on the client side
    Lo = parseFloat(lon.getValue());
    La = parseFloat(lat.getValue());
    Map.setCenter(Lo, La, 10);
  }
});
print(button);