React Map Drawing Component based on rc-leaflet

History Versions

- rc-leaflet-drawing CHANGELOG

Docs

- rc-leaflet

- leaflet.pm

Features

- [x] TypeScript support

- [x] supported Component Modes: Controlled Mode, Uncontrolled Mode

- [x] supported Operation Modes: None (default), Draw, Drag, Edit, Remove

- [x] supported Drawing Shapes: Marker (default), Circle, Line, Polygon, Rectangle

- [ ] Cut Mode

Data Structure

- Lang:

``ts
enum Lang {
en = 'en',
de = 'de',
it = 'it',
ru = 'ru',
ro = 'ro',
es = 'es',
fr = 'fr',
nl = 'nl'
}
`

- Translation:

`ts
type TranslationTooltips = Partial<{
placeMarker: string
firstVertex: string
continueLine: string
finishLine: string
finishPoly: string
finishRect: string
startCircle: string
finishCircle: string
}>

type TranslationActions = Partial<{
finish: string
cancel: string
removeLastVertex: string
}>

type TranslationButtonTitles = Partial<{
drawMarkerButton: string
drawPolyButton: string
drawLineButton: string
drawCircleButton: string
drawRectButton: string
editButton: string
dragButton: string
cutButton: string
deleteButton: string
}>

type Translation = Partial<{
tooltips: TranslationTooltips
actions: TranslationActions
buttonTitles: TranslationButtonTitles
}>
`

- Mode:

`ts
enum Mode {
None = 'None',
Draw = 'Draw',
Drag = 'Drag',
Edit = 'Edit',
Remove = 'Remove'
}
`

- Shape:

`ts
enum Shape {
Marker = 'Marker',
Circle = 'Circle',
Line = 'Line',
Polygon = 'Polygon',
Rectangle = 'Rectangle'
}
`

- DrawOptions:

`ts
type FinishOn = 'click' | 'dblclick' | 'mousedown' | 'mouseover' | 'mouseout' | 'contextmenu' | null

type DrawOptions = Partial<{
snappable: boolean
snapDistance: number
snapMiddle: boolean
tooltips: boolean
allowSelfIntersection: boolean
templineStyle: L.PathOptions
hintlineStyle: L.PathOptions
cursorMarker: boolean
finishOn: FinishOn
markerStyle: L.MarkerOptions
pathOptions: L.PathOptions
}>
`

- EditOptions:

`ts
type EditOptions = Partial<{
draggable: boolean
snappable: boolean
snapDistance: number
allowSelfIntersection: boolean
preventMarkerRemoval: boolean
hintlineStyle: L.PathOptions
}>
`

Usage

$3

`cmd
npm install rc-leaflet-drawing --save
`

$3

`jsx
import React, { Component } from 'react'
import { RCMap } from 'rc-leaflet'
import Drawing, { Mode, Shape } from 'rc-leaflet-drawing'

class App extends Component {
state = {
layers: []
}

render () {
return (

{/ Uncontrolled Mode /}

{/ Controlled Mode, layers prop is passed /}


)
}
}
`

$3

- 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

- required: false

- layers to display, if passed, controlled mode is enabled.

- points

- type: Array

- required: false

- points to display, if passed, controlled mode is enabled.

- circles

- type: Array

- required: false

- circles to display, if passed, controlled mode is enabled.

- polylines

- type: Array

- required: false

- polylines to display, if passed, controlled mode is enabled.

- polygons

- type: Array

- required: false

- polygons to display, if passed, controlled mode is enabled.

- rectangles

- type: Array

- 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 or Edit mode.

- onPointChange

- type: (point: L.Marker, index: number, points: L.Marker[]): void

- required: false

- fired when a point is changed during Drag or Edit mode.

- onCircleChange

- type: (circle: L.Circle, index: number, circles: L.Circle[]): void

- required: false

- fired when a circle is changed during Drag or Edit mode.

- onPolylineChange

- type: (polyline: L.Polyline, index: number, polylines: L.Polyline[]): void

- required: false

- fired when a polyline is changed during Drag or Edit mode.

- onPolygonChanges

- type: (polygon: L.Polygon, index: number, polygons: L.Polygon[]): void

- required: false

- fired when a polygon is changed during Drag or Edit mode.

- onRectangleChange

- type: (rectangle: L.Rectangle, index: number, rectangles: L.Rectangle[]): void

- required: false

- fired when a rectangle is changed during Drag or Edit 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.