Adding a logo to a panel on an app in Google Earth Engine?

Question

How can I add a logo to a panel on an app in Google Earth Engine?

I don't even know how to upload a JPG or PNG to an asset and then add that image to the UI. Panel that I have on the right. Similar to the image below.

Answer 1

To add a logo to a panel on GEE, you can upload it to your asset or host it externally.

Option 1: Hosting an image externally and add as ui.Chart()

This option will create an ugly blue border around your logo.

1. Upload your image to any website which allows direct html retrieval of your image. HTML retrieval is important. Without it this option will not work. Popular services like Google Drive, Google Photos will not work. Github works.
2. Obtain the link for your image (this should end with .jpg or .png). When you click on this link, the only thing visible must be your image.

3. Add this chunk to your code editor after replacing earth engine logo link with your logo's link.

   var table = ui.Chart(
   [
     ['<h2>Test Title</h2>'],
     ['<img src=https://earthengine.google.com/static/images/earth-engine- 
       logo.png width=150px>']
   ],
   'Table', {allowHtml: true});
   
   
   var titlePanel = ui.Panel([table], 'flow', {width: '300px', padding: '8px'});
   ui.root.insert(0, titlePanel);
   
   

   Example of this working can be found here. Full credit goes to Ujaval Gandhi for this solution posted on the GEE Developers Google Group.

Option 2: Uploading to your GEE Asset

This option will let you add the logo exactly like you want it (without any ugly borders) but needs more work.

1. Convert your logo to geotiff format. Use gdal on python, or any software like qgis to do that. The coordinate reference system can be anything. You need not worry about that. This step is necessary because GEE Assets do not accept jpgs or pngs at the moment.

2. Upload your logo in geotiff format as an asset in GEE by clicking on `Assets >> New >> GeoTiff

   

3. Now open the code for your app and insert the following chunk:

   var logo = ee.Image('users/<your_username>/<AssetID_for_logo>').visualize({
       bands:  ['b1', 'b2', 'b3'],
       min: 0,
       max: 255
       });
   var thumb = ui.Thumbnail({
       image: logo,
       params: {
           dimensions: '642x291',
           format: 'png'
           },
       style: {height: '127px', width: '280px',padding :'0'}
       });
   var toolPanel = ui.Panel(thumb, 'flow', {width: '300px'});
   ui.root.widgets().add(toolPanel);
   

Example of this working can be found here.

Answer 2

Yes, @Rodrige E. Principe is right, GFW is not solely within the GEE environment. Global Forest Change Explorer is the one that is, and that one does not have a logo. However, I recently saw this post on the GEE Developer Google Group, about inserting logos into GEE apps. See the link to the discussion and script embed.