leaflet-spline

Leaflet-spline is a small plugin for leafletjs that transforms polylines and polygons into bezier splines. Built on top of leaflet.curve, leaflet-spline transforms polylines and polygons into cubic svg bezier curves.

👀 DEMO 👀

Install

npm install leaflet-spline

Use

You can import leaflet-spline, and L.spline becomes available:

import L from "leaflet";
import "leaflet-spline";

const map = L.map("mapdiv", mapOptions);

const latLngs = [
  [-5.9765, 2.9542],
  [-6.1523, 2.5918],
  [-5.8337, 2.4052],
  [-5.5743, 2.4821],
  [-5.2294, 2.4492],
  [-4.9545, 2.1308],
  [-4.3286, 2.0544],
];

const mySpline = L.spline(latLngs);
mySpline.addTo(map);

You can also import spline directly:

import { spline } from "leaflet-spline";

const mySpline = spline(latLngs);

Note if you are using synthetic default imports with TypeScript, you must import spline in this fashion:

import * as L from "leaflet";
import { spline } from "leaflet-spline";

const mySpline: L.Spline = spline(latLngs);

Options

L.spline takes an array of L.LatLng objects, or an array of LatLng tuples ([number, number]) as its primary argument.

L.spline inherits all options from L.PathOptions. It also offers the smoothing option, which determines where to place the control points used to shape the bezier curves. All options are not required. The smoothing defaults to 0.15, but can be adjusted down for sharper corners. Too high a smoothing value will yield some strange shapes.

const mySpline = L.spline(latLngs, {
  color: "black",
  weight: 5,
  smoothing: 0.1,
});

Methods

An L.Spline inherits all methods from L.Polyline, as well as .trace from L.Curve. Most methods are forwarded to the underlying L.Curve, and all L.Curve methods are available in the underlying ._curve property of an L.Spline.

Closed shapes

leaflet-spline draws polylines by default (as opposed to polygons). If you want the appearance of a closed-polygon shape, you must ensure that your set of points has the exact same coordinate for the first and last entries:

const latLngs = [
  [5.1, 2.9], // First entry \
  [6.1, 2.5], //              \
  [6.2, 2.7], //                -> Must be identical
  [5.8, 2.4], //              /
  [5.1, 2.9], // Last entry  /
];

With a circular point set, you can set the fill to true to create the appearance of a closed shape spline:

const mySpline = L.spline(latLngs, { fill: true });

See the demo for examples.

Alternatives

TurfJS has a bezierSpline module that can be used to similar effect. However, their module works by transforming the original pointset into another pointset with more points interpolated along a bezier spline. This plugin leverages leaflet's use of svgs to not calculate intermediate points, but rather use svg path commands to draw perfectly smooth beziers. For comparison:

TurfJS implementation:

leaflet-spline implementation: