1 of 12

Google Earth Engine Apps

Yvonne Fong

2 of 12

Agenda

  • Earth Engine Apps Overview
  • Components of an App
  • Let’s Build an App!

3 of 12

Why Earth Engine Apps?

Advantages

​

  • Lets you disseminate your analyses/research to everyone outside the EE community
  • Does not have a console and results are printed within the User Interface (UI)
  • Friendlier way to analyse and visualise data than using a script interface

Disadvantages

​

  • Earth Engine code can be accessed (although not easily)

4 of 12

Public Examples

https://www.earthengine.app/

5 of 12

Components of an App

  • Source Code
  • Widgets
  • Panels and Layouts
  • Styles

6 of 12

Source Code

7 of 12

Widgets

  • ui.Label
  • ui.Button
  • ui.Checkbox
  • ui.Slider
  • ui.DateSlider
  • ui.Textbox
  • ui.Select
  • ui.Chart
  • ui.Map
  • ui.Map.Layer

​

Chart

Map

Layer

8 of 12

Panels and Layouts

Panels

​

  • ui.Panel
  • ui.Map
  • ui.root

Layouts

​

  • Flow
  • Absolute

9 of 12

Styles

  • Height, maxHeight, minHeight
  • Width, maxWidth, minWidth
  • Padding, margin
  • Color, backgroundColor
  • Border
  • fontSize
  • fontWeight
  • fontFamily
  • textAlign
  • whitespace
  • shown

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

  • (e.g. “100px”)
  • (e.g. “100px)
  • (e.g. “4px 4px 4px 4px” or “4px”
  • (e.g. “red” or “#FF0000”)
  • (e.g. “1px solid black”)
  • (e.g. “24px”)
  • (e.g. “bold” or “100”)
  • (e.g. “monospace” or “serif”)
  • (e.g. “left” or “center”)
  • (e.g. “nowrap” or “pre”)
  • (true or false)

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

​

10 of 12

Let’s Build an App!

  1. Have a vision
  2. Prepare data
  3. Add widgets and panels
  4. Add functionality

​

https://code.earthengine.google.com/?accept_repo=users/yvonnefong/ee_sg_apps

11 of 12

Want to learn more about Earth Engine?

https://eodatascience.com/resources/training-courses

12 of 12

Thank you

yvonne.fong@eodatascience.com