App Design

Introduction

This tutorial walks you through a template layout for an app in Earth Engine and shows you how to publish the app so that people who do not have an Earth Engine account or any knowledge of coding can still access your work.

By the end of the tutorial, you should have an app posted to your Earth Engine users account that looks like the example below.

Get started

Please make a new file in your repository named ‘wk11_app_template.js’, copy and paste the header below, and the work through the videos.

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//  TITLE:   App Design Template 
//  AUTHOR:  Jeff Howarth
//  DATE:    11/28/2023
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Side Panel

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

//  Side Panel

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

var side_panel 
;

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

//  Map Widget 

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

var map 
;

Split panel

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

//  Split Panel

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

var split_panel 
;

Initialize layout

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

//  Initialize Layout

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

Recycle map content from script

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

//  Recycle map content from script.

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

Labels

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

//  Labels 

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

// Write a title for your map.

var title ;

// Write a short description of the purpose of the map. 

var abstract ;

// Provide instructions for using the map. 

var instructions ;

// Provide a link to a narrative that helps people interpret what the map shows. 

var storyLink ;

//  Give credit to yourself and the course

var credits ;

var source ;

Type taxonomy

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

//  Define type taxonomy

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

// Dictionary for typeface (common styles for all labels)

var typeface 
;

// Dictionary for visual hierarchy.

var hierarchy 
;

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

//  Select Widget

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

var select_style 
;

var patterns = {
  'Flame': [121.454780, 31.222945, 6],
  'Aurora': [129.869311, 34.755374, 6],
  'Holiday lights': [75.171582, 62.896614, 6],
  'Red giant': [-103.072580, 48.261784, 6],
  'Political lines': [74.341854, 30.785147, 6]
};


var select_pattern = ui.Select({
  items: Object.keys(patterns),
  placeholder: 'Explore a pattern',
  style: select_style,
  onChange: function(key) {
    map.setCenter(patterns[key][0], patterns[key][1], patterns[key][2]);
  }
});

// side_panel.insert(3, select_pattern);