Plugin for react-leaflet v3 to integrate Leaflet.FreeDraw.
Please checkout codesandbox EXAMPLE using this package with some primary use cases.
npm install react-leaflet-freedraw --save
or
yarn add react-leaflet-freedraw
Make sure that you have the following peer dependencies installed.
npm install leaflet react-leaflet react react-dom --save
or
yarn add leaflet react-leaflet react react-dom
Please make sure that you go through Leaflet.FreeDraw readme before integrating this component.
You need to wrap this component into MapContainer component and pass the options as shown below.
import React, { useRef } from 'react';
import { MapContainer } from 'react-leaflet';
import Freedraw, { ALL } from 'react-leaflet-freedraw';
const Component = () => {
const freedrawRef = useRef(null);
return (
<MapContainer>
<Freedraw
mode={ALL}
eventHandlers={{
markers: (event) =>
console.log(
'markers drawn - latLngs',
event.latLngs,
'Polygons:',
freedrawRef.current.size()
),
mode: (event) => console.log('mode changed', event),
}}
ref={freedrawRef}
/>
</MapContainer>
);
};It supports all the options mentioned in Leaflet.FreeDraw.
A detailed example of how to use this componenet is in the example folder of this repo. To run the example,
- Clone this repo
- Run
npm i - Run
npm run example
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent