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.
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.
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
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
Humza,
Understood, I am trying to find a solution.
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.
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.
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.
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); })); }
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
