Neglected Parking Meter

    react-leaflet-freedraw

    3.0.1 • Public • Published

    react-leaflet-freedraw

    React component built on top of react-leaflet v3 that integrates Leaflet.FreeDraw library.

    Please checkout codesandbox EXAMPLE using this package with some primary use cases.

    Install

    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

    Getting started

    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,

    1. Clone this repo
    2. Run npm i
    3. Run npm run example

    Install

    npm i react-leaflet-freedraw

    DownloadsWeekly Downloads

    311

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • elango.bharathi