Show feature boundaries when navigating through features in popup (Javascript V4)

[SamanthaRoutledge]

Hey folks, I'm using version 4.4 of the javascript API and trying to implement functionality as present in V3 of the API. I have a popup showing the results of an IdentifyTask and am able to navigate through the list of features. However, in V4, the map isn't drawing the boundaries of the selected feature. You can see this in action in the code samples for the identify task:

V4: ArcGIS API for JavaScript Sandbox 

V3: ArcGIS API for JavaScript Sandbox 

Is there a way to replicate the V3 functionality of drawing the boundaries of the selected feature using the 4.4 API? Is that functionality that's under development?

[RobertScheitlin__GISP]

Samantha,

   That functionality does not exist in the 4.4 API as of yet. See this thread for a workaround:

https://community.esri.com/thread/183372-jsapi-40-popup-set-highlight-graphic-on-feature-layer-click 

[ThomasSolow]

Highlighting is supported in 3D but not 2D.

One way to add this functionality yourself is to do something like this: JS Bin - Collaborative JavaScript Debugging 

1. Added returnGeometry = true to identifyParams.

2. Overrode view.popup.viewModel highlight method. 

3. Added event to clear graphics on popup close.

[SamanthaRoutledge]

Thanks Thomas and Robert! Before I saw Thomas' response, I came up with a solution based on (https://community.esri.com/thread/183372-jsapi-40-popup-set-highlight-graphic-on-feature-layer-click ), though since I had multiple features I modified their solution to be activated when the Popup's selectedFeature changes:

app.mapView.popup.watch('selectedFeature', function(newFeature) {
    var symbol = new SimpleFillSymbol({
       color: [255,255,0,0.0],
       style: 'solid',
       outline: {
          color: [102,0,204],
          width: 5
       }
    });

   app.mapView.graphics.removeAll();
   var selectionGraphic = newFeature.clone();
   selectionGraphic.symbol = symbol;
   app.mapView.graphics.add(selectionGraphic);
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Though now that I've seen it, I think I like overriding the highlight function better, so that's probably what I'll end up using!

[ThomasSolow]

I think this is probably a better solution than what I came up with.  It should be more or less the same but it's much clearer to watch the selectedFeature as opposed to overriding the _highlight method which isn't documented.

In the somewhat near future I expect 2D to have highlighting so we won't have to worry about it.

[deleted-user-OlpHy1NoMNug]

Thomas, 

It appears the 4.6 version doesn't have highlighting yet, any idea when it might be included?  

For the solution posted above, how would you modify this so that it works when a feature is clicked on as opposed to selected (or is this the same thing)?

Scott

[deleted-user-OlpHy1NoMNug]

TSolow-esristaff, 

Any idea if this is slated for the 4.7 version?  It's causing delays for us in terms of deployment.

Scott

[ThomasSolow]

Hi Scott,

I'm not sure if this will be ready in 4.7.  I should point out that Feature Layers in a Map View can be highlighted if webGL is used to render them.  This capability is marked as beta, you can read more about it here (including how to enable it): FeatureLayer | API Reference | ArcGIS API for JavaScript 4.6 

If this isn't an option, I think your best bet would be to watch the "selectedFeature" property on the popup: JS Bin - Collaborative JavaScript Debugging 

Using that approach, you'll have to decide how to highlight each geometry type.  In that sample, a new polygon is added that outlines the feature returned from identify that is currently shown in the popup.  For point geometries, you'd probably want to highlight things a little differently.  Here's another SDK sample that shows how you might approach highlighting a point: ArcGIS API for JavaScript Sandbox (click on a feature to highlight).

As far as the difference between selecting a feature and clicking on it, if you watch the "selectedFeature" property, you're just assuming whatever feature the popup is currently displaying is selected.  You can manually add features to the popup (and therefore select them) as in the identify sample, using popup.open: Popup | API Reference | ArcGIS API for JavaScript 4.6.  Or, depending on the layer and what kind of search you want to perform on click, you could take advantage of the built-in popup functionality, like this: JS Bin - Collaborative JavaScript Debugging.

[deleted-user-OlpHy1NoMNug]

Thanks Thomas.

I wasn't able to use webGL since the service is coming from ArcServer.

I ended up using the last option you mentioned, JS Bin - Collaborative JavaScript Debugging 

One more question:  When I use the search widget, the searched feature is highlighted using an orange fill but I can't change it.  Adding some .css didn't seem to make a difference.

[ThomasSolow]

Try setting the "resultSymbol" property on the Feature Layer Source.  This sample has two Feature Layer Sources, I've set the first one so it will use a blue Simple Fill Symbol:  JS Bin - Collaborative JavaScript Debugging 

(To trigger a search, just click the Search and select "Use current location").