Announcement: All noncommercial projects registered to use Earth Engine before April 15, 2025 must verify noncommercial eligibility to maintain Earth Engine access.
Stay organized with collections
Save and categorize content based on your preferences.
Earth Engine provides access to client-side user interface (UI) widgets through the
ui package. Use the ui package to construct graphical
interfaces for your Earth Engine scripts. These interfaces can include simple input
widgets like buttons and checkboxes, more complex widgets like charts and maps, panels
to control the layout of the UI, and event handlers for interactions between UI
widgets. Explore the full functionality of the ui API in the
Docs tab on the left side of the Code Editor. The following example uses
the ui package to illustrate basic functions for making a widget, defining
behavior for when the user clicks the widget, and displaying the widget.
Hello, world!
This example represents a simple UI of a button displayed in the console. Clicking the
button results in 'Hello, world!' getting printed to the console:
Observe that first, the button is created with a single argument: its label. Next,
the button's onClick() function is called. The argument to
onClick() is another function that will get run whenever the button is
clicked. This mechanism of a function to be called (a "callback" function) when an
event happens is called an "event handler" and is used widely in the UI library. In this
example, when the button is clicked, the function prints 'Hello, world!' to the console.
Mutability
Note that unlike objects in the ee.* namespace, objects within the
ui.* namespace are mutable. So you don’t need to reassign the object to a
variable every time you call an instance function on the object. Simply calling the
function will mutate (change) the widget. Appending the following code to the previous
example results in registering another callback for the button's click event:
Copy this code to the end of the previous example and click Run. Now
when you click the button, both messages are printed to the console.
Use the UI pages to learn more about building UIs for your Earth Engine scripts. The
Widgets page provides a visual tour and describes basic
functionality of the widgets in the ui package. The Panels
and Layouts page describes top-level containers and layouts you can use to organize
and arrange widgets. The Events page has details on configuring
the behavior and interaction of widgets in your UI.
[[["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\u003eEarth Engine's \u003ccode\u003eui\u003c/code\u003e package enables the creation of interactive graphical user interfaces (GUIs) for your Earth Engine scripts, incorporating various widgets like buttons, charts, and maps.\u003c/p\u003e\n"],["\u003cp\u003eUI widgets are mutable, allowing modification by directly calling their instance functions without reassignment.\u003c/p\u003e\n"],["\u003cp\u003eEvent handlers, such as \u003ccode\u003eonClick()\u003c/code\u003e, are utilized to define widget behavior in response to user interactions.\u003c/p\u003e\n"],["\u003cp\u003eThe provided example demonstrates a simple button that prints a message to the console when clicked.\u003c/p\u003e\n"],["\u003cp\u003eComprehensive documentation on UI widgets, panels, layouts, and events is accessible through Earth Engine's guide pages.\u003c/p\u003e\n"]]],[],null,["Earth Engine provides access to client-side user interface (UI) widgets through the\n`ui` package. Use the `ui` package to construct graphical\ninterfaces for your Earth Engine scripts. These interfaces can include simple input\nwidgets like buttons and checkboxes, more complex widgets like charts and maps, panels\nto control the layout of the UI, and event handlers for interactions between UI\nwidgets. Explore the full functionality of the `ui` API in the\n**Docs** tab on the left side of the Code Editor. The following example uses\nthe `ui` package to illustrate basic functions for making a widget, defining\nbehavior for when the user clicks the widget, and displaying the widget.\n\nHello, world!\n\nThis example represents a simple UI of a button displayed in the console. Clicking the\nbutton results in 'Hello, world!' getting printed to the console:\n\nCode Editor (JavaScript) \n\n```javascript\n// Make a button widget.\nvar button = ui.Button('Click me!');\n\n// Set a callback function to run when the\n// button is clicked.\nbutton.onClick(function() {\n print('Hello, world!');\n});\n\n// Display the button in the console.\nprint(button);\n```\n\nObserve that first, the button is created with a single argument: its label. Next,\nthe button's `onClick()` function is called. The argument to\n`onClick()` is another function that will get run whenever the button is\nclicked. This mechanism of a function to be called (a \"callback\" function) when an\nevent happens is called an \"event handler\" and is used widely in the UI library. In this\nexample, when the button is clicked, the function prints 'Hello, world!' to the console.\n\nMutability\n\nNote that unlike objects in the `ee.*` namespace, objects within the\n`ui.*` namespace are mutable. So you don't need to reassign the object to a\nvariable every time you call an instance function on the object. Simply calling the\nfunction will mutate (change) the widget. Appending the following code to the previous\nexample results in registering another callback for the button's click event:\n\nCode Editor (JavaScript) \n\n```javascript\n// Set another callback function on the button.\nbutton.onClick(function() {\n print('Oh, yeah!');\n});\n```\n\nCopy this code to the end of the previous example and click **Run**. Now\nwhen you click the button, both messages are printed to the console.\n\nUse the UI pages to learn more about building UIs for your Earth Engine scripts. The\n[Widgets page](/earth-engine/guides/ui_widgets) provides a visual tour and describes basic\nfunctionality of the widgets in the `ui` package. The [Panels\nand Layouts page](/earth-engine/guides/ui_panels) describes top-level containers and layouts you can use to organize\nand arrange widgets. The [Events page](/earth-engine/guides/ui_events) has details on configuring\nthe behavior and interaction of widgets in your UI."]]