
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: