Highlight features in a featurelayer using JSAPI 3.x

1785
8
Jump to solution
10-12-2020 10:20 AM
by Anonymous User
Not applicable

Hello All,

I am writing a custom trace tool widget, and will need to highlight features on a web map returned from the REST API.  I have a function called getFeatureLayers, and I'm calling it from the widget startup function, passing in a layerStructure that I get from the LayerStructure.getInstance().  To test highlighting, I am trying to highlight all features on the map first.  I thought I needed to use the selectFeatures method on FeatureLayer, but nothing gets highlighted on the map.  No errors or warnings are thrown, but nothing happens.  The traversal seems to work, as I get back 14 feature layers.  My code is below.  What am I missing?

       getFeatureLayers: function(layerStructure)
       {   
        var query = new Query();
        layerStructure.traversal(function(layerNode
        { 
          layerNode.getLayerType().then(function(ltype)
          { 
            if (ltype == 'FeatureLayer')
            {
              layerNode.getLayerObject().then(function(val)
              {
                query.where = '1 = 1';
                query.returnGeometry = true;
                query.outFields = ["*"];
                var symbol = new SimpleMarkerSymbol();
                symbol.style = SimpleMarkerSymbol.STYLE_SQUARE;
                symbol.setSize(8);
                symbol.setColor(new Color([255,255,0,0.5]));
                val.setSelectionSymbol(symbol);
                val.selectFeatures(queryFeatureLayer.SELECTION_NEWfunction(result){console.log(result)});
              });
            }
          });
        });
       }
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Damon,

   Do a console.log on this.map.spatialReference and I bet you will find that it is null. the reason would be that you are not using lang.hitch to maintain the current code scope of the "this" object.

View solution in original post

8 Replies
RobertScheitlin__GISP
MVP Emeritus

Damon,

   I normally just create a Graphics Layer from the query results on the layers URL. If you are stuck on using the featurelayer select then you need to look into using the jimu.js selection manager class.

0 Kudos
by Anonymous User
Not applicable

Hi Robert,

Thank you for the information.  Are there any code examples available for either method?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Damon,

  As for code examples you can look in the OTB Query Widget or custom widgets like my eSearch widget, or just look at the JS 3.x API samples.

0 Kudos
by Anonymous User
Not applicable

Hi Robert,

Thank you again, I'll take a look at the widgets.  I am trying to use the SelectionManager first, before moving onto the widgets.  I called the setSelection method on the SelectionManager class, but nothing gets highlighted.  Is my code wrong?

       getFeatureLayers: function(layerStructure)
       { 
        layerStructure.traversal(function(layerNode
        { 
          layerNode.getLayerType().then(function(ltype)
          { 
            if (ltype == 'FeatureLayer')
            {
              layerNode.getLayerObject().then(function(val)
              { 
                var selectionManager = SelectionManager.getInstance();
                selectionManager.setSelection(valval.graphics);
              });
            }
          });
        });
       }
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

That code seems to be fine (assuming that val is not null and the graphics property is not null). Here is a line from the otb Edit widget that uses SelectionManager:

SelectionManager.getInstance().setSelection(featureLayerfeatures).then(lang.hitch(thisfunction() {
...
0 Kudos
by Anonymous User
Not applicable

I found that the val.graphics property is empty, so I tried passing in features.features as the second parameter to setSelection (code below).  I finally got a solid dot to render, but it rendered in Africa and I'm using the Naperville utility network sample.  I used the queryFeatures method this time because it was the only way I could figure out how to get features to send to setSelection.  I found some other samples online that suggested using the returnGeometry, outFields and outSpatialReference query properties, but those did not help.  Any idea why the dot is so far off?

       getFeatureLayers: function(layerStructure)
       {
        var query = new Query();
        layerStructure.traversal(function(layerNode
        { 
          layerNode.getLayerType().then(function(ltype)
          { 
            if (ltype == 'FeatureLayer')
            {
              layerNode.getLayerObject().then(function(val)
              { 
                query.where = "GLOBALID = '{DEB6CA6C-BD0D-4E3C-BDC6-9D837426D40E}'";
                query.returnGeometry = true;
                query.outFields = ["*"];
                query.outSpatialReference = this.map.spatialReference;
                val.queryFeatures(queryfunction(features){var sm = SelectionManager.getInstance(); sm.setSelection(valfeatures.features); console.log(features.features)});
              });
            }
          });
        });
       }
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Damon,

   Do a console.log on this.map.spatialReference and I bet you will find that it is null. the reason would be that you are not using lang.hitch to maintain the current code scope of the "this" object.

by Anonymous User
Not applicable

Thank you very much, the "this" object scope was the issue.  I changed the code a bit and the dot is now rendering in the correct location.  I added a variable to hold the "this" object, and used that to get the spatialReference property.

       getFeatureLayers: function(layerStructure)
       {
        var query = new Query();
        var thisObj = this;
        layerStructure.traversal(function(layerNode
        { 
          layerNode.getLayerType().then(function(ltype)
          { 
            if (ltype == 'FeatureLayer')
            {
              layerNode.getLayerObject().then(function(val)
              { 
                query.where = "GLOBALID = '{DEB6CA6C-BD0D-4E3C-BDC6-9D837426D40E}'";
                query.returnGeometry = true;
                query.outFields = ["*"];
                query.outSpatialReference = thisObj.map.spatialReference;
                val.queryFeatures(queryfunction(features){var sm = SelectionManager.getInstance(); sm.setSelection(valfeatures.features); console.log(features.features)});
              });
            }
          });
        });
       }
0 Kudos