I make a small project, want use this animated for polyline. I need help to modify with react-leaflet.

I'm a rookie reacter, so it is difficult for me to do this.

I got an error from time to time specially when I switch the tab of my navigator.

L.Polyline.SnakeAnim.js:79 Uncaught TypeError: Cannot read property 'latLngToContainerPoint' of null at NewClass._snakeForward (L.Polyline.SnakeAnim.js:79) at NewClass._snake (L.Polyline.SnakeAnim.js:73)

In leaflet API L.LayerGroup constructor don't have an option argument, so it is impossible to set custom values with the constructor.

see code:
https://github.com/Leaflet/Leaflet/blob/ddf8f0575e03572ff1ec561d71c14c48c08cf310/src/layer/LayerGroup.js#L21

see doc:
http://leafletjs.com/reference-1.0.0.html#layergroup

I tried to write a fix while keeping the same structure but it's impossible. The following code call itself infinitely.

L.LayerGroup = L.LayerGroup.extend({
    options: {
        snakingPause: 200
    },
    initialize: function(layer, options){
        L.LayerGroup.prototype.initialize.call(this, layer);
        L.Util.setOptions(this, options);
    }
});
// log: L.Polyline.SnakeAnim.js:215 Uncaught RangeError: Maximum call stack size exceeded

In my opinion the best solution is to create a new class the extend the L.LayerGroup like:

L.SnakAnimLayerGroup = L.LayerGroup.extend({
    options: {
        snakingPause: 200
    },
    initialize: function(layer, options){
        L.LayerGroup.prototype.initialize.call(this, layer);
        L.Util.setOptions(this, options);
    }
});

Is this posible to add a pause/ resume/ startover button on one of your example? https://playground-leaflet.rhcloud.com/lum/edit?html,output
An example would be a big help. Thank you.

Hi,

Excellent plugin. Really nice visuals.

For quite large routes I do sometimes run into an error:
Uncaught RangeError: Maximum call stack size exceeded

Uncaught RangeError: Maximum call stack size exceeded
L.Projection.SphericalMercator.project @ leaflet-src.js:1465
L.CRS.latLngToPoint @ leaflet-src.js:1499
L.Map.L.Evented.extend.project @ leaflet-src.js:2060
L.Map.L.Evented.extend.latLngToLayerPoint @ leaflet-src.js:2074
L.Map.L.Evented.extend.latLngToContainerPoint @ leaflet-src.js:2100
L.Polyline.include._snakeForward @ L.Polyline.SnakeAnim.js:81
L.Polyline.include._snakeForward @ L.Polyline.SnakeAnim.js:106
L.Polyline.include._snakeForward @ L.Polyline.SnakeAnim.js:106
L.Polyline.include._snakeForward @ L.Polyline.SnakeAnim.js:106
L.Polyline.include._snakeForward @ L.Polyline.SnakeAnim.js:106

Example can be found at:
http://maps.gisforthought.com/leaflet_snake_demo/demo.html

With the route file:
http://maps.gisforthought.com/leaflet_snake_demo/route.js

But works on a simplified version of the same route.

For visualization of trajectories (GPX tracks), a consideration of the speed between the points for animation would be great.
Maybe a specification of a property of each layer could be provided. This property's value would be multiplicated with the global snakeSpeed..

I'd give it a shot myself, but looking at the codebase I have no idea where to start

I have task to draw animated path. I use leaflet-curve and it works, but without animation. Now I find a way to animate it. May you help me with it?

I just cloned the repo and was trying to run it. I get the whole route on the map immediately. Is there any other requirement I am missing? I don't see any errors also in the console. (Tried chrome/firefox both)

Hi, even implementing this simple code results in this error:
'L.Polyline._flat is not a function
Thus, only visualizing the line but not animating it. The only way the plugin would work was with your particular demo.html file. (Using Leaflet 1.1.0 on Chrome).

var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2];

var polyline = L.polyline(latlngs, {color: 'red'});
polyline.addTo(map).snakeIn();

Hey Ivan,

Were having great success using your SnakeAnim plugin for a Chi Hack Night project:
https://geotracer.herokuapp.com/

Would you be interested/able in exchanging a few words via email or chat? I just have some questions/feedback.

Hi,

I have my coordinates inside a json file, how can I load this data to animate the map?

Nice plugin !

It would be great to be able to set the total duration of the animation instead of the speed. This duration would be independent from the zoom level.

It is done like that in the "MovingMarker" plugin (https://github.com/ewoken/Leaflet.MovingMarker).

I would like to draw a polyline behind a moving marker.

Hi,
Can I change marker style and type?or even use other plugins markers as start point?

Hi,
Thanks for sharing this plugin.
Using your example for binding the polyline

     for (var i = 0, latlngs = [], len = data.model.length; i < len; i++) {
              latlngs.push(new L.LatLng(data.model[i].latitude, data.model[i].longitude));
      }

Is there a way to get the index from the

.on('snakestart snake snakeend', function (ev) {
                            console.log(ev);
});

I have extra data in my model and would like to use them from the event method.

Thanks for your support

Hi,

Is it possible to draw an arc instead of a line?

Hi,

I'm just wondering if it's possible to do all snake animations at once.

I have a list of about 150 points, they all get populated on the map at the same time, what I would like is for them ALL to animate at the same time instead of 1 by 1 until they are all finished. They are all going towards the same end point, but different markers.

Thank you.

Hi,
Probably a silly question.
Is it possible to convert this plugin into a typescript file for an angular project?

Hi,

Thank you for the nice plugin!

Theoretically speaking, Object.keys() does not guarantee the iteration order?..
It is used to retrieve the children of a Layer Group:
https://github.com/IvanSanchez/Leaflet.Polyline.SnakeAnim/blob/master/L.Polyline.SnakeAnim.js#L164

I have not personally found any browser where the result differs from order of insertion, but this behaviour is not specified.

Not sure how to implement a bullet-proof solution, given the fact that Leaflet stores Layer Group children as object keys.

In particular, the plugin cannot differentiate if application developer has added several times the very same marker, e.g. if a same city has been visited several times.

I want to set the Map Zoom close to the first marquer before animation, and when it start, the map should follow the animated path.

Is there a way to archieve this?

If i use leaflet0.7.x,it tells me that Uncaught TypeError: Cannot set property 'snakingPause' of undefined，so I want to know how can i let it work well with leaflet0.7.x

Hello,

I get this following error when I try to create segment :
ERROR TypeError: Cannot read property 'latLngToContainerPoint' of null

This error is triggered by the first lines of _snakeForward function :
// Calculate distance from current vertex to next vertex var currPoint = this._map.latLngToContainerPoint( this._snakeLatLngs[ this._snakingRings ][ this._snakingVertices ]);

this_map seems to be undefined.
_snakeForward function is called through :
L.polyline([ rightCoords, leftCoords ], { color: 'grey', snakingSpeed: distance }).addTo(this.leafletMap).snakeIn();

If you need more information I will be glad to answer you.

Kind regards.

route.addTo(...).snakeIn is not a function.

<script src="~/Leaflet-1.2.0/dist/leaflet.js"></script> <script src="~/Leaflet.Polyline.SnakeAnim-master/route.js"></script> <script src="~/Leaflet.Polyline.SnakeAnim-master/L.Polyline.SnakeAnim.js"></script>

var route = L.layerGroup([
L.marker(waypoints[0]),
L.polyline(waypoints),
L.marker(waypoints[waypoints.length-1])
], { snakingPause: 200 });
route.addTo(mymap).snakeIn();

After updating Leaflet to 1.1.0 I get the following error.

TypeError: L.Polyline._flat is not a function

The _flat() function was apparently moved from Polyline to LineUtil in this version. Changing the corresponding line would fix the problem as far as I can see.

在react项目中，leaflet通过npm install的形式安装使用，需要使用到该插件，发现该插件不支持npm的形式使用，试着将Leaflet.Polyline.SnakeAnim.js改为export的形式，但是include中的方法还是不能调用，请问这种情况要怎么处理？
export default function (L){
//原js中的代码
}

Using this with Leaflet 0.7.7, I kept getting this._update() is not a function. Replacing line 56 with this.redraw() fixed the issue.

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.

var route = L.layerGroup([
L.marker(airport1),
L.polyline([airport1, airport2]),
L.marker(airport2)
], { snakingSpeed: 500 });
route.addTo(map).snakeIn();