Editing LayerList widget to include multiple Groups/Divs of layers

[HumzaAkhtar]

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.

[XiaodongWang]

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);
          }));
        }

[HumzaAkhtar]

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.

[XiaodongWang]

Humza,

Understood, I am trying to find a solution.

[deleted-user-CQZbjNeBXm49]

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

[DanielStoelb]

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.

[XiaodongWang]

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.

[DanNorman]

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

[DanNorman]

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

Thanks!

don

[DanNorman]

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