zjfcool/react-leaflet-editable

a react component with react-leaflet and leaflet-editable

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

react-leaflet-editable's Issues

Allow for optional alternative behaviour for polygon draw

A lot of leaflet draw users are trained to just draw a line and then connect the last point with the first to finish, it would be cool if that were available as an alternative.

Migrate to react-leaflet v4

I see in another issue that you've upgrade to support v3. Could you update the readmy to reflect the new setup that doesn't require the Map component reference?

Unsure whether additional changes will be required to support v4.

Migrate to react-leaflet v3

This library is not compatible with react-leaflet v3, it requires a Map component which no longer exists.

Note there are now hooks present that allow children of the Map component to access the ref directly.

@zjfcool