Announcement: All noncommercial projects registered to use Earth Engine before April 15, 2025 must verify noncommercial eligibility to maintain Earth Engine access.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2023-10-06 UTC."],[[["\u003cp\u003e\u003ccode\u003eui.Map.add()\u003c/code\u003e inserts items like UI widgets (labels, buttons, selectors) and map layers onto a map.\u003c/p\u003e\n"],["\u003cp\u003eThis method accepts the map and the item to be added as arguments, and subsequently returns the map itself.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can utilize this function to enhance map visualization by incorporating interactive elements and data layers directly within their maps.\u003c/p\u003e\n"],["\u003cp\u003eThe provided examples illustrate adding a new map, labels, selectors, buttons, and geometry-based layers to the default or a newly created map.\u003c/p\u003e\n"]]],["The `Map.add(item)` function adds an object to a `ui.Map` instance, returning the modified map. The `item` can be a `ui.Map` itself, UI widgets like `ui.Label`, `ui.Select`, or `ui.Button`, or objects like `ui.Map.Layer`. Examples demonstrate adding a new map, labels, selectors, buttons, and a geometry layer to an existing map. These are done using default and newly created maps. The new elements are added to the map using `defaultMap.add()`.\n"],null,["\u003cbr /\u003e\n\nAdds 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.\n\n\u003cbr /\u003e\n\nReturns the map.\n\n| Usage | Returns |\n|-----------------|---------|\n| Map.add`(item)` | ui.Map |\n\n| Argument | Type | Details |\n|----------------|--------|----------------------|\n| this: `ui.map` | ui.Map | The ui.Map instance. |\n| `item` | Object | The item to add. |\n\nExamples\n\nCode Editor (JavaScript) \n\n```javascript\n// The default map in the Code Editor is a built-in ui.Map object called \"Map\".\n// Let's refer to it as \"defaultMap\" for clarity.\nvar defaultMap = Map;\n\n// ui.Map objects can be constructed. Here, a new map is declared.\nvar newMap = ui.Map({\n center: {lat: 0, lon: 0, zoom: 1},\n style: {position: 'bottom-right', width: '400px'}\n});\n\n// Add the newMap to the defaultMap;\ndefaultMap.add(newMap);\n\n// Other UI widgets can be added to ui.Map objects, for example labels:\ndefaultMap.add(ui.Label('Default Map', {position: 'bottom-left'}));\nnewMap.add(ui.Label('New Map', {position: 'bottom-left'}));\n\n// ...selectors:\ndefaultMap.add(ui.Select(['This', 'That', 'Other']));\n\n// ...or buttons:\ndefaultMap.add(ui.Button('Click me'));\n\n// You can also add ui.Map.Layer objects. Here, an ee.Geometry object\n// is converted to a map layer and added to the default map.\nvar geom = ee.Geometry.Point(-122.0841, 37.4223);\nvar geomLayer = ui.Map.Layer(geom, {color: 'orange'}, 'Googleplex');\ndefaultMap.add(geomLayer);\ndefaultMap.centerObject(geom, 18);\n```"]]