Get Styles for Feature Layer in Feature Collection, Customize Layer List

6657
16
Jump to solution
04-01-2016 12:34 PM
JugalPatel
New Contributor II

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: Feature layers with styles.png

And here's a grouped feature collection layer that isn't pulling in it's styles:

Feature collection without styles.png

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?

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

16 Replies
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos
JugalPatel
New Contributor II

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.

0 Kudos
JugalPatel
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?

JugalPatel
New Contributor II

Here's what I'm getting: console log 2.png

0 Kudos
JugalPatel
New Contributor II

And here's what I got when I tried console.info(firstFloorRooms.renderer)

console log 3.png

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

JugalPatel
New Contributor II

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) { ....

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?