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.

Installation:

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

npm install leaflet-swoopy

Usage:

import L from 'leaflet';
import 'leaflet-swoopy';

// create a leaflet base map
const map = L.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,
}).addTo(map);

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.

Demo

Feel free to play around with the code of this example: