Community

Webapp Builder Layer List Widget

10805
45
Jump to solution
08-18-2015 04:44 PM
JayClark
by
New Contributor II
‎08-18-2015 04:44 PM

My table of contents has 4 group layers (each group can have multiple layers).  When the user clicks on "Critical Area" group, I also want the event to check on and draw the "Percent Slope" group.  I'm not really interested in answering questions about why I would want to do this way, because it is kind of nutty, but rather, how to do this in the javascript code, so that I get better at tinkering with the widgets.  I'm able to write to the console if a user checks on "Critical Areas" but not at all sure how to have the code check on and draw the "Percent Slope" group:

From the "LayerListView.js" in the Layer list widger for webappbuilder:

   _onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {

      if (ckSelect.checked) {

        layerInfo.setTopLayerVisible(true);

//  test how to find layer name

        if (layerInfo.title === 'Critical Areas')

           {

              console.log(layerInfo.title);

//  I want this to check on and draw another group in the layer list--Any ideas?

            }

      } else {

        layerInfo.setTopLayerVisible(false);

      }

      evt.stopPropagation();

    },

0 Kudos
45 Replies
ikbelkachbouri
by
New Contributor II
‎02-13-2018 02:34 AM

Thank you so much mehretab . And how to toggle between many maps ?

0 Kudos
Mehretab
by
Occasional Contributor II
‎02-13-2018 02:42 AM

 my application also toggles between many services. If you see for example the 'Surfacewater bodies' group you got many services there (use the buttons on the bottom of the application to change between groups of maps). If you can give me the Ids for you services I can provide the complete code for you. Is you app publicly available? 

0 Kudos
ikbelkachbouri
by
New Contributor II
‎02-13-2018 02:50 AM

I will publich for you the application and the list of feature services . thank you so much

http://41.231.36.249/sirgeo/rest/services/SIR_Gouv/D%C3%A9mographie/FeatureServer

0 Kudos
ikbelkachbouri
by
New Contributor II
‎02-13-2018 03:09 AM

This is a Demo .

0 Kudos
Mehretab
by
Occasional Contributor II
‎02-13-2018 04:17 AM

Hi Ikbel,

Here is the code in your case. Justs copy and replace the _onCkSelectNodeClick function by this code.

Couldn't find a way to upload the file.

/////////
// id = "Démographie_2496" , title ="Population Totale"
//id = "Démographie_1127" , title ="Nombre de naissances"
//id = "Démographie_4091" , title ="Solde migratoire"
//id = "Démographie_2202" , title ="Nombre de mariages"
//id = "Démographie_4468" , title ="Nombre de divorces"
//id = "Démographie_7450" , title ="Nombre de décès"
//id = "Démographie_348" , title ="Taux Brut de Natalité"
//id = "Démographie_8957" , title ="Taux Global de Fécondité"
//id = "Démographie_1881" , title ="Indice Synthétique de Fécondité"
//id = "Démographie_5333" , title ="Taux d'Accoissement Naturel"
///////////////////////////////

onCkSelectNodeClick: function(layerInfo, ckSelect, evt) {

 

      if (ckSelect.checked) {

 

        layerInfo.setTopLayerVisible(true);

 

        if (layerInfo.title === 'Population Totale')  {

           //  how to find layer id

              //console.log(layerInfo.id);

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
            
               }

                                           

   if (layerInfo.title === 'Nombre de naissances')   {

              //console.log(layerInfo.id);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 
            }

                                           

if (layerInfo.title === 'Solde migratoire')  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 

            }
if (layerInfo.title === 'Nombre de mariages')  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 

            }
if (layerInfo.title === 'Nombre de divorces')  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 

            }
if (layerInfo.title === 'Nombre de décès')  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 

            }
if (layerInfo.title === 'Taux Brut de Natalité')  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 

            }
if (layerInfo.title === 'Taux Global de Fécondité')  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 

            }
if (layerInfo.title === 'Taux Global de Fécondité')  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 

            }

if (layerInfo.title === 'Indice Synthétique de Fécondité')  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_5333').setTopLayerVisible(false);
 

         }
           if (layerInfo.title === "Taux d'Accoissement Naturel")  {

this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2496').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1127').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4091').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_2202').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_4468').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_7450').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_348').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_8957').setTopLayerVisible(false);
this.layerListWidget.operLayerInfos.getLayerInfoById('Démographie_1881').setTopLayerVisible(false);
 

         }

      } else {

        layerInfo.setTopLayerVisible(false);

      }

      evt.stopPropagation();

    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Make sure I didn't mess with the Ids

ikbelkachbouri
by
New Contributor II
‎02-15-2018 03:55 AM

Thank you so much Mehretab . It ok for layer lists and how to toggle now between maps ? 

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎02-15-2018 05:30 AM

Ikbel,

   Are you asking to toggle between web maps (i.e. the whole map that the app uses and not just a layer in the map)?

0 Kudos
ikbelkachbouri
by
New Contributor II
‎02-15-2018 05:34 AM

Hi Robert , 

yeah i mean the hole map that the app uses like in Mr  Mehretab T.Sium Demo : ArcGIS Web Application  

I'm using  WAB for arcgis 2.7 . Thank you so much Robert . 

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎02-15-2018 06:07 AM

Ok, I am not sure he is actually switching the web map but let wait for him to reply.

0 Kudos