How to show popup for all features which has the same location.

[deleted-user-OOe4JK-9Abnm]

Hi,

I have a feature layer which represents companies. It can be many companies in one building. I made a PictureMarkerSymbol with svg graphics for rendering. On the map it appears one symbol only. It is ok. But when I click on the top or side of the symbol I get a popup with information about one company which is on the top of others. When I click at the center of the symbol I get a popup with information about all the companies.

So the users struggle with finding where they have to click to get whole information about all companies.

It looks like the top company response on the whole symbol, but underlying companies just on limited area. I need that all companies response the same way as the first company.

I tried to use SimpleMarkeSymbol. It works the same way.

Is it something with tolerance to do? Any suggestions?

I use js api 4.9.

I would appraciate any help!!!

[ZorbaConlen1]

I'm experiencing the same issue. My map has points representing permits. In some cases they are stacked, with several in the exact same location. If the user clicks or taps at the center of the point symbol, they get all of the features returned. However, if they click less carefully, toward the edge, they get only the top feature returned. It's not too big a deal on desktop or laptop, but with phones or tablets it's really easy to fat finger it. In that case a user would never know there are multiple permits there. Using 4.9 version of api.

Here is my test app - Building Bellevue. See the image below which indicates a location with several permits. You can reproduce this behavior by clicking toward the edge. At first it seemed random, but eventually, I saw that its the precision of clicking or tapping. Really weird. 

Dennis - did you figure out a solution? 

Is this a known bug? Work-arounds?

[deleted-user-OOe4JK-9Abnm]

Hi Zorba,

I found a work-around for this case.

I made an illustration with description which describes the problem and solution.

The example code:

   // Click event på kartet
    mapView.on('click', event => {
        mapView.hitTest(event)
          .then(response => {

                // Feature layer you are interested in
                var companyFeatureLayer: __esri.FeatureLayer;

                // Checks if click was on the layer
                var graphicCompany = response.results.filter(result => {
                    return result.graphic.layer === companyFeatureLayer;
                });

                // Finds clicked graphics
                let clickedGraphic: any = null;
                if (graphicCompany[0]) {
                    clickedGraphic = graphicBedrift[0].graphic;
                }

                // Builds a polygon around x, y which the top graphics placed on
                // All companies which are inside this polygon are going to show up in the popup
                var x = clickedGraphic.geometry.x;
                var y = clickedGraphic.geometry.y;

                // Defines how big offset of this polygon
                var dx = 1; // meters offset x
                var dy = 1; // meters offset y

                var polygon = new Polygon({
                    'rings': [[  
                    [x - dx, y - dy], [x - dx, y + dy],  
                    [x + dx, y + dy], [x + dx, y - dy], [x - dx, y - dy]  
                ]], 'spatialReference': DefaultSpatialReference});  

                // Query for finding out which companies are inside the polygon
                var queryCompany = companyFeatureLayer.createQuery();
                queryCompany.geometry = polygon;
                queryCompany.returnGeometry = true;

                // Features which will be shown in the popup
                var companyPopupFeatures: Array<__esri.Graphic> = [];

                // Turn off popup while we are looking for companies
                companyFeatureLayer.popupEnabled = false;

                companyFeatureLayer.queryFeatures(queryCompany).then(response => {
                    // Collects found companies
                    companyPopupFeatures = companyPopupFeatures.concat(responseBedrifter.features);

                    // Enable popup again
                    companyFeatureLayer.popupEnabled = true;

                    // Wow!!!
                    // Now you have all companies in the popup
                    // 🙂
                    mapView.popup.open({
                        location: clickedGraphic.geometry,
                        features: companyPopupFeatures
                    });
                });
            }

I hope it helps!

Good luck!!!

[ZorbaConlen1]

Denis, 

Nice solution to handle this (love the diagram - that's awesome). I have reported this as a bug and ESRI is looking into the issue. I'll see what comes from that, but if no solution I may try your approach. 

Another thing I'm noticing is that you don't get this behavior with webmaps. So, it might be possible to modify an app to use a webmap with the desired feature layers in it, and avoid the bug that way.

Thanks

[deleted-user-OOe4JK-9Abnm]

Hi Zorba,

I am not sure that it is a bug, I think it is just the way it works like. But let me know if you have any news around this topic.

I do not have any experience with webmaps, so may be it can be a solution.

[ZorbaConlen1]

Denis, 

ESRI classified this as a bug. The reference number is #BUG-000120919. No idea if and when it will be fixed though.

[deleted-user-OOe4JK-9Abnm]

Cool, I wish it was a bug, it could make life easier for many. Thanks you reported it. Give update here if it is fixed.