React Leaflet Draft

A modern study React component of leaflet draw for react-leaflet

React component of leaflet-draw for react-leaflet

Table of contents

• Main
• Getting started
• API
• License

Main

dist/
└── index.min.js    

Getting started

Requirements

yarn add leaflet leaflet-draw react-leaflet

Installation

For React 17 with React Leaflet 3

yarn add react-leaflet-draft@ˆ1.2.1

For React 18 with React Leaflet 4

yarn add react-leaflet-draft@latest

Usage

Basic Example

<FeatureGroup>
    <DraftControl/>
</FeatureGroup>

Full Example

import "leaflet/dist/leaflet.css";

import { DraftControl } from "react-leaflet-draft";
import { MapContainer, TileLayer, FeatureGroup } from "react-leaflet";

function Map() {
    return(
        <MapContainer
            zoom={14}
            center={[-22.2108112, -49.6771926]}
        >
            <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <FeatureGroup>
                <DraftControl />
            </FeatureGroup>
        </MapContainer>
    )
}

API

You can see the properties in Leaflet-draw Documentation

Example options

<DraftControl
    draw={{
        circle: true,
        rectangle: true
    }}
    edit={{
        edit: {}
    }}
    translate={{
        toolbar: {
            buttons: {
                circle: 'Circle'
            }
        }
    }}
    limitLayers={2}
/>

Example listeners

<DraftControl
    onEdited={e => console.log(e)}
    onDeleted={e => console.log(e)}
    onCreated={e => console.log(e)}
/>

License

ISC © Giovane Santos