Exporting image from app-side using Google Earth Engine

Question

I've built an app that displays an image. I want the user of the app to be able to download the data from the viewport in a GeoTIFF format for further use in GIS.

I've got my export function running on the developer side and can download the data via the Tasks pane as per instructions. But is there a way to open this download up for the external user? I'm starting to fear not....

Here is the relevant code that creates/adds a button to execute the export function.

// Export data function
var exportData = function(range) {
  print("Exporting data...")
  Export.image.toDrive({
    image: ndvi,
    description: 'imageToDriveExample',
    folder: "GEE_Exports", 
    fileNamePrefix: "NDVI",
    dimensions: "10000x10000",
    scale: 30,
    shardSize: 100,
    fileDimensions: 1000,
    fileFormat: "GeoTIFF"
    //maxPixels: 1e12
  });
}
//...add update map button to panel
var exportDataButton = new ui.Button({
  label: 'Export Data',
  //style: {stretch: 'horizontal'}
});
// Register the function to the button click event.
exportDataButton.onClick(exportData);
// Add to button panel
buttPanel.add(exportDataButton);

If this is possible, will I need a cloud account?

Answer 1

You can use the getDownloadURL() image method to print a download URL to a ui.Label element. The following snippet is a complete example. Note that this should only be used to download small regions, it is not intended for large-scale data distribution applications.

/**
 * @license
 * Copyright 2019 Google LLC.
 * SPDX-License-Identifier: Apache-2.0
 */

// Import an image and display it to the Map.
var img = ee.Image('LANDSAT/LC08/C01/T1_SR/LC08_044034_20140318');
var imgVis = {bands: ['B6', 'B5', 'B4'], min: 500, max: 3000};
Map.centerObject(img, 12);
Map.addLayer(img, imgVis, 'Image');

// Define a function to generate a download URL of the image for the
// viewport region. 
function downloadImg() {
  var viewBounds = ee.Geometry.Rectangle(Map.getBounds());
  var downloadArgs = {
    name: 'ee_image',
    crs: 'EPSG:5070',
    scale: 30,
    region: viewBounds.toGeoJSONString()
 };
 var url = img.getDownloadURL(downloadArgs);
 urlLabel.setUrl(url);
 urlLabel.style().set({shown: true});
}

// Add UI elements to the Map.
var downloadButton = ui.Button('Download viewport', downloadImg);
var urlLabel = ui.Label('Download', {shown: false});
var panel = ui.Panel([downloadButton, urlLabel]);
Map.add(panel);

Code Editor link