Feature layer mouseover overlay flicker

[LisaEidson]

I have a feature layer that I use to hide and show an overlayed div with information about the polygon that is moused over. This works fine, however, if you move your mouse to be on top of the overlayed div (bottom left corner) the div begins to flicker. This seems like perhaps some sort of event propagation issue, but I've tried a variety of things and haven't been able to remove the flickering. Any guidance would be appreciated.

http://www.wilderness.net/maptest_featureLayer.htm

[PaulBushore]

Hello,

I am pretty new on the javascript side but I would imagine that it is because when the mouse is over the div, it fires the onMouseOut function of the featurelayer.  Then the div disappears and it finds it back over the feature so it fires the onMouseOver to show the div again, repeating the cycle. Could you set a timeout before the div appears or disappears, giving you time to set a value if the cursor is over the div and have it only hide the div if that value is 0?  That would be kind of a clunky solution if it worked though.

[derekswingley1 · Accepted solution]

Paul's right??? the issue is that when you mouse over the wildName div, mouseOut is fired by the feature layer. An easy way to handle this is to check if the point associated with the mouseOut event is inside the associated feature. These properties are available on the event object. The code would look like this:

dojo.connect(featureOutlines, "onMouseOut", function(evt){ // removes wilderness name   if ( ! evt.graphic.geometry.contains(evt.mapPoint) ) {     dojo.byId("wildName").innerHTML = "";     dojo.style(dojo.byId("wildName"), "display", "none");   } });

Here it is on JSFiddle:  http://jsfiddle.net/rDyk4/

[LisaEidson]

That's the ticket, Derek. This also solves a pan sticking problem in Chrome when a user was clicking on the wildName overlay and the map was getting stuck in pan mode. Thanks much!