React Map Drawing Component based on rc-leaflet
History Versions
Docs
Features
-
TypeScript
support -
supported Component Modes:
Controlled Mode
,Uncontrolled Mode
-
supported Operation Modes:
None
(default),Draw
,Drag
,Edit
,Remove
-
supported Drawing Shapes:
Marker
(default),Circle
,Line
,Polygon
,Rectangle
-
Cut
Mode
Data Structure
-
Lang
: -
Translation
: -
Mode
: -
Shape
: -
DrawOptions
: -
EditOptions
:
Usage
Install
npm install rc-leaflet-drawing --save
Example
import React Component from 'react'import RCMap from 'rc-leaflet'import Drawing Mode Shape from 'rc-leaflet-drawing' state = layers: { return <RCMap> /* Uncontrolled Mode */ <Drawing = = /> /* Controlled Mode, layers prop is passed */ <Drawing = = = /> </RCMap> }
Props
-
lang
-
type: Lang
-
required:
false
-
default:
Lang.en
-
language setting group of
Drawing
Component.
-
-
translation
-
type: Translation
-
required:
false
-
language settings used to override settings of
lang
.
-
-
mode
-
type: Mode
-
required:
false
-
default:
Mode.None
-
mode of
Drawing
Component.
-
-
shape
-
type: Shape
-
required:
false
-
default:
Shape.Marker
-
shape of
Draw
mode.
-
-
drawOptions
-
type: DrawOptions
-
required:
false
-
options of
Draw
mode.
-
-
editOptions
-
type: EditOptions
-
required:
false
-
options of
Edit
mode.
-
-
layers
-
type:
Array<L.Layer>
-
required:
false
-
layers to display, if passed, controlled mode is enabled.
-
-
points
-
type:
Array<L.Marker>
-
required:
false
-
points to display, if passed, controlled mode is enabled.
-
-
circles
-
type:
Array<L.Circle>
-
required:
false
-
circles to display, if passed, controlled mode is enabled.
-
-
polylines
-
type:
Array<L.Polyline>
-
required:
false
-
polylines to display, if passed, controlled mode is enabled.
-
-
polygons
-
type:
Array<L.Polygon>
-
required:
false
-
polygons to display, if passed, controlled mode is enabled.
-
-
rectangles
-
type:
Array<L.Rectangle>
-
required:
false
-
rectangles to display, if passed, controlled mode is enabled.
-
-
onDrawLayer
-
type:
(layer: L.Layer, layers: L.Layer[]): void
-
required:
false
-
fired when any type of layer is drawn during
Draw
mode.
-
-
onDrawPoint
-
type:
(point: L.Marker, points: L.Marker[]): void
-
required:
false
-
fired when a point is drawn during
Draw
mode.
-
-
onDrawCircle
-
type:
(circle: L.Circle, circles: L.Circle[]): void
-
required:
false
-
fired when a circle is drawn during
Draw
mode.
-
-
onDrawPolyline
-
type:
(polyline: L.Polyline, polylines: L.Polyline[]): void
-
required:
false
-
fired when a polyline is drawn during
Draw
mode.
-
-
onDrawPolygon
-
type:
(polygon: L.Polygon, polygons: L.Polygon[]): void
-
required:
false
-
fired when a polygon is drawn during
Draw
mode.
-
-
onDrawRectangle
-
type:
(rectangle: L.Rectangle, rectangles: L.Rectangle[]): void
-
required:
false
-
fired when a rectangle is drawn during
Draw
mode.
-
-
onLayerChange
-
type:
(layer: L.Layer, index: number, layers: L.Layer[]): void
-
required:
false
-
fired when any type of layer is changed during
Drag
orEdit
mode.
-
-
onPointChange
-
type:
(point: L.Marker, index: number, points: L.Marker[]): void
-
required:
false
-
fired when a point is changed during
Drag
orEdit
mode.
-
-
onCircleChange
-
type:
(circle: L.Circle, index: number, circles: L.Circle[]): void
-
required:
false
-
fired when a circle is changed during
Drag
orEdit
mode.
-
-
onPolylineChange
-
type:
(polyline: L.Polyline, index: number, polylines: L.Polyline[]): void
-
required:
false
-
fired when a polyline is changed during
Drag
orEdit
mode.
-
-
onPolygonChanges
-
type:
(polygon: L.Polygon, index: number, polygons: L.Polygon[]): void
-
required:
false
-
fired when a polygon is changed during
Drag
orEdit
mode.
-
-
onRectangleChange
-
type:
(rectangle: L.Rectangle, index: number, rectangles: L.Rectangle[]): void
-
required:
false
-
fired when a rectangle is changed during
Drag
orEdit
mode.
-
-
onRemoveLayer
-
type:
(layer: L.Layer, index: number, layers: L.Layer[]): void
-
required:
false
-
fired when any type of layer is removed during
Remove
mode.
-
-
onRemovePoint
-
type:
(point: L.Marker, index: number, points: L.Marker[]): void
-
required:
false
-
fired when a point is removed during
Remove
mode.
-
-
onRemoveCircle
-
type:
(circle: L.Circle, index: number, circles: L.Circle[]): void
-
required:
false
-
fired when a circle is removed during
Remove
mode.
-
-
onRemovePolyline
-
type:
(polyline: L.Polyline, index: number, polylines: L.Polyline[]): void
-
required:
false
-
fired when a polyline is removed during
Remove
mode.
-
-
onRemovePolygon
-
type:
(polygon: L.Polygon, index: number, polygons: L.Polygon[]): void
-
required:
false
-
fired when a polygon is removed during
Remove
mode.
-
-
onRemoveRectangle
-
type:
(rectangle: L.Rectangle, index: number, rectangles: L.Rectangle[]): void
-
required:
false
-
fired when a rectangle is removed during
Remove
mode.
-