Issue with Overlapping Features and Popups

AaronSimmons2 — Sat, 11 Dec 2021 21:16:31 GMT

I am using a FeatureLayer to show Zip Code tabulation areas on a map using the JS api. For my popup template I am using functions which accept the feature as a parameter and then make use of an attribute on the feature to create the content. Here is a relevant code sample with the guts of those function taken out for simplicity.

var usaZipCodes = new FeatureLayer({
                    url: "https://thisisaplaceholderurl.com",
                    renderer: {
                        type: "simple",
                        symbol: {
                            type: "simple-fill",
                            color: utilityColorArray.concat([0.3]),
                            style: "forward-diagonal",
                            outline: {
                                color: utilityColor,
                                width: 1
                            }
                        }
                    },
                    visible: false,
                    outFields: [ "ZIP" ],
                    popupTemplate: {
                        title: function (feature) {
                            if (!feature.graphic.attributes.ZIP) return "";

                            // Code using the ZIP attribute
                            return "";
                        },
                        content: function (feature) {
                            if (!feature.graphic.attributes.ZIP) return "";

                            // Code using the ZIP attribute
                            return "";
                        }
                    }
                });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This works perfectly for popups when I click and there is only one feature. But if I click in a place where features overlap (i.e close to a border between two zip codes) the ZIP attribute is empty on the "extra" features so I end up with empty popups for all but one of the features that are clicked. See the attached images for a demonstration of this.

Re: Issue with Overlapping Features and Popups

MarshallRobinson — Wed, 14 Oct 2020 15:21:45 GMT

I am having this issue as well. Were you able to solve this?

Re: Issue with Overlapping Features and Popups

AaronSimmons2 — Wed, 14 Oct 2020 17:00:30 GMT

Unfortunately I didn't really get it working with this method. I ended up doing something of a workaround.

I basically ended up with a solution where there was only ever one graphic with a popup template at a time. I used the pointer-move and pointer-leave events on the view to add and remove graphics as my cursor moved over a new postal code and left an old one. So by the time I clicked I was clicking on the newly added graphic for the postal code I was hovering over. This also let me darken the fill of the postal code on hover which was another requirement for my case. So I removed the popup templates from the feature layer entirely and added popup templates on my "temporary" graphics that I added whenever the cursor entered a new postal code. This has done the job so far.

topic Re: Issue with Overlapping Features and Popups in ArcGIS JavaScript Maps SDK Questions

Issue with Overlapping Features and Popups

Re: Issue with Overlapping Features and Popups

Re: Issue with Overlapping Features and Popups