Accessing layer properties of a LayerList JavaScript version 3.23

[Carlos_RaúlMontaño_Espinosa]

I programmed an application in ArcGIS JavaScript version 3.23. The aplication uses a LayerList. It is required to know if one of the layers is visible (active) or not in order to be able to perform another action. Which is te ay to access de visibility property of any of the layers? or How sholuld I know if one of the layers was activated by te user and it is visible?. The idea is that when any of the layers Aquifers or Basins is selected and that the user clicks on some element, Aquifer or Basin, select this element in a unique way.

Next I show the parts of the program that I use

app.map = new Map("map", {
            map: map,
         basemap: "topo",      
         center: [-102.199176, 23.068129],
         minZoom: 4,
         autoResize: true,
         zoom: 5,
         fadeOnZoom: true,
         infoWindow: popup,
         navigationMode: "css-transforms"
      });

          
app.map.on("layers-add-result", function (evt) {
  var layerListDom = new LayerList({
    map: app.map,
     layers:  [{ 
     layer: f1,
        showSubLayers: false, 
        showLegend: true, 
        showOpacitySlider: true, 
        visibility: false, 
        id: "Aquifers" 
      },{ 
        layer: f2,
     showSubLayers: false, 
     showLegend: true, 
     showOpacitySlider: true, 
     visibility: false, 
     id: "Basins" 
      },
     },"layerList");
     layerListDom.startup(); 


app.map.on("click", function (evt) {
     var query = new Query();
     query.geometry = evt.mapPoint;
     var layer_visible = app.map.getLayer(app.map.layerIds[0]);
     var layer_visible1 = app.map.getLayer(app.map.layerIds[1]);
   if (layer_visible.visibility === true) {
  var deferred = f1.selectFeatures(query, FeatureLayer.SELECTION_NEW, function 
  (selection) {     });
    } 
  if (layer_visible1.visibility === true) {
   var deferred = f2.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (selection) { });
   } 
    app.map.infoWindow.setFeatures([deferred]);
     app.map.infoWindow.show(evt.mapPoint);
 });

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Carlos,

   You should just listen for the LayerList toggle event:

https://developers.arcgis.com/javascript/3/jsapi/layerlist-amd.html#event-toggle 

[Carlos_RaúlMontaño_Espinosa]

Hi Robert,

Thank you very much, for your answer. 

I alredy have changed the programm and the change looks like this:

app.map.on("click", function (evt) {
    var query = new Query();
    query.geometry = evt.mapPoint;
    on(layerListDom,'toggle', function(evt){
 if (layerIndex[1].visible === true) {
  var deferred = f1.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (selection) { });
  } 
 if (layerIndex[2].visible === true) {
  var deferred = f2.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (selection) { });
  } 
 }); 
 app.map.infoWindow.setFeatures([deferred]);
 app.map.infoWindow.show(evt.mapPoint);
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

However it doesn't seem to work, where is the mistake?

Once again, thank you very much!

[RobertScheitlin__GISP]

Carlos,

   The way you have the code now the toggle event listener is not added until the map is clicked, therefore the deferred would be null until a second map click. You should add the toggle event listener after you create your layer list widget and then set some global variable if layer 1 or layer 2 are visible.

[KenBuja]

You are also adding a new event listener each time you click on the map.

[Carlos_RaúlMontaño_Espinosa]

Hi Robert, Hi Ken,

Thank you very much for your comments which have been very helpful. I've changed the code and it woks better, but the problem is that it doesn't recognise any poligon. I gess the way Itried to acces the property "visible" of the layerList is not correct. Here the new code. 

//Global variables 
var layerAcuiVisible, layerCuenVisible;

app.map.on("layers-add-result", function (evt) {
   var layerListDom = new LayerList({
   map: app.map,
  layers:  [{ 
      layer: f1,
      showSubLayers: false, 
         showLegend: true, 
      showOpacitySlider: true, 
         visibility: false, 
         id: "Acuíferos" 
        },{ 
         layer: f2,
      showSubLayers: false, 
      showLegend: true, 
      showOpacitySlider: true, 
      visibility: false, 
      id: "Cuencas" 
    }],
      showLegend: true,     
  },"layerList");
  layerListDom.startup(); 
 });

app.map.on("click", function (evt) {
  var query = new Query();
  query.geometry = evt.mapPoint;
if (layerAcuiVisible) {
  var deferred = f1.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (selection) { });
   }
if (layerCuenVisible) {
  var deferred = f2.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (selection) { });
  }
  app.map.infoWindow.setFeatures([deferred]);
  app.map.infoWindow.show(evt.mapPoint);
});

//It verifies which one of the layers is visible
on(dom.byId("layerList"),'toggle', function(evt){
 layerAcuiVisible = evt.dom.byId("layerList").layers.id("Acuíferos").visible;
 layerCuenVisible = evt.dom.byId("layerList").layers.id("Cuencas").visible;
}); 

        ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Carlos,

  I am not sure why you are not using the evt data that is provided in the toggle evt.

When the toggle event is fired the evt data contains the layerIndex and visible property for that layer. 

[Carlos_RaúlMontaño_Espinosa]

Robert, 

The reason is I'm not sure about the syntax, could it be something like this?

on(dom.byId("layerList"),'toggle', function(evt){
  layerCuenVisible = evt.layerList.layerIndex(0).visible;
  layerCuenVisible = evt.layerList.layerIndex(1).visible;
 }); 
          ‍‍‍‍‍

[RobertScheitlin__GISP · Accepted solution]

Carlos,

   You don't need documentation to figure out what is returned in the event data, all you need to do is log it out to the console. When you do that you can see the returned object structure.

app.map.on("layers-add-result", function (evt) {
   var layerListDom = new LayerList({
   map: app.map,
  layers:  [{ 
      layer: f1,
      showSubLayers: false, 
         showLegend: true, 
      showOpacitySlider: true, 
         visibility: false, 
         id: "Acuíferos" 
        },{ 
         layer: f2,
      showSubLayers: false, 
      showLegend: true, 
      showOpacitySlider: true, 
      visibility: false, 
      id: "Cuencas" 
    }],
      showLegend: true,     
  },"layerList");
  layerListDom.startup();

  on(layerListDom,'toggle', function(evt){
    //because Acuíferos is the first layer added to the widget it's index is 0
    if(evt.layerIndex === 0 && evt.visible){
      layerAcuiVisible = true;
    }else{
      layerAcuiVisible = false;
    }
    if(evt.layerIndex === 1 && evt.visible){
      layerCuenVisible = true;
    }else{
      layerCuenVisible = false;
    }
  }); 
 });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍