Leaflet Swoopy

A plugin for adding beautiful swoopy arrows on top of Leaflet maps

Hi, I am a swoopy arrow!

👉 You can also add custom html 👈

I have a custom arrow head!
+−
Leaflet | attribution: '© OpenStreetMap, © CARTO

Installation

Install with npm/yarn:

npm install leaflet-swoopy

Or download the minified library from unpkg or jsDelivr.

<script src="https://unpkg.com/leaflet-swoopy"></script>

Usage Example

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

// create leaflet map ...

const swoopy = L.swoopyArrow([53.52, 13.4], [53.525, 14.41], {
  label: 'Hi!',
  labelFontSize: 12,
  iconAnchor: [20, 10],
  iconSize: [20, 16]
}).addTo(map);

Creation

Factory
Description
L.swoopyArrow(fromLatlng, toLatlng, options) You need to pass the first paramters fromLatlng and toLatlng in order to create a swoopy arrow. The options paramter is not required.

Options

Option
Type
Default
Description
color String #222222 Color of the swoopy arrow.
weight String 1 Weight of the arrow.
opacity Number 1 Opacity of the arrow.
factor Number 0.5 The higher the factor the more curved is the arrow.
arrowFilled Boolean false Define the style of the arrow head.
hideArrowHead Boolean false Hide or show the arrow head.
arrowId String null Set a predefined custom marker as arrow head.
minZoom Number 0 The minimum zoom level where the arrow is visible.
maxZoom Number 22 The maximum zoom level where the arrow is visible.
label String "" Text label at the fromLngLat position.
labelClassName String "" A class that gets addded to the label.
labelFontSize Number 12 Font size of the text label.
labelColor String #222222 Font color of the text label.
html String "" Custom html label at the fromLngLat position. Replaces normal text label.
iconAnchor Point [0, 0] Point of the icon which will correspond to marker position
iconSize Point [50, 20] Size of the text in pixels. We are using a Leaflet divIcon in order to create the text.
keyboard Boolean true Whether the marker can be tabbed to with a keyboard and clicked by pressing enter.