Runs twice then: Uncaught (in promise) Error: Invalid LatLng object: (NaN, NaN)

[Terrycoco]

Snaking animation runs a few times then get following error stack:

leaflet-src.js:1370 Uncaught (in promise) Error: Invalid LatLng object: (NaN, NaN)
    at new LatLng (leaflet-src.js:1370)
    at Object.unproject (leaflet-src.js:1670)
    at Object.pointToLatLng (leaflet-src.js:1511)
    at NewClass.unproject (leaflet-src.js:3908)
    at NewClass.layerPointToLatLng (leaflet-src.js:3916)
    at NewClass.containerPointToLatLng (leaflet-src.js:3973)
    at NewClass._snakeForward (polyline.snakeanim.js:122)
    at NewClass._snake (polyline.snakeanim.js:76)
    at NewClass.snakeIn (polyline.snakeanim.js:60)
    at snake (SnakeMap.js:174)

I checked my latlngs and they are not passing Nan in the array.

[IvanSanchez]

Can you publish a fiddle/codepen/plunkr that displays this behaviour?

[nathanh2011]

Hi, I get the same issue now all of a sudden. My array has complete and proper lat/lngs.

I have narrowed that the error is occurring in _snakeForward when calling this._map.latLngToContainerPoint(). I think it is caused by points that are the same being passed in for example:

[-35.3123241, 149.1461274],
[-35.3123241, 149.1461274],
[-35.3123241, 149.1461274],
[-35.3123241, 149.1461274],
[-35.3123241, 149.1461274],
[-35.3123241, 149.1461274],
[-35.3123241, 149.1461274],
[-35.3153949, 149.1503217],
[-35.3145958, 149.1504801],
[-35.3146478, 149.1504697]

Which I thought I could fix by eliminating the duplicated before adding them into your plugin but it looks like in _snakeForward when calling the points it loses some accuracy and goes to 5 decimal places and I am finding points that are close by are causing the same issue. For example this block also fails with the error:

[-35.2613033, 149.1343751],
[-35.2612639, 149.1343781],
[-35.261261, 149.13443],
[-35.2612579, 149.1343983],
[-35.26127, 149.1343797],
[-35.2613504, 149.1343453],

Although these are all distinct points, inside _snakeForward they are seen as (currPoint - nextPoint):

LatLng(-35.26103, 149.13432) - LatLng(-35.2613, 149.13438)
LatLng(-35.2613, 149.13438) - LatLng(-35.26126, 149.13438)
LatLng(-35.26126, 149.13438) - LatLng(-35.26126, 149.13443)
LatLng(-35.26126, 149.13443) - LatLng(-35.26126, 149.1344)
Error: Invalid LatLng object: (NaN, NaN)

So I am not sure if it is if a lat or lon match or if both need to be the same to cause the issue, but it looks like a rounding happening somewhere is causing non-distinct points to be seen as the same which looks to be causing the problem.

[nathanh2011]

With further testing I have found the map zoom level determines how sensitive this issue is. If I am zoomed out then the issue is much more immediate as points as drawn close together. As a quick fix I have found that if I set my zoom level to 16 while it is snaking, all my points render fine and at the end I reset the zoom back out to 14.

[Terrycoco]

I found a work around by accounting for the "forward" variable in _snakeForward to not be 0;

 _snakeForward: function(forward) {
forward = (forward == 0 ? 0.00000000001 : forward);
...

Perhaps you can find a more elegant solution

[nathanh2011]

I found a work around by accounting for the "forward" variable in _snakeForward to not be 0;

_snakeForward: function(forward) { forward = (forward == 0 ? 0.00000000001 : forward); ...

Perhaps you can find a more elegant solution

I don't think you can get much better than that. Worked like a treat for me so thank you very much!!!

[boskoKlemenc]

I found a work around by accounting for the "forward" variable in _snakeForward to not be 0;

_snakeForward: function(forward) { forward = (forward == 0 ? 0.00000000001 : forward); ...

Perhaps you can find a more elegant solution

It saved my day too. Thanks a lot !!!

[rfilmyer]

Is this worth including in an update/bugfix?

[Terrycoco]

I think so. I haven’t had a prob since I added that fix

On Fri, Apr 19, 2019 at 10:16 AM Roger Filmyer notifications@github.com wrote:

Is this worth including in an update/bugfix?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/issues/29#issuecomment-484960997, or mute the thread https://github.com/notifications/unsubscribe-auth/ACS56TDTPM7T6DJ7OYPUAUTPRH45NANCNFSM4EYL6ITA .

[rfilmyer]

I think I found the issue: forward comes from this line. If diff ever equals 0, forward is 0, distance in _snakeForward is 0, and 0/0=NaN, so you get points with NaN x and y coordinates running around everywhere.

The code assumes that the difference between two performance.now() timestamps cannot ever be zero, because supposedly performance.now() should be so high-resolution that that could never happen.

Well, performance.now() is not guaranteed to actually be high resolution. Firefox, in particular, has switched to giving it 1ms of resolution (was on the order of microseconds before) since version 60 (Spring 2018) for security reasons.

Clearly, this call and this call can happen in under a millisecond, meaning that the two timestamps are identical and their difference is 0.

@Terrycoco's fix works because it guarantees that forward can never be 0, but I brought the fix up to where the problem is in my pull request #37.