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

Methods