leaflet-ant-path

Leaflet Ant Path

Creates a leaflet polyline with a 'ant-path' animated flux

Live demo here

Contributing

Want to help? Open a issue or make a PR!
Also, see the guide on how to contribute.

Installing

Via Bower:

 bower install leaflet-ant-path

Via NPM:

 npm install leaflet-ant-path

Or just download this source code

Requirements

• Leaflet >= 0.7.7

Browser compatibility

Tested on:

• Firefox 43
• Chrome 45
• Chromium 47

UMD compatible

Can be used with asynchronous module loaders and CommonJS packers

Important!

Soon leaflet 0.7 will be deprecated, and so MultiPolyline. Because this, the MultiAntPath is also been deprecated, therefore use the L.LayerGroup to control your AntPath layers collection. :)

Using the plugin

It's just like a polyline:

    // Using the AntPath
    var antPolyline = new L.Polyline.AntPath(latlngs, options);
    
    //or use the factory
    antPolyline = L.polyline.antPath(latlngs, options);
    
    antPolyline.addTo(map);
    
    // ... And the MultiAntPath
    var antPolyline = new L.MultiPolyline.MultiAntPath(latlngsList, options);
    
    //or use the factory
    antPolylines = L.multiPolyline.multiAntPath(latlngsList, options);
    
    antPolylines.addTo(map);
    

Note for AMD/CommonJS:
The direct use as 'AntPath' now is deprecated and instead is exported by default, the modules which contains the AntPath and MultiAntPath

Using with AMD:

require(['leafletAntPath'], function(AntPathModule) {
    // ...
    var antPolyline = new AntPathModule.AntPath(latlngs, options);
    antPolyline.addTo(map);
    
    var multiAntPolylines = new AntPathModule.MultiAntPath(latlngs, options);
    multiAntPolylines.addTo(map);
});

Using with browserify:

    var AntPath = require('leafletAntPath').AntPath;
    var MultiAntPath = require('leafletAntPath').MultiAntPath;
    
    // ...
    var antPolyline = new AntPath(latlngs, options);
    antPolyline.addTo(map);

Using with ES6 imports

    import {AntPath, MultiAntPath} from 'leafletAntPath';
    
    var antPolyline = new AntPath(latlngs, options);
    antPolyline.addTo(map);

ES6/ES2015 features

Thinking in the new features of JavaScript, and its new way of programing, AntPath has some nicely features to work with ES6.

spreadable

When spread the path, you will receive it lat/lngs array;

    ...
    let antPathLayer = new AntPath(path, options);
    let anotherAntPath = new AntPath(path2, options);
    
    let latLngs = [...antPathLayer, ...anotherAntPath];

iterable

When used in a for ... of ... loops over the path coordinates

for(let latLng of antPath) {
    // do something with it latLngs ...
}

extensible

You can create you custom 'class' based on the AntPath:

class CustomAntPath extends AntPath {
    //...
}

map method

AntPath has a map method as the Array, returning a new instance of AntPath (or the child class which extends it):

//New path with translated path
let newAnthPath = myAntPath.map(pos => latLng(pos.lat+1, pos.lng+1));

Parameters

The AntPath extends from the FeatureGroup, but you initialise with the same options of a common Polyline, with some extra options, like the flux color.

name	type	example	description
latlngs	L.LatLng[] or Array[number, number]	[ [0, 10], [-20, 0], ... ]	A array of latitude and longitudes (same as used in Polyline constructor )
options	Object	{color: 'red', weight: 5, ...}	Same as the Polyline options plus the extra options bellow
options.paused	boolean	true/false	Starts with the animation paused (default: false)
options.pulseColor	string	#FF00FF	Adds a color to the dashed flux (default: 'white')
options.delay	string	120	Add a delay to the animation flux (default: 400)
options.dashArray	[number, number] or string	[15, 30]	The size of the animated dashes (default: "10, 20"). See also the pattern

---

Methods

Same as the L.Polyline API and with the same behaviour. See it here.

License

This project is under the MIT LICENSE