Creating decorator is slow when zoomed in about leaflet.polylinedecorator HOT 9 CLOSED

from leaflet.polylinedecorator.

@bbecquet just letting you know that I've updated to 1.3.2 and the performance is excellent, even on my 2000+ point polylines, thanks a bunch!

from leaflet.polylinedecorator.

Hi,
Sorry for this very late answer. You're right, there was a big and long-standing performance issue because of bad optimization. The number of symbols to draw increased with the zoom because even the invisible ones were computed and created. I changed this in the latest release (v1.3.0), so the number of drawn symbols keep roughly constant interdependently of the zoom. This should solve your issue.
Let me know :)

from leaflet.polylinedecorator.

@Talkless I updated your jsfiddle with a CDN to the latest leaflet.polylinedecorator (1.3.0) and removed the lines of code you added that were just the plugin
https://jsfiddle.net/3rmk0nou/27/

(To get a CDN link for any github javascript file, just grab the github raw URL, then go to http://rawgit.com/ and paste the link there)

It seems the performance has improved lots! Doesn't seem slow when zooming in anymore, this is great, thanks @bbecquet

Unfortunately, in my webapp, it still seems super slow. I'm pretty sure it's using the 1.3.0 update but I'll have to double check. It's likely because I'm drawing some really really long, complicated polyline's - if I split these up, into multiple polylines, do you think this would this help zoomed in performance at all? are there any other suggestions you might have for improving performance?

Over 2000 points in the polyline

When zoomed in lots, you can see how many tracks there are (these are trucks that drive the same path pretty much 24/7)

from leaflet.polylinedecorator.

Hi @Techn1x!

Well, the 1.3.0 update solves what was by far the biggest performance bottleneck, which was drawing invisible symbols.
But it still computes all the positions first, before deciding whether to draw them or not. This part's complexity actually grows with the number and complexity of polylines. This is not really noticeable with simple ones, but as you seem to have long ones, and many of them, this could be the cause of your issue.
I would say that splitting them in smaller ones wouldn't solve the problem, as the raw number of vertices and projections to make would be the same.

The good news is I'm currently rewriting the algorithm, which was quite dirty and uselessly complex. It's turning into something easier to read and improve, and I'll introduce optimizations step-by-step. I've done tests with very long polylines like yours, and I'm already experiencing better performance. Hopefully I'll release it soon.

Thanks for the screenshots BTW, always nice to see the plugin used in so many different ways !

from leaflet.polylinedecorator.

That's great to hear :) let me know if there's anything I can do to help with the rewrite.

The screenshots I gave were a worst case scenario in my webapp - most polylines that are drawn are much shorter and are in fact very quick. The problem stems from the fact that I am trying to show 24 hours of track for the selected vehicle, and this is fine for most vehicles, but for these trucks it seems to be just too much (at least with the current algorithm). To help with the issue I might reduce the window to 12 hours or something like that.

from leaflet.polylinedecorator.

@Techn1x

I updated your jsfiddle with a CDN to the latest leaflet.polylinedecorator (1.3.0) and removed the lines of code you added that were just the plugin

Thanks, though I do not see decorator arrows in that jsfiddle any more.

from leaflet.polylinedecorator.

Hmm, that's strange. It definitely works for me, when I click the button..

from leaflet.polylinedecorator.

I get:

TypeError: L.Symbol is undefined _display:94:8
	createPolyline https://fiddle.jshell.net/_display/:94:8
	onclick https://fiddle.jshell.net/_display/:1:1

from leaflet.polylinedecorator.