topic Re: Editing LayerList widget to include multiple Groups/Divs of layers in ArcGIS Web AppBuilder Questions

Editing LayerList widget to include multiple Groups/Divs of layers

HumzaAkhtar — Tue, 21 Jul 2015 06:30:58 GMT

How can one go about editing Layerlist widget UI so that multiple layers can be organized in different Divs with different titles. Forexample I wish to add 5 layers relating to Volcanos and 5 layers for Earthquakes in two different divs in the layerlistview.

Re: Editing LayerList widget to include multiple Groups/Divs of layers

XiaodongWang — Sun, 12 Dec 2021 02:08:01 GMT

For develop version 1.2, LayerList has provide a way that can add some Feature layers as a FeatureCollection(FeatureLyaersGroup), I think this function can achieve your goal, but develop version 1.2 will release in early August, if you using this function urgent, you can add some code as follows:

Add addFeatureCollection function to stemapp/jimu.js/LayerInfos/LayerInfos.js:

    addFeatureCollection: function(featureLayers, title) {
      //var id = this._getUniqueTopLayerInfoId(title);
      var id = title;
      var featureCollection = {
        layers: []
      };
      // set layer id
      array.forEach(featureLayers, function(featureLayer, index) {
        featureLayer.id = id + '_' + index;
        featureCollection.layers.push({
          id: featureLayer.id,
          layerObject: featureLayer
        });
      }, this);


      this.map.addLayers(featureLayers);


      var newLayerInfo;
      try {
        newLayerInfo = LayerInfoFactory.getInstance().create({
          featureCollection: featureCollection,
          title: title || id,
          id: id
        }, this.map);
        newLayerInfo.init();
      } catch (err) {
        console.warn(err.message);
        newLayerInfo = null;
      }


      if(newLayerInfo) {
        this.layerInfos.push(newLayerInfo);
        this.update();
        this.emit('updated');
      }
    },

In the stemapp/widgets/LayerList/Widget.js, add comments code to startup() as shown below:

        if (this.map.itemId) {
          LayerInfos.getInstance(this.map, this.map.itemInfo)
          .then(lang.hitch(this, function(operLayerInfos) {
            this.operLayerInfos = operLayerInfos;


            // ***begin*** added code in startup() of LayerList/widget.js
            var featureLayer1 = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/NapervilleShelters/FeatureServer/0");
            featureLayer1.title = "featureLayer1";
            var featureLayer2 = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/arcgis/rest/services/Energy/Geology/FeatureServer/6");
            featureLayer2.title = "featureLayer2";
            var featureLayers = [featureLayer1, featureLayer2];
            this.operLayerInfos.addFeatureCollection(featureLayers, "myGroupLayes");
            // ***end*** added code in startup() of LayerList/widget.js


            this.showLayers();
            //this.bindEvents();
            this.own(on(this.operLayerInfos,
                        'layerInfosChanged',
                        lang.hitch(this, this._onLayerInfosChanged)));
            dom.setSelectable(this.layersSection, false);
          }));
        } else {
          var itemInfo = this._obtainMapLayers();
          LayerInfos.getInstance(this.map, itemInfo)
          .then(lang.hitch(this, function(operLayerInfos) {
            this.operLayerInfos = operLayerInfos;
            this.showLayers();
            //this.bindEvents();
            this.own(on(this.operLayerInfos,
                        'layerInfosChanged',
                        lang.hitch(this, this._onLayerInfosChanged)));
            dom.setSelectable(this.layersSection, false);
          }));
        }

Re: Editing LayerList widget to include multiple Groups/Divs of layers

HumzaAkhtar — Wed, 22 Jul 2015 07:27:09 GMT

Thanks for your reply... However I donot wish to arrange the layers in terms of Feature Groups. All I am looking for is to add some non interactive text boxes between layers to group them like in the image below. The layers can be Feature, Tiled or Dynamic. I feel this should be straight forward but I do not know how to go about doing this.

As seen in the image above, I just wish to add some headings (non animated, non responsive texts) between layers.

Re: Editing LayerList widget to include multiple Groups/Divs of layers

DanielStoelb — Wed, 22 Jul 2015 15:40:57 GMT

Xiaodong,

Is there a specific place that the new code in the stemapp/jimu.js/LayerInfos/LayerInfos.js needs to be placed? I'm having an issue trying to get it to work. The issue I'm encountering is an empty layer list, with nothing showing underneath "Operational Layers".

Also, does this work with dynamic layers as well?

Thanks.

Re: Editing LayerList widget to include multiple Groups/Divs of layers

XiaodongWang — Thu, 23 Jul 2015 02:31:00 GMT

I am sorry Daniel, I have fix the bug in fist code snippets(update the line #35 from this._layerinfos to this.layerInfos), I test this code snippet on new version of WAB at before, now I have tested it on WAB1.1.

Please try again.

So far, does not support dynamic layers, maybe can support it in next release.

Re: Editing LayerList widget to include multiple Groups/Divs of layers

XiaodongWang — Thu, 23 Jul 2015 02:35:24 GMT

Humza,

Understood, I am trying to find a solution.

Re: Editing LayerList widget to include multiple Groups/Divs of layers

DanNorman — Mon, 17 Aug 2015 18:35:28 GMT

Hi this could be very helpful to me, thanks for posting the code! I noticed you have also commented out this.bindEvents(), is that important?

Thanks

don

Re: Editing LayerList widget to include multiple Groups/Divs of layers

DanNorman — Mon, 17 Aug 2015 18:48:02 GMT

Also, is it possible to group imageservices together or to group tables together?

Thanks!

don

Re: Editing LayerList widget to include multiple Groups/Divs of layers

DanNorman — Mon, 17 Aug 2015 19:51:55 GMT

Got it... for anyone searching here, if you want to group image services replace esri.layers.featureLayer with esri.layers.ArcGISImageServiceLayer

Re: Editing LayerList widget to include multiple Groups/Divs of layers

deleted-user-CQZbjNeBXm49 — Mon, 24 Oct 2016 10:14:46 GMT

Hi Humza,

Where you able to find a solutiion to this specific question? - "I just wish to add some headings (non animated, non responsive texts) between layers"

Please I would also like to replicate this in my application.

Thank you

Baba

Re: Editing LayerList widget to include multiple Groups/Divs of layers

GilbertoMatos — Fri, 17 Feb 2017 16:14:36 GMT

Hello!

I did exactly as you suggested. I was able to mount the layers widget with the groups and my layers within those groups. However, I have some problems, if you can give me a tip, I thank you.

1) I created a map in the portal, only with the topographic map, that is, without layers. I added the layers manually as per your hint, the problem is that the marked layers are not appearing in the caption widget.

2) I need, when the user clicks the checkbox of the group, the children checkboxes, referring to the layers, are all marked, the same is true, if a child checkbox is marked, the parent checkbox is also marked. The same is true, so if all child checkboxes are unchecked, the parent (group) checkbox should be unchecked, and if the parent checkbox is cleared, all children should be cleared.

Any help will be very useful. Sorry for weak English, but I'm Brazilian.

Thank you!
Gilberto.

Re: Editing LayerList widget to include multiple Groups/Divs of layers

Mehretab — Sun, 12 Dec 2021 02:08:04 GMT

Basically I wanted to organize my layers in layerlistwidget in categories, like none responsive text in between different category as in the original question. My question here is, is there a way to do so without the need to group them in ArcMap.

 
            // ***begin*** added code in startup() of LayerList/widget.js 
               // First group          
            var featureLayer1 = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/NapervilleShelters/FeatureServer/0");  
            featureLayer1.title = "featureLayer1";  
            var featureLayer2 = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/arcgis/rest/services/Energy/Geology/FeatureServer/6");  
            featureLayer2.title = "featureLayer2";  
            var featureLayers = [featureLayer1, featureLayer2];  
            this.operLayerInfos.addFeatureCollection(featureLayers, "myGroupLayes");
               // Second group
               var featureLayer3 = new esri.layers.FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/NapervilleShelters/FeatureServer/0");  
            featureLayer3.title = "featureLayer3";  
            var featureLayer4 = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/arcgis/rest/services/Energy/Geology/FeatureServer/6");  
            featureLayer4.title = "featureLayer4";  
            var featureLayersSecond = [featureLayer3, featureLayer4];  
            this.operLayerInfos.addFeatureCollection(featureLayersSecond, "myGroupLayes2");               
            // ***end*** added code in startup() of LayerList/widget.js  
  /**‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I also experimented the the feature collection code above in my layerlistwidget startup function(see the code ) but the title of the groups ("myGroupLayes" and " myGroupLayes2") are not visible in the layerlistwidget. Is it supposed to behave as in the graph or I am missing something. does it support dynamic layers too?

Thanks in advance

Re: Editing LayerList widget to include multiple Groups/Divs of layers

NathanHeickLACSD — Mon, 21 Sep 2020 21:48:20 GMT

Hi Xiaodong,

Does this code still apply to WAB Developer Edition 2.16? Does the group layer behave like a regular layer and have a check box to turn it on and off?

Thanks,
Nathan