braandl / leaflet-ant-path

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

Leaflet Ant Path

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

Live demo here

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
- Soon compatible with Leaflet 1.0.0 :+1:

Browser compatibility

Tested on:

- Firefox 43
- Chrome 45
- Chromium 47

UMD compatible

Can be used with asynchronous module loaders and CommonJS packers

Using the plugin

It's just like a polyline:

    // ...
    var antPolyline = new L.Polyline.AntPath(latlngs, options);
    //or use the factory
    antPolyline = L.polyline.antPath(latlngs, options);
    
    antPolyline.addTo(map);

Using with AMD:

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

Using with browerify:

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

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.pulseColor	string	#FF00FF	Adds a color to the dashed flux (default: 'white')
options.delay	string	120	Add a delay to the animation flux (default: 200)
options.dashArray	[number, number]	[15, 30]	The size of the animated dashes (default: [10, 20])

---

Building and Testing

To run the build, before install the npm and gulp dependencies, then run:

To build

    gulp style
    ...
    gulp compress

To test:

    gulp test

License

This project is under the MIT LICENSE