cmilfont/react-leaflet-curve

Bezier Curve For React-Leaflet

react-leaflet-curve

Bezier Curve - a React component build on top of React-Leaflet that integrate leaflet-curve feature.

Getting started

import React from 'react';
import { Map, Circle, TileLayer, LayersControl, FeatureGroup, Marker, Polyline } from 'react-leaflet'
import { Curve } from 'react-leaflet-curve'

const path = ['M', [50.14874640066278, 14.106445312500002],
  'Q', [51.67255514839676, 16.303710937500004],
  [50.14874640066278, 18.676757812500004],
  'T', [49.866316729538674, 25.0927734375]]

<Curve positions={path} option={{color:'red',fill:true}}/>

For more details on how to use this plugin check the example.

API

Command	Parameters	Description
M	[lat,lng]+	move to [lat,lng]
L	[lat,lng]+	line to [lat,lng]
H	[lng]+	horizontal line to [lng]
V	[lat]+	vertical line to [lat]
C	([lat1,lng1],[lat2,lng2],[lat,lng])+	cubic Bézier curve to [lat,lng] with control points at [lat1,lng1] and [lat2,lng2]
S	([lat2,lng2],[lat,lng])+	cubic bézier curve to [lat,lng] with control points at reflection of second control point of previous curve [lat1,lng1] and [lat2,lng2]
Q	([lat1,lng1],[lat,lng])+	quadratic Bézier curve to [lat,lng] with control point at [lat1,lng1]
T	([lat,lng])+	quadratic Bézier curve to [lat,lng] with control point at reflection of control point of previous curve [lat1,lng1]
Z		close path (line to M)

Note that only absolute commands (uppercase) are implemented. It's possible to approximate elliptical arcs (command 'A') with Bézier curves (the elliptical-arc branch implements this command if you're interested).

For more details on how to use this plugin check the example.