0

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);
        });
  • Reply from donmccurdy on GEE github page: "Google Maps API cannot be used by a script in the code editor, no. The documented functions, like Map.*, are what's available. If there are particular features you find cumbersome in the EE API, that are easier in the Maps API, feedback is always welcome of course. github.com/google/earthengine-api/issues/97 – YGS Jul 16 at 19:08
1

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',
      }));
    }
  });
});
  • Thanks @phloem. It does work as a workaround but I'm wondering if there is any way to use the syntax of google map api in GEE. I'm guessing not, since GEE is meant more for calculations on environmental variables, not as much for mapping. What's the unit for the distance? – YGS Jul 13 at 0:29
  • This is all just guessing, but I think you can't use the JS API in GEE because it's not loaded on the GEE instance. The JS API actually is loaded in your browser (e.g. in Chrome dev tools you can interact with the google object), but not in the virtual code window, being executed on some remote server. – phloem Jul 13 at 0:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.