react-leaflet-measure

React wrapper of leaflet-measure for react-leaflet. Coordinate, linear, and area measure control for Leaflet maps. Extends L.Control. Tested with Leaflet 1.3.4 and React-Leaflet 1.9.1, React-Leaflet 2.1.4

Demos

Demo Page

Installation

Install via NPM

```bash npm install react-leaflet-measure --save ```

Usage example

```javascript import { Map, TileLayer } from 'react-leaflet'; import MeasureControl from 'react-leaflet-measure'; const measureOptions = { position: 'topright', primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers', primaryAreaUnit: 'sqmeters', secondaryAreaUnit: 'acres', activeColor: '#db4a29', completedColor: '#9b2d14' };

101.483459, 2.938926} zoom={12}> url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

/> ```

Usage with React-Leaflet v2

This plugin is compatible with version 2 of React-Leaflet, but you have to wrap the MeasureControl component using the withLeaflet higher-order component to give it access to the new context mechanism. For example: ```javascript import { Map, withLeaflet } from 'react-leaflet'; // Import to a different variable so you don't have to update the rest of your codes import MeasureControlDefault from 'react-leaflet-measure'; // Wrap our new variable and assign it to the one we used before. The rest of the codes stays the same. const MeasureControl = withLeaflet(MeasureControlDefault);

101.483459, 2.938926} zoom={12}> url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'

/> ```

Control options

Any props passed to MeasureControl are passed down to leaflet-measure. Refer leaflet-measure control options.

Events

| Event | Data | Description | --- | --- | --- | onMeasurestart | this | Fired when measurement starts. | onMeasurefinish | result | Fired when measurement finishes with results of the measurement. Credits goes to all the contributors for the original work. MIT License