Hello Widget

Introduction

This short tutorial introduces User Interface (UI) widgets in Earth Engine. By the end of the tutorial, you should understand how to create and style a label widget and how to place the widget onto a Map.

To get started, please make a new file in your repository called ‘wk11_hello_widget.js’, copy the header below, and paste it into the new file. Then work through the videos below.

Please note that when I recorded the videos I had been thinking of including a third video on panel widgets, but subsequently decided to save the panel tutorial for the worked out example.

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

//  TITLE:   hello_widget.js
//  AUTHOR:  Jeff Howarth
//  DATE:    11/28/2023
//  PURPOSE: Introduce label widget and how to style it. 

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---

Label widget

// ><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

//  Introduction to Labels 

// ><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

var test_label 
;

---

Styling a label widget

// Style dictionary for label widget. 

var label_style = 
    {
      // color: 'red',
      // backgroundColor: '#cccccc',
      // height: '100px',
      // width: '100%',
      // padding: '10px',
      // margin: '20px',
      // border:'4px solid orange',
      // fontSize: '24px',
      // fontWeight: 'bold',
      // fontFamily: 'Helvetica',
      // textAlign: 'left',
      // textDecoration: 'underline',
      // whiteSpace: 'wrap',
      // shown: false,
      // stretch: 'vertical'
    }
  ;

---

Resources

• CSS Box Model
• CSS Fonts
• HTML Color Names

---

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 4.0 International License.