Widgets

Hay una variedad de widgets que puedes usar para compilar tus IUs. Estos widgets incluyen botones, casillas de verificación, controles deslizantes, cuadros de texto y menús de selección. Los widgets solo se pueden imprimir o agregar a un panel una vez. En las siguientes secciones, se ilustran la funcionalidad básica, el aspecto y la apariencia de los widgets. Consulta la sección Estilo para obtener más información sobre cómo aplicarles diseño a tus widgets. En los siguientes ejemplos, simplemente se print() los widgets a la consola. Para obtener detalles sobre cómo agregar widgets a los paneles, consulta la página Paneles y diseños.

ui.Label

Las etiquetas son simplemente áreas en las que se muestra el texto. Por ejemplo, el siguiente código imprime una etiqueta:

Editor de código (JavaScript)

var label = ui.Label('Cool label!');
print(label);

Que se ve de la siguiente manera:

Para dividir etiquetas largas, inserta un carácter de línea nueva (\n) y establece el argumento de la propiedad de diseño whiteSpace en 'pre':

print(ui.Label('Here is a:\nnew line', {whiteSpace: 'pre'}));

ui.Button

Un botón es un widget de IU interactivo en el que se puede hacer clic. Puedes especificar una función a la que se le llamará (la función de "devolución de llamada") cuando un usuario haga clic en el botón. (Para obtener más información sobre el control de eventos con funciones de devolución de llamada, consulta la página Eventos). En el siguiente ejemplo, se imprime el centro actual del mapa cuando se hace clic en el botón:

Editor de código (JavaScript)

var button = ui.Button({
  label: 'Get Map Center',
  onClick: function() {
    print(Map.getCenter());
  }
});
print(button);

Que se ve de la siguiente manera:

ui.Checkbox

Una casilla de verificación es un widget que permite que un usuario marque (o desmarque) una casilla. Cuando cambia el estado de la casilla de verificación, a las devoluciones de llamada registradas en el widget se les pasa un valor booleano que indica si la casilla de verificación ahora está marcada. Por ejemplo:

Editor de código (JavaScript)

var checkbox = ui.Checkbox('Show SRTM layer', true);

checkbox.onChange(function(checked) {
  // Shows or hides the first map layer based on the checkbox's value.
  Map.layers().get(0).setShown(checked);
});

Map.addLayer(ee.Image('CGIAR/SRTM90_V4'));
print(checkbox);

La casilla de verificación impresa debería verse de la siguiente manera:

Ten en cuenta que si marcas la casilla, se activará una capa que se mostrará en el mapa. Al igual que con otros componentes de la IU, el Mapa del editor de código se puede manipular de forma programática. Obtén más información sobre el objeto Map en la página Paneles y diseños.

ui.Slider

Un control deslizante es un widget que permite que un usuario ajuste un control deslizante para obtener un número dentro del rango del control deslizante. Configura el rango con el constructor o configura las propiedades del control deslizante. En el siguiente ejemplo, se usa el control deslizante para establecer la opacidad de la primera capa del Mapa:

Editor de código (JavaScript)

var slider = ui.Slider();

slider.setValue(0.9);  // Set a default value.
slider.onChange(function(value) {
  Map.layers().get(0).setOpacity(value);
});

Map.addLayer(ee.Image(255), {palette: 'blue'});
print(slider);

El control deslizante debería verse de la siguiente manera:

Ten en cuenta que el valor del control deslizante se muestra a su derecha.

ui.DateSlider

El widget DateSlider es como el widget Slider, pero controla las fechas de forma explícita. Un DateSlider configurado para seleccionar un día de junio de 2018 se ve de la siguiente manera:

DateSlider es útil para filtrar colecciones, como se muestra en el siguiente ejemplo, que crea un compuesto anual basado en el DateRange establecido en DateSlider:

Editor de código (JavaScript)

// Use a DateSlider to create annual composites of this collection.
var collection = ee.ImageCollection('LANDSAT/LC08/C02/T1');
// Use the start of the collection and now to bound the slider.
var start = ee.Image(collection.first()).date().get('year').format();
var now = Date.now();
var end = ee.Date(now).format();

// Run this function on a change of the dateSlider.
var showMosaic = function(range) {
  var mosaic = ee.Algorithms.Landsat.simpleComposite({
    collection: collection.filterDate(range.start(), range.end())
  });
  // Asynchronously compute the name of the composite.  Display it.
  range.start().get('year').evaluate(function(name) {
    var visParams = {bands: ['B4', 'B3', 'B2'], max: 100};
    var layer = ui.Map.Layer(mosaic, visParams, name + ' composite');
    Map.layers().set(0, layer);
  });
};

// Asynchronously compute the date range and show the slider.
var dateRange = ee.DateRange(start, end).evaluate(function(range) {
  var dateSlider = ui.DateSlider({
    start: range['dates'][0],
    end: range['dates'][1],
    value: null,
    period: 365,
    onChange: showMosaic,
    style: {width: '180px'}
  });
  Map.add(dateSlider.setValue(now));
});

// Initialize the map location at southern Africa.
Map.setCenter(23.861, -27.144, 6);

ui.Textbox

Un cuadro de texto es un lugar para recopilar el texto que ingresa el usuario. Por ejemplo:

Editor de código (JavaScript)

var textbox = ui.Textbox({
  placeholder: 'Enter text here...',
  onChange: function(text) {
    print('So what you are saying is ' + text + '?');
  }
});
print(textbox);

El cuadro de texto debería verse de la siguiente manera:

Ten en cuenta que la devolución de llamada solo se activa cuando el usuario termina de ingresar texto (y presiona Intro) o hace clic fuera del cuadro de texto.

ui.Select

El widget de selección representa un menú desplegable de opciones de las que el usuario puede elegir una. En el siguiente ejemplo, se ilustra un menú desplegable para permitir que un usuario seleccione una ubicación:

Editor de código (JavaScript)

var places = {
  MTV: [-122.0849, 37.3887],
  PEK: [116.4056, 39.9097],
  ZRH: [8.536, 47.376]
};

var select = ui.Select({
  items: Object.keys(places),
  onChange: function(key) {
    Map.setCenter(places[key][0], places[key][1]);
  }
});

// Set a place holder.
select.setPlaceholder('Choose a location...');

print(select);

El widget de selección debería verse de la siguiente manera:

ui.Chart

Los gráficos del paquete ui.Chart se comportan de manera similar a los gráficos del paquete Chart. Específicamente, un ui.Chart es una capa delgada alrededor de una instancia de ChartWrapper de la API de Google Visualization. Para obtener más información sobre cómo manipular objetos ChartWrapper, consulta esta referencia. Para obtener más información sobre las funciones de ayuda de gráficos en Earth Engine, consulta la documentación de Gráficos.

ui.Thumbnail

El widget de miniaturas se puede usar para obtener una vista previa de los objetos ee.Image y ee.ImageCollection. Cuando se le proporciona un ee.Image, el widget mostrará una imagen estática. Cuando se le proporciona un ee.ImageCollection, mostrará una animación con un fotograma por imagen en la entrada. Al igual que con ee.Image.getThumbURL() y ee.ImageCollection.getVideoThumbURL(), puedes especificar parámetros para controlar el formato y las dimensiones de la miniatura resultante:

Editor de código (JavaScript)

// Create a box around an area in the Brazilian Amazon.
var box = ee.Geometry.Polygon([[
  [-62.9564, 2.5596], [-62.9550, 2.4313], [-62.8294, 2.4327], [-62.8294, 2.5596]
]]);

// Visualize the image in RGB.
var image = ee.Image('LANDSAT/LE07/C02/T1_L2/LE07_233058_20011113')
                .select(['SR_B[1-3]'])  // blue, green, red reflectance
                .multiply(0.0000275).add(-0.2)  // apply scaling factors
                .visualize({
                  bands: ['SR_B3', 'SR_B2', 'SR_B1'],
                  min: 0,
                  max: 0.12,
                  gamma: 1.3
                });

// Print a thumbnail to the console.
print(ui.Thumbnail({
  image: image,
  params: {dimensions: '256x256', region: box, format: 'png'},
  style: {height: '300px', width: '300px'}
}));

La miniatura debería verse de la siguiente manera:

ui.Map

Un ui.Map es un widget de mapa. (De hecho, el Mapa predeterminado del editor de código es una instancia de esta clase). Al igual que con otros widgets, puedes imprimir un mapa en la consola. Para manipular el contenido del mapa, borra, obtén o configura capas individuales. En el siguiente ejemplo, se imprime un mapa en la consola que muestra los límites del Mapa del editor de código:

Editor de código (JavaScript)

// Make a little map.
var map = ui.Map();

// Make the little map display an inset of the big map.
var createInset = function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  map.centerObject(bounds);
  map.clear();
  map.addLayer(bounds);
};

// Run it once to initialize.
createInset();

// Get a new inset map whenever you click on the big map.
Map.onClick(createInset);

// Display the inset map in the console.
print(map);

El mapa insertado debería verse de la siguiente manera:

En este ejemplo, el usuario debe hacer clic en el mapa grande para que el mapa insertado se dibuje en el mapa pequeño.

También puedes manipular capas en el mapa si llamas a layers() en la instancia del mapa. layers() muestra un ui.data.ActiveList, un objeto similar a un array. Cuando se cambia, también cambian las capas del mapa. Obtén más información en la sección ui.Map.Layer.

ui.Map.Layer

Una capa no es un widget con diseño como un ui.Button. Es solo una representación de datos de la capa en el mapa. En el siguiente ejemplo, se muestra cómo actualizar un mapa mediante la creación de una capa y la actualización de sus propiedades según la entrada del usuario:

Editor de código (JavaScript)

var consoleMap = ui.Map({
  lon: -2.0174,
  lat: 48.6474,
  zoom: 13
});

// Create a Layer from this Sentinel-2 image
var image = ee.Image('COPERNICUS/S2/20150821T111616_20160314T094808_T30UWU');
var visParams = {bands: ['B4', 'B3', 'B2'], max: 2048, gamma: 1};
var layer = ui.Map.Layer(image, visParams);

// Update the map by updating the layers list.
var layers = consoleMap.layers();
layers.add(layer);

// Make a textbox to accept a gamma value.
// Update the layer when the gamma value is entered.
var gammaBox = ui.Textbox({
  value: 1,
  onChange: function(value) {
    // visParams is NOT an ActiveDictionary, so set it again.
    visParams.gamma = value;
    layer.setVisParams(visParams);
  }
});

print(ui.Label('Enter a gamma value:'));
print(gammaBox);
print(consoleMap);

ui.Map.CloudStorageLayer

Si deseas mostrar (p.ej., en una app) una capa relativamente costosa de procesar, te recomendamos que exportes tus datos a un bucket de Cloud Storage por motivos de rendimiento. Estas capas estáticas de solo visualización pueden hacer que tus apps y secuencias de comandos sean más responsivas. Puedes crear una capa de visualización estática para este fin con Export.map.toCloudStorage(). Para usar un conjunto de mosaicos que Export.map.toCloudStorage() exportó anteriormente, crea un ui.Map.Layer nuevo a partir de un bucket y una ruta de Cloud Storage especificados:

Map.add(ui.Map.CloudStorageLayer({
  bucket: 'earthenginepartners-hansen',
  path: 'tiles/gfc_v1.4/loss_year',
  maxZoom: 12,
  suffix: '.png'
}));

Cuando ejecutes una secuencia de comandos que cargue una capa de Cloud Storage, es posible que veas el siguiente mensaje de advertencia:

ui.Map.DrawingTools

Hay un conjunto de herramientas de dibujo de geometría que se agrega de forma predeterminada a Map en el editor de código. Puedes cambiar el comportamiento de estas herramientas en el Map predeterminado llamando a Map.drawingTools(). Por ejemplo, para ocultar las herramientas de dibujo, haz lo siguiente:

Editor de código (JavaScript)

Map.drawingTools().setShown(false);

Los mapas recién creados no obtienen herramientas de dibujo de forma predeterminada, pero se pueden habilitar llamando al método drawingTools() en el mapa:

Editor de código (JavaScript)

var map = ui.Map();
// Prints true since drawingTools() adds drawing tools to the map.
print(map.drawingTools().getShown());
// Replace the default Map with the newly created map.
ui.root.widgets().reset([map]);

Las capas de geometría que dibujan las herramientas de dibujo se colocan en un ui.data.ActiveList al que puedes acceder llamando a Map.drawingTools().layers(). La lista de capas de geometría responde a eventos como otras listas activas, por ejemplo, la lista de capas en el Map que muestra Map.layers(). En el siguiente ejemplo, se muestra cómo puedes establecer la visibilidad de las capas de geometría que dibujan las herramientas (que se muestran de forma predeterminada):

Editor de código (JavaScript)

Map.drawingTools().layers().forEach(function(layer) {
  layer.setShown(false);
});

Para agregar una capa de forma programática a las herramientas de dibujo, puedes llamar al método addLayer en las herramientas de dibujo o agregar una capa directamente a la lista de capas:

Editor de código (JavaScript)

var geometries = [ee.Geometry.Point([0,0]), ee.Geometry.Rectangle([[0,0], [1,1]])];
Map.drawingTools().addLayer(geometries, 'my_geometry1', 'red');

var layer = ui.Map.GeometryLayer(geometries, 'my_geometry2', 'blue');
Map.drawingTools().layers().add(layer);

El estado de las herramientas de dibujo también se conserva cuando publicas una app. Si tienes las herramientas de dibujo ocultas o visibles, también lo estarán en tu app. Las geometrías de tus importaciones también se conservarán en tu app.

ui.Map.GeometryLayer

Un GeometryLayer es una colección de geometrías que actúa como un solo Geometry, GeometryCollection o FeatureCollection que se agrega a la sección de importaciones en la parte superior de la secuencia de comandos y al que se puede hacer referencia en el código.

Los GeometryLayer que dibujan las herramientas de dibujo tienen un comportamiento predeterminado que puedes anular si proporcionas nuevas funciones de devolución de llamada. Por ejemplo, supongamos que quieres que los cambios interactivos en las geometrías activen un evento. Para implementar un comportamiento particular, puedes configurar los métodos onEdit(), onErase() o onDraw() en las herramientas para responder a las acciones del usuario. En el siguiente ejemplo, se muestra cómo activar un procesamiento y actualizar una etiqueta con el resultado del procesamiento cuando el usuario agrega, edita o borra una geometría:

Editor de código (JavaScript)

// Load elevation data.
var srtm = ee.Image('USGS/SRTMGL1_003');
Map.addLayer(srtm, {min: 0, max: 5000}, 'SRTM');

// Make a label to display mean elevation at drawn points.
var label = new ui.Label('Draw points to calculate mean elevation');
var inspector = new ui.Panel([label]);
Map.add(inspector);
// Don't make imports that correspond to the drawn points.
Map.drawingTools().setLinked(false);
// Limit the draw modes to points.
Map.drawingTools().setDrawModes(['point']);
// Add an empty layer to hold the drawn points.
Map.drawingTools().addLayer([]);
// Set the geometry type to be point.
Map.drawingTools().setShape('point');
// Enter drawing mode.
Map.drawingTools().draw();

// This function gets called when the geometry layer changes.
// Use debounce to call the function at most every 100 milliseconds.
var getAverageElevation = ui.util.debounce(function() {
  var points = Map.drawingTools().layers().get(0).toGeometry();
  var elevation = srtm.reduceRegion({
    reducer: ee.Reducer.mean(),
    geometry: points,
    scale: 30
  }).get('elevation');
  // Asynchronously evaluate the mean elevation.
  elevation.evaluate(showElevation);
}, 100);

// Set the callback function on changes of the geometry layer.
Map.drawingTools().onEdit(getAverageElevation);
Map.drawingTools().onDraw(getAverageElevation);
Map.drawingTools().onErase(getAverageElevation);

// Set the label to the result of the mean reduction.
function showElevation(elevation) {
  inspector.clear();
  var elevationLabel = ui.Label('Mean elevation: ' + elevation);
  inspector.add(elevationLabel);
}

Ten en cuenta que setLinked() se usa para activar o desactivar la conexión entre las herramientas de dibujo de geometría y la sección de Importaciones del editor de código. En este ejemplo, las herramientas de geometría están desvinculadas para evitar que se creen importaciones. toGeometry se usa para convertir la capa en un ee.Geometry. Si la capa importada representa un Feature o un FeatureCollection, puedes recuperar el objeto EE subyacente con getEeObject(). También ten en cuenta el uso de ui.util.debounce para evitar que cada movimiento de una geometría active la función de devolución de llamada. Específicamente, la función no se activará hasta que transcurran 100 milisegundos desde el último evento. Esto ayuda a garantizar que la función solo se ejecute cuando el usuario haya completado la acción de edición.

Una capa de geometría en las importaciones está asociada con un Geometry o un GeometryCollection, por lo que solo puede contener geometrías con el mismo estado geodésico, ya que el formato GeoJSON solo permite un solo estado geodésico para la colección de geometrías (consulta la página Geometrías geodésicas y planas para obtener más información). Si presionas el ícono de ajustes junto al nombre de la capa para convertirla en una FeatureCollection, podrás agregar geometrías planas y geodésicas a la misma capa. Sin embargo, volver a convertirlo en un Geometry generará un error. Para evitar eso, conviértelas en FeatureCollection o borra las geometrías hasta que solo haya un estado geodésico en la capa.

ui.Map.Linker

Al igual que una capa, un vinculador no es un widget con diseño. Es una utilidad en segundo plano que se puede usar para sincronizar el movimiento de varias instancias de ui.Map:

Editor de código (JavaScript)

// Add two maps to the screen.
var left = ui.Map();
var right = ui.Map();
ui.root.clear();
ui.root.add(left);
ui.root.add(right);

// Link the "change-bounds" event for the maps.
// When the user drags one map, the other will be moved in sync.
ui.Map.Linker([left, right], 'change-bounds');

ui.SplitPanel

Un ui.SplitPanel es útil para comparar elementos en paralelo. La ventaja de un ui.SplitPanel sobre dos paneles ordinarios es que se puede usar un control para lograr una transición de barrido entre los paneles en un ui.SplitPanel. En el siguiente ejemplo, se usa un ui.SplitPanel para mostrar las diferencias espectrales de las cicatrices de quemaduras:

Editor de código (JavaScript)

// Load an image of the Santa Rosa, California 2017 fires.
var image = ee.Image('LANDSAT/LC08/C02/T1_TOA/LC08_045033_20171011');

// Add a color-SWIR composite to the default Map.
Map.setCenter(-122.6624, 38.5011, 12);
Map.addLayer(image, {bands: ['B7', 'B5', 'B3'], max: 0.3}, 'color-SWIR');

// Make another map and add a color-NIR composite to it.
var linkedMap = ui.Map();
linkedMap.addLayer(image, {bands: ['B5', 'B4', 'B3'], max: 0.3}, 'color-NIR');
// Add a thermal image to the map.
linkedMap.addLayer(image, {
  bands: ['B11'],
  min: 290,
  max: 305,
  palette: ['gray', 'white', 'yellow', 'red']
}, 'Thermal');

// Link the default Map to the other map.
var linker = ui.Map.Linker([ui.root.widgets().get(0), linkedMap]);

// Make an inset map and add it to the linked map.
var inset = ui.Map();
inset.style().set({position: 'bottom-right', width: '300px', height: '250px'});
inset.setControlVisibility({all: false, mapTypeControl: true});
linkedMap.add(inset);

// Register a function to the linked map to update the inset map.
linkedMap.onChangeBounds(function() {
  var bounds = ee.Geometry.Rectangle(Map.getBounds());
  inset.centerObject(bounds);
  inset.layers().set(0, bounds);
});

// Create a SplitPanel which holds the linked maps side-by-side.
var splitPanel = ui.SplitPanel({
  firstPanel: linker.get(0),
  secondPanel: linker.get(1),
  orientation: 'horizontal',
  wipe: true,
  style: {stretch: 'both'}
});

// Set the SplitPanel as the only thing in root.
ui.root.widgets().reset([splitPanel]);

Ten en cuenta que el parámetro wipe se establece en true, en el constructor ui.SplitPanel, para permitir que el usuario deslice el control hacia adelante y hacia atrás entre las dos visualizaciones.

Aplica diseño a los widgets

El estilo de un widget está controlado por el diccionario de propiedades de estilo del widget. Para obtener acceso al diccionario, llama a style() en el widget. El objeto que muestra style() es una instancia de ui.data.ActiveDictionary. Eso significa que configurar las propiedades del diccionario de estilo actualiza automáticamente la forma en que se muestra el widget. Las claves permitidas para el diccionario de estilo de cada widget se detallan en la documentación de referencia del widget para la llamada a style().

Los estilos del widget se pueden configurar con el constructor llamando a style().set() o a style() con un argumento de diccionario. Por ejemplo:

Editor de código (JavaScript)

var redLabel = ui.Label('Big, Red Label');

redLabel.style().set('color', 'red');
redLabel.style().set('fontWeight', 'bold');
redLabel.style().set({
  fontSize: '32px',
  padding: '10px'
});

print(redLabel);

Ten en cuenta que, en este ejemplo, primero se aplica diseño a la etiqueta llamando a style().set() con argumentos de clave y valor, y luego llamando a style().set() con un argumento de diccionario. La segunda llamada no anula la primera, sino que agrega y reemplaza propiedades de estilo individuales en lugar de reemplazar todo el diccionario de estilos.

Para obtener más información sobre las opciones de diseño de los widgets, consulta esta referencia de hojas de estilo en cascada (CSS) para ver los estilos que se enumeran en la documentación de style() para cada widget. Ten en cuenta que los estilos permitidos para los widgets de Earth Engine difieren de los estilos CSS en varios lugares, en particular fontSize y fontWeight para font-style y font-weight, respectivamente.

El diccionario de estilos también contiene claves que controlan la posición del widget. Consulta la página Paneles y diseños para obtener más información sobre cómo usar las propiedades de posición.