I am having a weird issue with the mouse pointer not being able to find the map graphic. I thought at first it was my event code, but I know that is not the case. I noticed that when using Google dev tools to inspect the graphic, the mouse pointer couldn't find a lot of them. Interestingly, some graphics seem to be 'hoverable' and some don't. Here some pics to illustrate:
Sorry, print screen won't show the point, but I am hovering the pointer directly over the graphic. My code works as expected here, and I get a popup dialog.
In this screen capture, the pointer is hovering directly over the graphic west of Okaloosa but I am unable to isolate the graphic. This is the case for most of the graphics in the layer.
Some more background, this is a WAB developer app that was created and exported to our local server. I created another test application using the exact same feature layer, and identical configuration and I don't have this issue!
I am using the local layer widget, and connecting the the layer through ArcGIS REST, then adding a custom renderer to the local layer config. The configs for both apps are identical, so I don't think the renderer can be the issue. Also, I tried just rendering the graphics as is from the REST service and am getting the same results, so I am fairly certain the renderer is not the issue.
Here is the javascript I am using for the event:
<SPAN class="keyword token">let</SPAN> woLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Nuisance Wildlife Operator Info"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"nwo layer "</SPAN><SPAN class="punctuation token">,</SPAN> woLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map loaded"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">enableMouseEvents</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="keyword token">let</SPAN> dialog <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Dialog</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"operator popup"</SPAN><SPAN class="punctuation token">,</SPAN>
style<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
dialog<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> highlightSymbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
SimpleFillSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN>
SimpleLineSymbol<SPAN class="punctuation token">.</SPAN>STYLE_SOLID<SPAN class="punctuation token">,</SPAN>
<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">3</SPAN>
<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">125</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.35</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"highlight symbol "</SPAN><SPAN class="punctuation token">,</SPAN> highlightSymbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">let</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">own</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN>woLayer<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"mouse-over"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mouseover event"</SPAN><SPAN class="punctuation token">,</SPAN> evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> highlightGraphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">,</SPAN>highlightSymbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"highlight graphic "</SPAN><SPAN class="punctuation token">,</SPAN> highlightGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>highlightGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map graphics "</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
dialog<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"this is a test"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
Popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">open</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
popup<SPAN class="punctuation token">:</SPAN> dialog<SPAN class="punctuation token">,</SPAN>
x<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>pageX<SPAN class="punctuation token">,</SPAN>
y<SPAN class="punctuation token">:</SPAN> evt<SPAN class="punctuation token">.</SPAN>pageY
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">/*
setTimeout(function() {
Popup.close(dialog);
}, 1000);
*/</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="operator token">/</SPAN><SPAN class="operator token">*</SPAN>
woLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mouse-out"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
Popup<SPAN class="punctuation token">.</SPAN><SPAN class="token function">close</SPAN><SPAN class="punctuation token">(</SPAN>dialog<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mouse out event"</SPAN><SPAN class="punctuation token">,</SPAN> evt<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></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>Like I said, the code appears to be working so I don't know if this is a browser issue (I am using Chrome), but the same issue appears in Firefox as well. I am using the same script in another app and it is working just fine. If anyone has had a similar issue and found a fix, please let me know. I think it is probably something to do with the graphics, but I don't know what to look for.
Thanks!
