Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-leaflet-ant-path

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-leaflet-ant-path

React component for the leaflet-ant-path plugin

  • 1.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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:

// Using a polygon
const antPolygon = antPath([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
], { use: L.polygon, fillColor: "red" });

// Using a circle
const antCircle = antPath(
  [51.508, -0.11],
  {
    use: L.circle
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
  }
);

// Using a curve (Leaflet.curve plugin)
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.

nametypeexampledescription
latlngsL.LatLng[] or Array[number, number][ [0, 10], [-20, 0], ... ]A path (depends on vector used, default as in polyline constructor )
optionsObject{color: 'red', weight: 5, ...}Same as the vector choosen (default to polyline ) plus the extra options bellow
options.useVector Layer factoryVector to use (default to L.polyline)The vector to enhance with the ant-path animation (check the compatibilty)
options.pausedbooleantrue/falseStarts with the animation paused (default: false)
options.reversebooleantrue/falseDefines if the flow follows or not the path order
options.hardwareAcceleratedbooleantrue/falseMakes the animation run with hardware acceleration (default: false)
options.pulseColorstring#FF00FFAdds a color to the dashed flux (default: 'white')
options.delaystring120Add 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

Keywords

FAQs

Package last updated on 02 Jan 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc