React Leaflet Ant Path
A port of Leaflet AntPath for React Leaflet
Demo of the Leaflet AntPath
Original plugin
Now supporting react-leaflet version 2!
Contributing
Want to help? Open a issue or make a PR!
Also, see the guide on how to contribute.
Installing
Via NPM:
npm install leaflet-ant-path react-leaflet-ant-path
Or Yarn
yarn add leaflet-ant-path react-leaflet-ant-path
Requirements
Using the plugin
The AntPath component is exported by default:
import AntPath from "react-leaflet-ant-path";
<AntPath positions={latLngs} options={antPathOptions} />
Update: Using more Vectors
On this version you now can use diferent vector other than polyline, passing the factory to the option.use.
Currently tested support:
const antPolygon = antPath([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
], { use: L.polygon, fillColor: "red" });
const antCircle = antPath(
[51.508, -0.11],
{
use: L.circle
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}
);
const antCurve = antPath([
"M",
[50.54136296522163, 28.520507812500004],
"C",
[52.214338608258224, 28.564453125000004],
[48.45835188280866, 33.57421875000001],
[50.680797145321655, 33.83789062500001],
"V",
[48.40003249610685],
"L",
[47.45839225859763, 31.201171875],
[48.40003249610685, 28.564453125000004],
"Z"
],
{use: L.curve, color: "red", fill: true })
Parameters
The same as the original plugin.
name | type | example | description |
---|
latlngs | L.LatLng[] or Array[number, number] | [ [0, 10], [-20, 0], ... ] | A path (depends on vector used, default as in polyline constructor ) |
options | Object | {color: 'red', weight: 5, ...} | Same as the vector choosen (default to polyline ) plus the extra options bellow |
options.use | Vector Layer factory | Vector to use (default to L.polyline) | The vector to enhance with the ant-path animation (check the compatibilty) |
options.paused | boolean | true/false | Starts with the animation paused (default: false) |
options.reverse | boolean | true/false | Defines if the flow follows or not the path order |
options.hardwareAccelerated | boolean | true/false | Makes the animation run with hardware acceleration (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 |
License
This project is under the MIT LICENSE