jsapi 4.0 popup: set highlight graphic on feature layer click?

7629
11
09-21-2016 11:44 AM
DavidColey
Frequent Contributor

Hi - in 3.x defining a highlight grapic for the Popup widget when clicking a feature layer was as simple as setting up a fill symbol with a style, a color and an outline or line symbol as a simple line symbol.  In looking through the api, I just can't seem to locate where or how I define a highlight graphic as part of the 4.x Popup widget.  Is a highlight graphic now set on the mapView? Can anyone point me to an example somewhere?

Thanks-

David

0 Kudos
11 Replies
KristianEkenes
Esri Regular Contributor

In versions 4.5 and later of the API, highlight is enabled by default on features clicked by the user. You can alter the color of the highlight using MapView.highlightOptions - MapView | API Reference | ArcGIS API for JavaScript 4.9 

Also not the highlightEnabled property on the popup  - Popup | API Reference | ArcGIS API for JavaScript 4.9 

This sample demonstrates the default popup highlight - Reference Arcade expressions in PopupTemplate | ArcGIS API for JavaScript 4.9 

If you search "highlight" in the JavaScript samples, you'll also find several others that show how you can directly call the highlightFeatures() method on the layerview to implement your own highlight behavior outside the popup - Reference Arcade expressions in PopupTemplate | ArcGIS API for JavaScript 4.9 

ZorbaConlen1
Occasional Contributor III

Hi. Seems like highlighting features got a lot easier. For some reason, the automatic highlighting is not working in my app. Here is the snippet. Adding a webmap. The map contains a feature layer (uses picture icons). I'm disabling the popup because I need to create a custom popup programatically. Any ideas why highlighting would not be working?

Thx

//set app var = config.json file with app configurations
app = JSON.parse(config);

app.mapView = new MapView({ 
    container: app.containerMap,
    highlightOptions: {
        color: [255, 255, 0, 1],
        haloOpacity: 0.9,
        fillOpacity: 0.2
      }
});

props = {
    portalItem: {
    id: app.webMapItem
    }
}

let webMap = new WebMap(props);

//need to load webmap using loadable pattern, so we can specify that all fields should be available.
//otherwise, hittest results only include objectid.
webMap.load().then(function () {
    webMap.layers.filter(function (layer) {
      return layer.type === 'feature';
    }).map(function (layer) {
      layer.outFields = ['*'];
      console.log(layer);
      return layer;
    });
});

app.mapView.map = webMap;
//app.mapView.popup = null;
app.mapView.padding = app.viewPadding;
app.mapView.ui = {components: app.uiComponents};
0 Kudos