Open Source
October 09, 2017

Plugin: Swoopy Arrows For Leaflet Maps

Moritz Klack
In some of our recent projects we experienced the lack of a standard solution to add swoopy arrow annotations on top of a Leaflet map. This is why we came up with the idea of developing a Leaflet plugin to achieve this task in the future: leaflet-swoopy 🎉.
With leaflet-swoopy it's pretty easy to add customizable swoopy arrows on top of maps.

Why Swoopy Arrows?

Annotations can help you to highlight the most important parts of a visualisation or tool. This is especially useful when there is a lot of information but you want to point out essential findings.


The easiest way to install leaflet-swoopy is using npm:
npm install leaflet-swoopy


import L from 'leaflet';
import 'leaflet-swoopy';
// create a leaflet base map
const map ='map', {
center: [52.52, 13.4],
zoom: 4,
// add swoopy arrow
new L.SwoopyArrow([56, 1], [52.52, 13.4], {
text: 'Hi, I am swoopy arrow.',
color: '#64A7D9',
textClassName: 'swoopy-arrow',
minZoom: 4,
maxZoom: 10,
Besides color, weight and opacity you can define a minZoom and maxZoom in order to show the swoopy annotation only in a specific zoom range. If you want to add custom CSS you can use the textClassName option. A list of all options can be found in the docs.


Feel free to play around with the code of this example:
Further Reading
webkid logo
webkid GmbH
Kohlfurter Straße 41/43
10999 Berlin
+49 30 232 575 450