Hey everyone, so I'm using the JavaScript API to customize an ArcGIS web app and I need to take feature layers and group them in the layer list widget. Here's the code I have that does that: Customize Layer List Widget for ArcGIS Web App Builder · GitHub
I can do this through the addFeatureCollection method, but when I create new groups, the feature layers in the groups don't pull in their styles and symbology. Another issue is that when I take my original feature layers and then group them into feature collections, the layer list widget shows both the grouped feature collections, and the original feature layers. Here's what my app is looking like with the code as is.
Here's an ungrouped feature layer that's pulling in styles correctly:
And here's a grouped feature collection layer that isn't pulling in it's styles:
Does anyone know how I can get the styles for my feature layers and have the layer list widget not display the individual, ungrouped feature layers, but only the feature collections?
Solved! Go to Solution.
Jugal,
If you already have the layer in the web map and you just want to group them, then your code would look like this:
startup: function() { this.inherited(arguments); NlsStrings.value = this.nls; // summary: // this function will be called when widget is started. // description: // according to webmap or basemap to create LayerInfos instance // and initialize operLayerInfos; // show layers list; // bind events for layerLis; if (this.map.itemId) { LayerInfos.getInstance(this.map, this.map.itemInfo) .then(lang.hitch(this, function(operLayerInfos) { this.operLayerInfos = operLayerInfos; var thirdFloorLayers = []; array.forEach(this.operLayerInfos.getLayerInfoArray(), function(layerInfo) { //this is where I am searching for specific layers using their title if(layerInfo && layerInfo.title.substr(0, 7) === "Highway"){ thirdFloorLayers.push(layerInfo.layerObject); this.map.removeLayer(layerInfo.layerObject); } }, this); this.operLayerInfos.addFeatureCollection(thirdFloorLayers, "3rd Floor"); this.showLayers(); this.bindEvents(); 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(); dom.setSelectable(this.layersSection, false); })); } },
Jugal,
I think you are going to have to assign the renderer to the FeatureLayer when you add it to the collection you can use the esri/renderers/jsonUtils fromJson method to take the layers renderer json and get a renderer object.
Thanks for the heads up Robert. Do you know how exactly I can assign a unique value renderer to my feature layers? I have styles already established from the web mapping application saved on ArcGIS online but now I just need to pull them in from JSON and have them display in the feature layers in my feature collections. Do I assign the renderer in the widget.js file? And what exactly would it look like? I've been having some trouble finding useful samples that use the fromJson method.
I know this is what I need but I'm not sure where exactly it needs to be placed, how it needs to be integrated, and if I need to do anything else to have my styles appearing.
var featureLayerRenderer = featureLayer.renderer.toJson();
var renderer = esri.renderer.fromJson(featureLayerRenderer);
Jugal,
Can you do a console.info(featureLayer.renderer); in the Widget.js file where you are adding the layers to the collection and see what comes out in the console?
Here's what I'm getting:
And here's what I got when I tried console.info(firstFloorRooms.renderer)
Jugal,
I'm not real sure whats going on I thought that the layers renderer would not be null there. If you don't have access to the layers renderer there then all you can do is re-create it.
Could it have anything to do with the fact that all of this is occurring in the Widget.js file, which doesn't load any of the rendering modules? Here are the modules I'm pulling in.
define([
'jimu/BaseWidget',
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/_base/array',
'dojo/dom',
'dojo/on',
'dojo/query',
'dijit/registry',
'./LayerListView',
'./NlsStrings',
'jimu/LayerInfos/LayerInfos'
],
function(BaseWidget, declare, lang, array, dom, on,
query, registry, LayerListView, NlsStrings, LayerInfos) { ....
Jugal,
No you would only need the rendering modules if you are creating them using new keyword or trying to use a constant from them. The fact that the layer does not have a renderer when it get to the Widget.js is the issue. Are these featurelayers you are adding already part of the web map?