Editing LayerList widget to include multiple Groups/Divs of layers

9191
12
07-20-2015 11:30 PM
HumzaAkhtar
Occasional Contributor II

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.

12 Replies
XiaodongWang
Esri Contributor

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
Occasional Contributor II

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.

Capture.PNG

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

0 Kudos
XiaodongWang
Esri Contributor

Humza,

Understood, I am trying to find a solution.

0 Kudos
deleted-user-CQZbjNeBXm49
Occasional Contributor III

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

0 Kudos
DanielStoelb
Occasional Contributor III

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.

0 Kudos
XiaodongWang
Esri Contributor

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.

0 Kudos
DanNorman
Occasional Contributor

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

0 Kudos
DanNorman
Occasional Contributor

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

Thanks!

don

0 Kudos
DanNorman
Occasional Contributor

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

0 Kudos