How to get all the popup features with overlap?

LeoDeng — Fri, 10 Dec 2021 22:50:09 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to get all the popup features with overlap?

MichaelLodes2 — Thu, 21 Sep 2017 11:19:53 GMT

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

Re: How to get all the popup features with overlap?

yangwen — Fri, 02 Feb 2018 18:04:19 GMT

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]

topic Re: How to get all the popup features with overlap? in ArcGIS JavaScript Maps SDK Questions

How to get all the popup features with overlap?

Re: How to get all the popup features with overlap?

Re: How to get all the popup features with overlap?