fadeIn/Out features when added/removed from the map

[Geert-Jan Brits]

I'd love to have a way to fadein markers added to a map while fading-out markersremoved from a map. 

It looks much more fluent and clear to me when (on panning though an ajax-update for example) new markers gradually  in, instead of just popping up on the screen. (anologously for markers dissapearing from the screen). 

Is such functionality supported?

Thanks, 

Geert-Jan

[Tim Niblett]

I've just been doing something like this...

I don't know whether there is a built-in method, but you can do it in JavaScript.

Fading in on add is simple, you just need to override the built in marker with a new onAdd function (and a fade function).  I'm not so sure about fade on remove.  The problem is that the onRemove function will exit immediately if you just do a fadeout callback and the marker will get removed by the map.  So I overrode the map onRemove, which seems very hacky...

The gist is here. Its a single HTML file which runs for me!

Tim

[Geert-Jan Brits]

Thanks Tim, I did a test with fading-ou/markers markers as well with jquery animate, which underneath would be pretty similar to your solution. 

The thing is that it's a complete performance killer with a lot of markers, at least in my case.

Conceptually I'd like the following different solution of having each featuregroup be represented by a separate DIV in the dom (which is not the case in leaflet at the moment). Then you would require only 3 divs/featuregroups. 1 for fadein-markers / 1 for remaining markers / 1 for fadeout-markers plus of course some juggling of markers from 1 div/featuregroup to another. 

This allows just animating 2 div's/featuregroups with all the performance benefits (performance is independent on the nr of markers.) Animation can even be done with css3-transitions on newer browsers. I implemented this in mapbox.js, which does use multiple 'group-layers' to represent markers, and it works great. (I had to refactor to leaflet for other reasons) 

I'm parking this issue for now, but may revisit it by looking into hacking leaflet by providing the '1 div per featuregroup' functionality. 

Cheers,

Geert-Jan

[Paulo Vieira]

On Tue, Dec 4, 2012 at 9:14 AM, Geert-Jan Brits <gbr...@gmail.com> wrote:

The thing is that it's a complete performance killer with a lot of markers, at least in my case.

What about using CSS3 directly? Should be more efficient.

http://jbkflex.wordpress.com/2011/09/23/fade-infade-out-animation-using-css3/

[Tim Niblett]

Geert-Jan,

Ah.  Yes, doing this with lots of markers will be a problem I expect, as you're (a) running a lot of timers at once and (b) setting opacity individually.  I'm using CSS markers with gradients (here) and its pretty slow with just a dozen or so markers on Android 2.3.

The layer groups don't have their own divs in Leaflet, which would make life easy.  If anyone knows why this wouldn't work I'd be interested to know!

I've modded by Gist (new one here) to hack a group solution.  It requires (a) creating a div to hold a set of markers (you will need a bunch of these, indexed somehow I guess) and (b) subclassing L.Marker to attach to this div rather than a pane.

It works, but there may be other plumbing you need to get proper interop.  I haven't tested with lots of markers either, so have no idea of the performance.  If you do try something like this I'd be interested to know how it goes.

Cheers

Tim

[Tim Niblett]

Would you not lose all the infrastructure for handling markers though?  Or am I missing something?

Tim

[Paulo Vieira]

On Tue, Dec 4, 2012 at 3:03 PM, Tim Niblett <t...@timniblett.net> wrote:

Would you not lose all the infrastructure for handling markers though?  Or am I missing something?

I was thinking out loud, but I guess nothing would be lost. CSS transitions are at the heart of Leaflet. They are used for the smooth animations on the zoom, for instance.

[Geert-Jan Brits]

Indeed, as suggested in my origal post, css transitions would work great on supported browsers. Having a hack at this now 

.

[Geert-Jan Brits]

Tim, 

Ah great! That doesn't look too hackish to me! :) . Going to have a go at this now . 

[Tim Niblett]

OK.  I misunderstood you.  I'm used to thinking that CSS transitions don't really work, but they're pretty good on Mobile, so I may move to them.  Looks like they would help Geert-Jan as well.

Tim

[Geert-Jan Brits]

Yeah they would work well. As mentioned (?) I got this working in mapbox.js some time ago (including css transitions) . When I tested it with about ~200 markers on a moderate pc there was no noticeable lag at all. Confident it could take more. 

My current implementation is a bit more involved at the moment then the suggested 3 layer approach (i.e: 1 cacheble layer with markers per fixed 'tile' (z,x,y)), but trying to move the animation (fadein/out) in as we speak.