Leaflet-Arrowheads is a small plugin for leaflet to quickly draw arrowheads on polylines for vector visualization.
Leaflet-Arrowheads compatible with leaflet 1.5.1+. It has 2 dependencies: Leaflet itself, and Leaflet GeometryUtil.
You can use npm to install leaflet-arrowheads:
npm install leaflet-arrowheads --save
Then you can simply import its content into your project:
import 'leaflet-arrowheads'Grab the source file and include it in your project. You can include the source file in your header, but it must come after a link to Leaflet GeometryUtil, which must come after a link to the leaflet source. Your main project javascript will come after this, like so:
<head>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src=".../scripts/leaflet.geometryutil.js"></script>
<script src=".../scripts/leaflet-arrowheads.js"></script>
<script src=".../yourProjectScript.js" defer></script>
</head>Arrowheads can be applied to any polyline, whether unisegmental, multisegmental, continuous, or discontinuous:
var myVector = L.polyline([ coords ]).arrowheads()Arrowheads will be added to your polyline and will automatically be added to and removed from the map when you call add and remove methods on your polyline:
myVector.addTo(map) or myVector.remove()If you need to access the arrowheads directly, you can call the .getArrowheads() method on your polyline.
myVector.getArrowheads() // returns the arrowheads polyline object
myVector.getArrowheads().remove() // removes arrowheads from mapArrowheads can also be deleted from their parent polyline entirely:
myVector.deleteArrowheads()Arrowheads can take a configuration object as its argument:
var myVector = L.polyline([ coords ]).arrowheads({ <Options> })You can also use arrowheads on a GeoJSON that contains LineString or MultiLineString features by adding it as an option:
var myGeoJson = L.geoJSON(geoJsonData, { arrowheads: { <Options> } })Arrowheads offers a variety of options for rendering and styling arrowheads. See the options table below.
Arrowheads inherit all options from L.Path. Arrowheads also inherit all options from their parent polylines, except fill, fillOpacity, and smoothFactor. These can be changed manually when defining the arrowheads' options, but changing smoothFactor will result in improperly rendered arrows.
| Option | Type | Default | Description |
| yawn | Number ( Degrees ) | 60 | Defines the width of the opening of the arrowhead, given in degrees. The larger the angle, the wider the arrowhead. |
| size | Number | String ( Meters | Percent or Pixels ) |
'15%' | Determines the size of the arrowhead. Accepts three types of values:
|
| frequency | Number | String ( Number of arrowheads | Meters, Pixels, 'allvertices', 'endonly' ) |
'allvertices' | How many arrowheads are rendered on a polyline.
|
| proportionalToTotal | Boolean | false | Only relevant when size is given as a percent. Useful when frequency is set to 'endonly'. Will render the arrowhead(s) with a size proportional to the entire length of the multi-segmented polyline, rather than proportional to the average length of all the segments. |
A demo project is available for viewing at https://codesandbox.io/s/leaflet-arrowheads-example-zfxxc. The web page alone without the code: https://zfxxc.csb.app/
Polylines in this demo have popups which each contain the code for that polyline. Click around, and feel free to look through the codesandbox for more detail.
| Yawn Options | |||
L.polyline([]).arrowheads()(Standard option gives 60 degree yawn) |
|
L.polyline([]).arrowheads({
yawn: 90
})
|
|
L.polyline([]).arrowheads({
yawn: 40
}) |
 |
.arrowheads({
yawn: 40,
fill: true
}) |
 |
| Color and Fill Options | |||
L.polyline([]).arrowheads() (Standard options makes arrowheads a vector with same color as parent) |
|
L.polyline([]).arrowheads({
fill: true
})
|
|
L.polyline([]).arrowheads({
color: 'black'
}) |
 |
L.polyline([],{
color: 'black'
})
.arrowheads({
fill: true
}) |
 |
L.polyline([]).arrowheads({
color: 'black'
}) |
 |
L.polyline([]).arrowheads({
fill: true,
color: 'black'
fillColor: 'green'
}) |
 |
| Size Options | |
| Setting size to a number or percent will give you a fixed size arrowhead (in meters or percent of the size of the segment, respectively), regardless of zoom size. See the frequency examples below for a better idea. | |
L.polyline([coords]).arrowheads({size: '20px', fill: true})
|
|
| Frequency Options |
L.polyline([coords], {smoothFactor: 5}).arrowheads( {frequency: 'allvertices'} )
// standard option
|
L.polyline([coords]).arrowheads( {frequency: 'endonly', size: '50%'} )
|
L.polyline([coords]).arrowheads( {frequency: 20} ) // 20 arrowheads evenly distributed
|
L.polyline([coords]).arrowheads( {frequency: '500m'} ) // arrowheads every ~500 m evenly distributed
|
L.polyline([coords]).arrowheads( {frequency: '50px', size: '12px'} ) // arrowheads every 50px regardless of zoom
|
After writing this plugin I discovered Leaflet.PolylineDecorator. This offers some great methods to decorate your lines, potentially with arrowheads.
Arrowheads sometimes look like they're in slightly the wrong orientation in areas of high curvature. This is because of the way leaflet-arrowheads chooses and interpolates the points that it uses to calculate bearings. This may be able to be improved. Feel free to contribute / open a PR.