Map.add

  • The Map.add(item) method adds an item, which can be a widget like ui.Label or a non-widget object like ui.Map.Layer, to the map.

  • This method is used to add various UI elements such as labels, selectors, buttons, and map layers to a ui.Map object.

  • The Map.add() method returns the updated ui.Map object itself.

Adds an item to the map. Can also be used to add widgets like ui.Label as well as some non-widget objects like ui.Map.Layer.

Returns the map.

UsageReturns
Map.add(item)ui.Map
ArgumentTypeDetails
itemObjectThe item to add.

Examples

Code Editor (JavaScript)

// The default map in the Code Editor is a built-in ui.Map object called "Map".
// Let's refer to it as "defaultMap" for clarity.
var defaultMap = Map;

// ui.Map objects can be constructed. Here, a new map is declared.
var newMap = ui.Map({
  center: {lat: 0, lon: 0, zoom: 1},
  style: {position: 'bottom-right', width: '400px'}
});

// Add the newMap to the defaultMap;
defaultMap.add(newMap);

// Other UI widgets can be added to ui.Map objects, for example labels:
defaultMap.add(ui.Label('Default Map', {position: 'bottom-left'}));
newMap.add(ui.Label('New Map', {position: 'bottom-left'}));

// ...selectors:
defaultMap.add(ui.Select(['This', 'That', 'Other']));

// ...or buttons:
defaultMap.add(ui.Button('Click me'));

// You can also add ui.Map.Layer objects. Here, an ee.Geometry object
// is converted to a map layer and added to the default map.
var geom = ee.Geometry.Point(-122.0841, 37.4223);
var geomLayer = ui.Map.Layer(geom, {color: 'orange'}, 'Googleplex');
defaultMap.add(geomLayer);
defaultMap.centerObject(geom, 18);