How to get all the popup features with overlap?

Question

I've created a feature layer use the client side graphics. There is a overlap with two points(identical). How to get all of the overlap features while click the graphics? <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript 4.1title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } style> <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css"> head> <body> <div id="viewDiv">div> <script src="https://js.arcgis.com/4.1/">script> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", 'esri/Graphic', 'esri/geometry/Point', 'esri/symbols/SimpleMarkerSymbol', 'esri/PopupTemplate', 'esri/widgets/Popup/PopupViewModel', "dojo/domReady!" ], function(Map, MapView, FeatureLayer, Graphic, Point, SimpleMarkerSymbol, PopupTemplate, PopupViewModel){ var map, view, layer, graphic1, graphic2, graphic3, graphic4, latitude = 39.245916, longitude = -97.070492, pSymbol = new SimpleMarkerSymbol({ style: 'circle', size: 8, color: '#FF0000', outline: { color: '#0000FF', width: 1.5 } }), template = new PopupTemplate({ title: '{company}', content: '({x}, {y})' }); map = new Map({ basemap: 'streets-navigation-vector' }); view = new MapView({ container: 'viewDiv', map: map, zoom: 5, center: [longitude, latitude], popup: { actions: [], dockOptions: { buttonEnabled: false } } }); view.on('click', function(event){ console.log(view.popup.features); // always return 1 feature, no matter overlaps or not var features = view.popup.features; var count = features.length; var feature; for (var i = count - 1; i >= 0; i--) { feature = features[i]; console.log(feature.attributes) } }); graphic1 = new Graphic({ attributes: { x: longitude, y: latitude, company: 'TF1' }, geometry: new Point({ longitude: longitude, latitude: latitude }), symbol: pSymbol, popupTemplate: template }); graphic2 = new Graphic({ attributes: { x: longitude, y: latitude, company: 'TF2' }, geometry: new Point({ longitude: longitude+1, latitude: latitude }), symbol: pSymbol, popupTemplate: template }); graphic3 = new Graphic({ attributes: { x: longitude, y: latitude, company: 'TF3' }, geometry: new Point({ longitude: longitude-1, latitude: latitude }), symbol: pSymbol, popupTemplate: template }); graphic4 = new Graphic({ attributes: { x: longitude, y: latitude, company: 'TF4' }, geometry: new Point({ longitude: longitude, latitude: latitude }), symbol: pSymbol, popupTemplate: template }); layer = new FeatureLayer({ fields: [{ name: 'ObjectID', type: 'oid' }, { name: 'name', alias: 'Name', type: 'string' }], objectIdField: 'ObjectID', geometryType: 'point', spatialReference: {wkid: 4326}, source: [graphic1, graphic2, graphic3, graphic4], popupTemplate: null, renderer: null }); map.add(layer); }.bind(this)); script> body> html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

yangwen · Answer

Did anyone find a solution for this issue? I found an article referring to a regression of this behavior with the 4.2 -> 4.3 api change.

I'm on version 4.6

I've even tried the mapview.hitTest function and I confirm that the promise only returns the top most point.  Both points are in the same feature layer.

I hope there is a solution to this....

Popup for overlapped graphics [JavaScript API v4.3]

MichaelLodes2 · Answer

Hi,

could you solve the problem? I am working with JavaScript 4.4 and have the same issue. With a FeatureLayer from URL clicking on overlapping features, the template shows all popUps (1 to 4... for example). Using a FeatureLayer with client side features, the popUp shows just the feature which lies on the top of all. Is it a bug?

Best Regards,

Michael