Earth Engine App: Take your GEE expertise to next level.

What is Earth Engine App?

Earth Engine App allows you to share you data/map without having to share your code to others. You can just send the link and people will be able to see your work. The benefit is they cannot see your code but they can see the final output and your interactive maps. Check my Earth Engine App sample here:

App Engine applications are easy to create, maintain, and scale as your traffic and data storage needs change. You simply upload your application source code and it’s ready to go. Typically, your App Engine code includes the Earth Engine Python client library and makes requests to the Earth Engine backend using a service account. This is advantageous because it allows anyone to use your app without logging in or being a registered Earth Engine user. Note that the standard Earth Engine usage limits apply to each service account. If you’re new to developing for App Engine, be sure to check out the App Engine Python or Node.js quickstart before proceeding. Read more about App Engine here:

How to create App Engine?

In this tutorial, we will learn how to create an App Engine. There are 4 basic steps that you need to follow in order to become able to make an App Engine. They are:

  1. Create your own project
  2. Set up credentials
  3. Run locally
  4. Share

1. Create your own project

First thing first, create your own project. Use this code to create your project. Learn more about this code in this tutorial.

var countries = ee.FeatureCollection("ft:1tdSwUL7MVpOauSgRzqVTOwdfy17KDbw-1d9omPw")
var country_name = ['Germany']
var country = countries.filter(ee.Filter.inList('Country', country_name));

Map.centerObject(country,6);  //Zoom to Study area
var image = ee.Image().toByte()
    //.paint(roi, 'fill') // Get color from property named 'fill'
    .paint(country, 2, 2); // Outline using color 3, width 5.
    
Map.addLayer(image, {palette: ['000000', '000000', '000000', '000000'], max: 0.5, opacity: 0.9,},"Boundary of "+country_name);

// Load a global elevation image.
var elev = ee.Image('USGS/GMTED2010')

// Add the elevation to the map.
Map.addLayer(elev, {}, 'elevation b/w');
var shade = ee.Terrain.hillshade(elev);
var clipped = shade.clipToCollection(country);
var sea = elev.lte(0);
var elevationPalette = ['FAFDFB','061E84', '1BB747','F0CA0E', 'F07B0E', 'F90B04'];
var visParams = {min: -200, max: 1000, palette: elevationPalette};
var visualized = ee.ImageCollection([
  elev.mask(sea.not()).visualize(visParams),
  sea.mask(sea).visualize({palette:'000022'})
]).mosaic();
var hsv = visualized.divide(255).rgbToHsv();
var hs = hsv.select(0, 1);
var v = shade.divide(255);
var rgb = hs.addBands(v).hsvToRgb().multiply(255).byte();
Map.addLayer(rgb.clip(country), {}, 'Elevation of '+country_name);
// Add checkbox//
var checkbox = ui.Checkbox('Boundary of '+country_name, true);
checkbox.onChange(function(checked) {
Map.layers().get(0).setShown(checked);
});
Map.add(checkbox);

 /************************ legend ****************************/
var names = ['Elevation -100 - 0m','Elevation 0 - 200m', 'Elevation 200 - 400m','Elevation 400 - 600m','Elevation 600 - 800m','Elevation 800 - 1000m',];
var values = ['1', '2', '3','4','5','6'];
var elevationPalette = ['FAFDFB','061E84', '1BB747','F0CA0E', 'F07B0E', 'F90B04'];
// set position of panel
var legend = ui.Panel({style: { position: 'bottom-left', padding: '8px 15px'}});
 
// Create legend title
var legendTitle = ui.Label({value: 'Elevation Legend of '+country_name,style: {fontWeight: 'bold',fontSize: '18px',margin: '0 0 4px 0',padding: '0'}});
 
// Add the title to the panel
legend.add(legendTitle);
 
var makeRow = function(color, name) {
  // Create the label that is actually the colored box.
  var colorBox = ui.Label({
    style: {
      backgroundColor: '#' + color,
      // Use padding to give the box height and width.
      padding: '8px',
      margin: '0 0 4px 0'
    }
  });

  // Create the label filled with the description text.
  var description = ui.Label({value: name,style: {margin: '0 0 4px 6px'}});

  // return the panel
  return ui.Panel({ widgets: [colorBox, description],layout: ui.Panel.Layout.Flow('horizontal')});
};
 
// Add color and and names
for (var i = 0; i < 6; i++) {legend.add(makeRow(elevationPalette[i], names[i]));
  }  

// Add the legend to the map.
Map.add(legend);

Once you are done writing the code (and your code runs all good), follow these steps:

  1. Use the Google Cloud Console to create a new project. (You may need to accept the terms of service as part of this process.)
  2. Enter a project name. (Note that the project name is distinct from the project ID. The project ID is based on the name by default, but you can edit the ID independently of the name by clicking Edit.)
  3. Click CREATE.
  4. If prompted, choose a region close to the users for your app.

2.Set up credentials

  1. Once you click create, a new widow pops up. Give your title, “Elevation Map Germany”
  2. You are required to obtain “Google Cloud Project API Key”. Click the option “Click here”.
  3. This brings you to “Create API Key” page.
  4. Click “Create API Key”.
  5. Name your project “Elevation Map of Germany”
  6. Click Next.
  7. A pop window opens with a API Key. Copy the key, go back to step 2 and paste it.
  8. Check “Current Contents of Editor”
  9. Click “Publish”

3.Run locally

Your app is ready to run. In the Manage Apps, find “Elevation Map of Germany”. And you have this nice looking map.

4. Share

To share your map, copy the url and share your map.


14 thoughts on “Earth Engine App: Take your GEE expertise to next level.”

  1. Pingback: Add Legends and Title to your Map in GEE – DINESH SHRESTHA

  2. Pingback: Develop a Harmonic Model: Original vs Fitted NDVI values (Study Area: Thailand) – DINESH SHRESTHA

  3. Pingback: Using Hansen Global Forest Change Data to determine Forest Cover, Forest Gain, and Forest Loss (Study Area: Malaysia) – DINESH SHRESTHA

  4. Pingback: Make your map look Artistic – Add Grid Lines in your Map (Study Area: Canada) – DINESH SHRESTHA

  5. Pingback: Night Light Maps (Study Area: South Asia) – DINESH SHRESTHA

  6. Pingback: How to generate Histogram in Google Earth Engine? – DINESH SHRESTHA

  7. Pingback: Using 2001 MODIS Land Cover Type Yearly Global 500m Data to Determine the Land-Cover Analysis (Study Area: Mexico) – DINESH SHRESTHA

  8. Pingback: Learn How to Add two charts next to the map to interactively display a time-series of NDVI and reflectance for each click on the map? – DINESH SHRESTHA

  9. Pingback: Create a Chart to show Landsat 8 TOA Spectra at three points near Mumbai City – DINESH SHRESTHA

  10. Pingback: Learn how to calculate and export 90th Percentile Annual NDVI for years 1985-2019 using Landsat 8, 7, and 5 scenes (Study Area: Turkey) – DINESH SHRESTHA

  11. Pingback: Use 2018 Landsat 8 Scenes for Land Cover Classification in Google Earth Engine (Study Area: Dubai) – DINESH SHRESTHA

  12. Pingback: Land Cover Change Analysis between 1999 and 2018 in GEE (Study Area: Mumbai) – DINESH SHRESTHA

  13. Pingback: Time-lapse: Animate 30m Landsat images generated 90th percentile Annual NDVI from 1999 to 2018 (Study Area: South America) – DINESH SHRESTHA

  14. Pingback: Develop an App to Calculate Mean NDVI at Any Point. – DINESH SHRESTHA

Leave a Reply

%d bloggers like this: