search

angular-ui / ui-leaflet

AngularJS directive to embed an interact with maps managed by Leaflet library
http://angular-ui.github.io/ui-leaflet
Other
314 stars 134 forks source link

marker - multiple mouseover events #144

Open nmccready opened 9 years ago

nmccready commented 9 years ago

From @porjo on February 24, 2015 2:1

I have created a custom 'div' marker where the popover displays on mouseover and hides on mouseout - see Plunkr http://plnkr.co/edit/ftGP05yqENLHT05nvZpN?p=preview

I find that mouseover and mouseout fire multiple times when the mouse is moved between elements within the same marker causing the popover to flicker off and on. Is this a bug? If not, how would I avoid the event being fired multiple times?

Copied from original issue: tombatossals/angular-leaflet-directive#642

nmccready commented 9 years ago

From @molehillrocker on August 7, 2015 8:8

Did you find a solution for this? We have the same issue with the current version 0.8.6. We are using icons on the marker provided by https://github.com/lvoogdt/Leaflet.awesome-markers. I guess it has something to do with the icon being added as child element of the 'common' icon, which causes separate mouseover and mouseout events.

nmccready commented 9 years ago

A workaround for the time being would be to debounce your handlers for your events.

nmccready commented 9 years ago

Adjusted plunker for correctness on event handler.

http://plnkr.co/edit/ZfsCImBfODaerpwqTfuo?p=preview

Yes it looks like the events are firing too many times; but I am not sure if this is us or leaflet itself yet.

nmccready commented 9 years ago

Also the behavior appears to be no different from 0.8.5 and 0.8.6 so that statement is invalid.

nmccready commented 9 years ago

From @molehillrocker on August 7, 2015 13:59

I just mentioned v0.8.6 because it is the initial version we used in our project. Since it is a new project, we did not use any previous version of the angular-leaflet-directive. The wording might have been a bit misleading.

nmccready commented 9 years ago

@MoleHillRocker no worries just trying to be clear for other. I updated the plnker with debounces. I don't see anything wrong in angular leaflet except for bogus logs on [markers] destroy.

nmccready commented 9 years ago

My guess this is a leaflet issue. If someone wants to fork the plnkr and make a raw leaflet example doing the same thing without angular and proves me wrong then we can dig further.

nmccready commented 9 years ago

From @molehillrocker on August 7, 2015 14:35

Okay, we'll try the debouncing. Thanks for your effort! :)

nmccready commented 9 years ago

From @molehillrocker on August 8, 2015 9:44

I just visited Leaflets GitHub page and found this: https://github.com/Leaflet/Leaflet/issues/3708. It seems that a vertical offset applied to the popup fixes the issue. We will try that on monday, because this JSFiddle looks pretty promising.

nmccready commented 9 years ago

From @molehillrocker on August 13, 2015 14:6

It seems that just applying an offset does the trick only if the popup opens on top of the marker and the mouse then points on the popup instead of the marker. In our case, the marker contains a separate HTML tag, which causes the issue (as shown in your Plunkr).

The reported issue Leaflet/Leaflet#3708 makes me think that this is desired behavior.

benoitv-code commented 8 years ago

FYI: Regarding the multiple mouseover events, it was fixed in leaflet v1.0.0-beta.2 (but not in v0.7.7).

See Leaflet#3708

nmccready commented 8 years ago

@kunnix thank you