Skip to content
A small plugin for leaflet to quickly draw arrowheads on polylines for vector visualization
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
src
.gitattributes Initial commit Nov 17, 2019
.gitignore setting up project basics Nov 17, 2019
.npmignore
LICENSE
README.md
npm.README.md
package-lock.json
package.json

README.md

leaflet-arrowheads

Leaflet-Arrowheads is a small plugin for leaflet to quickly draw arrowheads on polylines for vector visualization.

Installation

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 { } from './leaflet-arrowheads.js'  // or
import { } from 'leaflet-arrowheads' // when working with a build pack

Without ES6 Imports

Check out the no-imports branch for instructions on how to link this module directly from your HTML header.

Usage

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 map

Arrowheads 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> })

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:
  • A number will set the size of the arrowhead to that number of meters
  • A string value which is a number with a percent sign ( '15%', '20%', '25%', etc. ) will render arrows whose size is that percentage of the size of the parent polyline. If the polyline has multiple segments, 'size' will take the percent of the average size of the segments.
  • A string value which is a number with the suffix 'px' ( '20px', '25px', '30px', etc. ) will render an arrowhead whose size stays at a constant pixel value, regardless of zoom level. Will look strange at low zoom levels or for smaller parent vectors. Ideal for larger parent vectors and at higher zoom levels.
frequency Number | String
( Number of arrowheads | Meters, Pixels, 'allvertices', 'endonly' )
'allvertices' How many arrowheads are rendered on a polyline.
  • 'allvertices' renders an arrowhead on each vertex.
  • 'endonly' renders only one at the end.
  • A number value renders that number of arrowheads evenly spaces across the polyline.
  • A string value with suffix 'm' (i.e. '100m') will render arrowheads spaced evenly along the polyline with roughly that many meters between each one.
  • A string value with suffix 'px' (i.e. '30px') will render arrowheads spaced evenly with roughly that many pixels between each, regardless of zoom level.
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.

Examples

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

Alternatives

After writing this plugin I discovered Leaflet.PolylineDecorator. This offers some great methods to decorate your lines, potentially with arrowheads.

Limitations

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.

You can’t perform that action at this time.