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:

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

• Translation:

  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:

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

• Shape:

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

• DrawOptions:

  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:

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

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'

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

  render () {
    return (
      <RCMap>
        {/* Uncontrolled Mode */}
        <Drawing Mode={Mode.Draw} shape={Shape.Marker} onDrawLayer onLayerChange onRemoveLayer />
        {/* Controlled Mode, layers prop is passed */}
        <Drawing Mode={Mode.Draw} shape={Shape.Marker} layers={this.state.layers} onDrawLayer onLayerChange onRemoveLayer />
      </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 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.