1

I am trying to create a scenario in Earth Engine where a user has three drop down selects. On each select, the next select will be filtered by spatial intersections of the first select, and the third filtered by the previous two. These feature collections are all fusion tables.

Example: First Select a National Forest Region. Then select a county that intersects the chosen Forest, and then again with municipalities.

These could either be redrawn, or identified by a red outline. Current Code:

https://code.earthengine.google.com/a4eeb8497622f1863b9c13592b829096

var panel = ui.Panel({style: {width: '400px'}})
    .add(ui.Label('New Mexico Forest Watch'));

var s1 = ui.Select(forestname.aggregate_array('name').getInfo());
var s2 = ui.Select(nmcounties.aggregate_array('name').getInfo());
var s3 = ui.Select(places.aggregate_array('name').getInfo());

s1.onChange(function(value, widget) {
  s1.get(value).evaluate(function(list) {
      s2.nmcounties().reset(list)
      s2.setValue(list[0])
  })
})


// print(s1)
// print(s2)
// print(s3)


Map.addLayer(forestname);
Map.addLayer(nmcounties);
Map.addLayer(places);
ui.root.add(panel);
panel.add(ui.Label('1')).add(s1).add(s2).add(s3);` 
0

You'll need to put the defining of the following ui.Select as a result of the onChange() of the previous ui.Select.

//cascading ui.Select

//Set my lists
var myList = ["1","2","3","4"]
var list2 = { 
              1:["a","b","c"],
              2:["e","f","g"],
              3:["h","i","j"],
              4:["k","l","m"]
}

// create the select
var firstSelect = ui.Select(myList)

// print it to the console
print(firstSelect)

// set the function to run when firstSelect is selected
var loadSecondSelect = function(){
  var myValue = firstSelect.getValue()
  var myList2 = list2[myValue]
  //create the select
  var secondSelect = ui.Select({
    items:myList2,
    // function to run when the change happens
    onChange:function(){
      var firstValue = firstSelect.getValue()
      var secondValue = secondSelect.getValue()
      print("First:",firstValue)
      print("Second:",secondValue)
    }
  })
  //print secondSelect to the console.
  print(secondSelect)
}

//Set the onChange function for firstSelect
firstSelect.onChange(loadSecondSelect)

Keep in mind that everything that happens with the ui. happens in the client. So often if you are dealing with server variables, you need to use .getInfo() to bring the values to the client.

  • In terms of importing values from a fusion table, would you need to write in all the selections and for each select? var myList = ["1","2","3","4"] would become var myList = ["Carson National Forest","Lincoln National Forest" ...etc, and then manually figure out intersecting counties: var list2 = { Carson National Forest:["Santa Fe"," Rio Arriba","Toas"], Lincoln National Forest:["Sierra","Lincoln","Otero"], ect... } ? How would the lists be cognizant of the fusion table? – sean oneill Feb 12 at 17:22
  • If you use a fusion table, you would need to bring your list to a client variable before the ui.Select() could use it. Could you put a code snippet to help clarify? – Sean Roulet Feb 12 at 18:52
  • Here is the code I've got: code.earthengine.google.com/9e0162e93ba89caa9c6f6e9b30a86ea6 – sean oneill Feb 12 at 21:13
  • I think you misunderstood what I meant. When you are creating a question, if you look at the text tools, one of them is "{}" which means insert code. If you copy functional code and paste it in your question, that is a code snippet that can be searched in future by anyone who might have a similar question. Your link to code might not work in the future. – Sean Roulet Feb 13 at 13:11

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.