react-leaflet-editable

to v0.1.1 base react-leaflet^2.x.x

This is a lightweight react component build on top of react-leaflet^3.x.x that integrate leaflet-editablefeature. It only provides map editing API, and you can easily organize your own UI.

Example

See the DEMO

How to use

Install

npm install react-leaflet-editable -S

Introducing dependency and import component

Note:

• Install react-leaflet and leaflet-eidtable before import react-leaflet-editable
• MapContainer component must have editable = true attribute
• ReactLeafletEditable component must have map attribute

import React, { useRef } from 'react'
import L, { Icon } from 'leaflet'
import 'leaflet-editable'
import ReactLeafletEditable from 'react-leaflet-editable';
import { MapContainer, TileLayer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'

function Demo (){
    const editRef = useRef();
    const [map, setMap] = useState();
    // 编辑一个多边形
    const editPolygon = () => {
        editRef.current.startPolygon()
    }
    render(){
        return(
             <ReactLeafletEditable
                ref={editRef}
                map={map}
             >
                <MapContainer
                    editable={true}
                    zoom={4}
                    maxZoom={18}
                    center={[35, 105]}
                    whenCreated={setMap}>
                    <button
                        onClick={editPolygon}
                        className="editable-btn"
                    >polygon</button>
                    <TileLayer url="xxx" />
                </MapContainer>
            </ReactLeafletEditable>
        )
    }
}

Component API

Props

| name | type | description | params | | -------------------------- | :------: | :--------------------------------------------------------: | :-----: | | onEditing | function | hook to leaflet-editable editable:editing | (e,map) | | onEnable | function | hook to leaflet-editable editable:enable | (e,map) | | onDisable | function | hook to leaflet-editable editable:disable | (e,map) | | onStartDrawing | function | hook to leaflet-editable editable:drawing:start | (e,map) | | onDrawingClick | function | hook to leaflet-editable editable:drawing:click | (e,map) | | onDrawingCommit | function | hook to leaflet-editable editable:drawing:commit | (e,map) | | onDrawingMouseDown | function | hook to leaflet-editable editable:drawing:mousedown | (e,map) | | onDrawingMouseUp | function | hook to leaflet-editable editable:drawing:mouseup | (e,map) | | onDrawingMove | function | hook to leaflet-editable editable:drawing:move | (e,map) | | onCancelDrawing | function | hook to leaflet-editable editable:drawing:cancel | (e,map) | | onEndDrawing | function | hook to leaflet-editable editable:drawing:end | (e,map) | | onDragStart | function | hook to leaflet-editable editable:dragstart | (e,map) | | onDrag | function | hook to leaflet-editable editable:drag | (e,map) | | onDragEnd | function | hook to leaflet-editable editable:dragend | (e,map) | | onVertexMarkerDrag | function | hook to leaflet-editable editable:vertex:drag | (e,map) | | onVertexMarkerDragStart | function | hook to leaflet-editable editable:vertex:dragstart | (e,map) | | onVertexMarkerDragEnd | function | hook to leaflet-editable editable:vertex:dragend | (e,map) | | onVertextCtrlClick | function | hook to leaflet-editable editable:vertex:ctrlclick | (e,map) | | onNewVertex | function | hook to leaflet-editable editable:vertex:new | (e,map) | | onVertexMarkerClick | function | hook to leaflet-editable editable:vertex:click | (e,map) | | onVertexRawMarkerClick | function | hook to leaflet-editable editable:vertex:rawclick | (e,map) | | onVertexDeleted | function | hook to leaflet-editable editable:vertex:deleted | (e,map) | | onVertexMarkerCtrlClick | function | hook to leaflet-editable editable:vertex:ctrlclick | (e,map) | | onVertexMarkerShiftClick | function | hook to leaflet-editable editable:vertex:shiftclick | (e,map) | | onVertexMarkerMetaKeyClick | function | hook to leaflet-editable editable:vertex:metakeyclick | (e,map) | | onVertexMarkerAltClick | function | hook to leaflet-editable editable:vertex:altclick | (e,map) | | onVertexMarkerContextMenu | function | hook to leaflet-editable editable:vertex:contextmenu | (e,map) | | onVertexMarkerMouseDown | function | hook to leaflet-editable editable:vertex:mousedown | (e,map) | | onVertexMarkerMouseOver | function | hook to leaflet-editable editable:vertex:mouseover | (e,map) | | onVertexMarkerMouseOut | function | hook to leaflet-editable editable:vertex:mouseout | (e,map) | | onMiddleMarkerMouseDown | function | hook to leaflet-editable editable:middlemarker:mousedown | (e,map) | | onShapeNew | function | hook to leaflet-editable editable:shape:new | (e,map) | | onShapeDelete | function | hook to leaflet-editable editable:shape:delete | (e,map) | | onShapeDeleted | function | hook to leaflet-editable editable:shape:deleted | (e,map) |

Methods

| name | type | description | params | | -------------- | :------: | :-------------------------: | :-------------: | | startPolygon | function | start edit a polygon layer | | | startPolyline | function | start edit a polyline layer | | | startMarker | function | start edit a marker layer | | | startRectangle | function | start edit a rect layer | | | startCircle | function | start edit a circle layer | | | startHole | function | start edit a hole layer | (editor,latlng) | | clearAll | function | clear all editing layers | |