----- Notice: Deprecated -----
As this plugin only supports react-leaflet v2, and react-leaflet is already up to v4, this repo and plugin are deprecated. For a quick idea on how to integrate leaflet-arrowheads with react-leaflet v3+, see this example.
react-leaflet-arrowheads
React-Leaflet-Arrowheads is a react-leaflet wrapper for leaflet-arrowheads. Leaflet-Arrowheads is a small plugin for leaflet to quickly draw arrowheads on polylines for vector visualization.
Note: react-leaflet version 3 is coming soon, which introduces many breaking changes. A version of react-leaflet-arrowheads that is compatible with react-leaflet v3 is ready, and will be pushed to the main branch as soon as v3 is in a stable release. Support for v2 will still be available.
👀 Demo 👀
Installation
You can use npm to install react-leaflet-arrowheads:
npm install react-leaflet-arrowheads --save
Usage
<Polyline>
Using with Instead of importing { Polyline }
from react-leaflet
, you'll import a modified Polyline
from react-leaflet-arrowheads
import Polyline from 'react-leaflet-arrowheads'
Within your <Map />
component, you can now use this new Polyline
component. Using the arrowheads
prop on this new Polyline
component will apply arrowheads.
<Map>
<TileLayer ... />
<Polyline positions={ [coords array] } arrowheads />
</Map>
<GeoJSON>
Using with If you want to apply arrowheads to a GeoJSON, you don't need react-lefalet-arrowheads
, just leaflet-arrowheads
. Import leaflet-arrowheads
in your project:
npm i leaflet-arrowheads
Then you can apply arrowheads
as a property of a <GeoJSON />
component:
<GeoJSON data={data} arrowheads={{ options }} />
And that's it!
Options
Declaring a polyline with the arrowheads
prop with no options object will give the default options:
<Polyline positions={ [coords array] } arrowheads />
The arrowheads prop can also take a configuration object as its value:
<Polyline positions={ [coords array] } arrowheads={{ size: '300m', frequency: '1000m' }} />
The options that are available are te same options inherited from leaflet-arrowheads. Click here for a list of options and examples.