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.0.3 and React-Leaflet 1.3.1

Demo JSFiddle

Installation

Install via NPM

npm install react-leaflet-measure --save

Include leaflet-measure.css stylesheet to your project.

<link rel="stylesheet" href="leaflet-measure.css">

Usage example

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'
};
		
<Map center={[101.483459, 2.938926]} zoom={12}>
  <TileLayer
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  />

  <MeasureControl {...measureOptions} />
</Map>

Control options

Any props passed to MeasureControl are passed down to leaflet-measure.

Refer leaflet-measure control options.

Credits

Credits goes to all the contributors for the original work.

License

MIT License