Issue with Overlapping Features and Popups

AaronSimmons2

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.

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

                            <SPAN class="comment token">// Code using the ZIP attribute</SPAN>
                            <SPAN class="keyword token">return</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
                        content<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>feature<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>ZIP<SPAN class="punctuation token">)</SPAN> <SPAN class="keyword token">return</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>

                            <SPAN class="comment token">// Code using the ZIP attribute</SPAN>
                            <SPAN class="keyword token">return</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="punctuation token">}</SPAN>
                    <SPAN class="punctuation token">}</SPAN>
                <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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.

First_Popup.png

Extra_Popup.png

s123_query_table_designView.jpg

s123_query_widget_action.jpg

AaronSimmons2

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.