nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

derekswingley1

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/

All comments

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!

derekswingley1

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/

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.