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?
<!DOCTYPE html>
<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.1</title>
<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>
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
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....