Fix lag when zoomed into an animated dashed line

[jayli3n]

This PR should fix #8 and supersedes #54.

The problem:

When creating a curve with dashes, Leaflet / Leaflet.curve will keep the length of each little dashed line the same (as given in the dashArray option). The problem is that if the user zooms into the map, the distance between start and end points of the curve is increased (in terms of viewport pixels), this means Leaflet will need to create more little dashed lines to cover the increased distance. Without an upper limit of how many of these little dashed lines it's allowed to create, this can cause some serious lag even on my fairly decent PC.

Below is an illustration of the problem. We are drawing a simple dashed curve between point 1 and point 2, if we are zoomed out, it only requires 10 dashed lines to do the job (fig 1), but as soon as we zoom in slightly, it now requires 26 dashed lines (fig 2) etc. This issue is amplified if the curve covers a greater distance (like between countries) OR we zoom in even further, in my project, I've had it create extra 1000+ little dashes, causing lots of lag.

Fig 1.

Fig 2.

The solution (PR)

Not the most idea solution, but I've added a quick check to limit the distance between the start and end points of the curve to an arbitrary number of 1000, you can adjust if you want. This allows everything to work the same, except when we zoom in to a certain point, the Leaflet wont create more little dashes to fill the increased distance, it will instead make them longer (fig 3). Now at the same zoom level as fig 2, instead of 26 lines, we only need 10 lines (for example).

Fig 3.

Hope this all makes sense.

---

The PR #54 attempts to fix the same problem by always stretching out the little dashed lines to cover the increase distance between the start and end points of the curve when we zoom in.

There are 2 issues with this PR #54:

1. The lag can still occur with this solution if we create the curve while we are already very zoomed in because if we start off already zoomed in, there it will just work as if the logic wasn't there
2. Passing the option dashArray will not really do anything except the first render, every other zoom level will yield a different dash length

[elfalem]

Thanks for the very detailed detailed description and solution to the issue. A new version 0.9.2 has been released.

[jayli3n]

No worries man, thank you for this very useful package 🙂