topic Re: Highlight features in a featurelayer using JSAPI 3.x in Web AppBuilder Custom Widgets Questions

Highlight features in a featurelayer using JSAPI 3.x

Anonymous User — Mon, 12 Oct 2020 17:20:46 GMT

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(query, FeatureLayer.SELECTION_NEW, function(result){console.log(result)});

});

}

});

}

Re: Highlight features in a featurelayer using JSAPI 3.x

RobertScheitlin__GISP — Mon, 12 Oct 2020 23:28:47 GMT

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.

Re: Highlight features in a featurelayer using JSAPI 3.x

Anonymous User — Tue, 13 Oct 2020 13:16:03 GMT

Hi Robert,

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

Re: Highlight features in a featurelayer using JSAPI 3.x

RobertScheitlin__GISP — Tue, 13 Oct 2020 13:51:57 GMT

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.

Re: Highlight features in a featurelayer using JSAPI 3.x

Anonymous User — Tue, 13 Oct 2020 15:22:58 GMT

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(val, val.graphics);

});

}

});

}

Re: Highlight features in a featurelayer using JSAPI 3.x

RobertScheitlin__GISP — Tue, 13 Oct 2020 16:15:30 GMT

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(featureLayer, features).then(lang.hitch(this, function() {

...

Re: Highlight features in a featurelayer using JSAPI 3.x

Anonymous User — Tue, 13 Oct 2020 18:40:14 GMT

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(query, function(features){var sm = SelectionManager.getInstance(); sm.setSelection(val, features.features); console.log(features.features)});

});

}

});

}

Re: Highlight features in a featurelayer using JSAPI 3.x

RobertScheitlin__GISP — Tue, 13 Oct 2020 19:12:00 GMT

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.

Re: Highlight features in a featurelayer using JSAPI 3.x

Anonymous User — Tue, 13 Oct 2020 19:43:01 GMT

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(query, function(features){var sm = SelectionManager.getInstance(); sm.setSelection(val, features.features); console.log(features.features)});

});

}

});

}