Skip to content

epozsh/react-leaflet-curve

Repository files navigation

react-leaflet-curve

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

Curve example

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.