retrieve symbols/icons from FeatureLayer

4857
7
Jump to solution
12-10-2015 11:07 PM
FriedaL
New Contributor II

I am consuming a featureLayer in my webmap (js API) and now want to get the different symbols/icons of that layer or their URL so that I can display them in a text next to the map (but NOT using the legend widget). I'm basically looking for something like a featureLayer.getSymbols() function but that doesn't seem to exist.

0 Kudos
1 Solution

Accepted Solutions
sumitzarkar
Occasional Contributor

Hi,

I don't think so we have such method in API which returns you all symbols from the layer, but you can get the symbols from the layer easily by writing following custom code:

   _getLayerSymbols: function(layer) {
          var symbols = [],
              i;
          //check if layer is valid and have valid renderer object then only check for other symbol properties
          if (layer && layer.renderer) {
              if (layer.renderer.symbol) {
                  symbol.push(layer.renderer.symbol);
              } else if (layer.renderer.infos && (layer.renderer.infos.length > 0)) {
                  for (i = 0; i < layer.renderer.infos.length; i++) {
                      symbols.push(lang.clone(layer.renderer.infos.symbol));
                  }
              }
          }
          return symbols;
      }

Thanks

View solution in original post

7 Replies
sumitzarkar
Occasional Contributor

Hi,

I don't think so we have such method in API which returns you all symbols from the layer, but you can get the symbols from the layer easily by writing following custom code:

   _getLayerSymbols: function(layer) {
          var symbols = [],
              i;
          //check if layer is valid and have valid renderer object then only check for other symbol properties
          if (layer && layer.renderer) {
              if (layer.renderer.symbol) {
                  symbol.push(layer.renderer.symbol);
              } else if (layer.renderer.infos && (layer.renderer.infos.length > 0)) {
                  for (i = 0; i < layer.renderer.infos.length; i++) {
                      symbols.push(lang.clone(layer.renderer.infos.symbol));
                  }
              }
          }
          return symbols;
      }

Thanks

FriedaL
New Contributor II

Thanks. I sounds like it should work but it doesn't.

Seems like my layer unfortunately doesn't qualify for the first if statement. The layer.renderer returns null although I'm not quite sure why? I tried different layers but always the same result. Is there anything I need to do beforehand to make sure it works? (some require I might have forgotten, any specifics in the REST API of the layer I can check for or does it only work with DynamicLayer not FeatureLayer,...)

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Frieda,

  You can check if your map service rest endpoint for that layer lists DrawingInfo

0 Kudos
FriedaL
New Contributor II

This is just one of the layers I tried but definitely the one with the simplest symbology: just a polygon with an outline

0 Kudos
sumitzarkar
Occasional Contributor

Frieda,

Are you calling this method after the layer is loaded. If you call this method in "load" event it should work.

FeatureLayer | API Reference | ArcGIS API for JavaScript

Regards,

Sumit Zarkar

FriedaL
New Contributor II

Ok. Got it! Thanks sumit!

Indeed calling the method in an layer.on("load",... ) it works fine. Guess, I was trying to see the symbols before they had been received from the server.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Frieda,

   To add to Sumit's reply you can then take those symbols and place them in a dom element:

//This if is to check is you are using ie 8 that does not support this
//iconDiv is the html div element
        if(document.all && !document.addEventListener){
          //do nothing because it is IE8
          //And I can not produce swatches in IE8
        }else{
          var mySurface = gfx.createSurface(iconDiv, 40, 40);
          var descriptors = jsonUtils.getShapeDescriptors(item.sym);
          if(descriptors.defaultShape){
            var shape = mySurface.createShape(descriptors.defaultShape).setFill(descriptors.fill).setStroke(descriptors.stroke);
            shape.applyTransform({ dx: 20, dy: 20 });
          }
        }