[GIS] Google Earth Engine: pop-up when clicking on geometry/Feature

google-earth-enginegoogle-maps-api

This may be more of a JavaScript question than a GIS question.
I'm adding feature points to a GEE map (https://code.earthengine.google.com/2d6c3146e5468cb9f14e10039ca22b59). My goal is to map point features from an asset table (which has associated data), and view those data when clicking on the features on the map.

Google Map API has an infowindow function (https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple) but I'm not sure if or how it can be incorporated into a GEE script.

Is it possible to have a pop-up bubble (info window) show up when a feature is clicked? I have looked through GEE guides but couldn't find any function already existing.

Here is an example script: 

// Import DEM
var collection = 'WWF/HydroSHEDS/03VFDEM';
var band = 'b1';
var dataset = ee.Image(collection).select(band);
var elevationVis = {
  min: -50.0,
  max: 3000.0,
  gamma: 2.0,
};
// create point geometry (will call an asset in the real script)
var point = ee.Geometry.Point([-61.334, 15.416]);

Map.setCenter(-61.334, 15.416, 10);
Map.addLayer(dataset, elevationVis, collection);
Map.addLayer(point, {}, "acou");

// example from Google Map API
// should be placed earlier in the script but causes GEE to stop runing
var contentString = '<div id="content">'+
            '<p><b>Hello</b>'+
            '</div>';
var infowindow = new google.maps.InfoWindow({
          content: contentString
        });
var marker = new google.maps.Marker({
          position: point,
          map: map,
          title: 'Uluru (Ayers Rock)' });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

Best Answer

This is a bit of a workaround, but you can listen for map clicks and update ui elements based on the results. This only inspects one point, but you could add more to a feature collection. Also, this only updates a label at the top of the map, not at the point:

// Import DEM
var collection = 'WWF/HydroSHEDS/03VFDEM';
var band = 'b1';
var dataset = ee.Image(collection).select(band);
var elevationVis = {
  min: -50.0,
  max: 3000.0,
  gamma: 2.0,
};
// create point geometry (will call an asset in the real script)
var point = ee.Geometry.Point([-61.334, 15.416]);
var feature = ee.Feature(point, {'text_prop': 'Hello!'})

Map.setCenter(-61.334, 15.416, 10);
Map.addLayer(dataset, elevationVis, collection);
Map.addLayer(point, {}, "acou");

// Create a panel and add it to the map.
var inspector = ui.Panel([ui.Label('Click on the point')]);
Map.add(inspector);

Map.onClick(function(coords) {
  // Show the loading label.
  inspector.widgets().set(0, ui.Label({
    value: 'Loading...',
    style: {color: 'gray'}
  }));

  var click_point = ee.Geometry.Point(coords.lon, coords.lat);

  // compute distance, a long running operation
  var computedValue = click_point.distance(feature.geometry())

  computedValue.evaluate(function(result) {
    if (result < 1000) {
      // get the text property, a long running operation
      var lbl = feature.get('text_prop')
      lbl.evaluate(function(result) {
        inspector.widgets().set(0, ui.Label({
          value: 'Text: ' + result,
        }))
      });
    } else {
      inspector.widgets().set(0, ui.Label({
        value: 'Text: ' + 'Clicked to far away',
      }));
    }
  });
});
Related Question