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 React 19.2.1, Leaflet 1.9.4, React-Leaflet 5.0.0, React-Leaflet 4.0.0

Demos

Demo Page

Installation

Install via NPM

npm install react-leaflet-measure --save

Usage example

import { MapContainer, 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',
  captureZIndex: 10000,
  onMeasureStart: (e) => console.log('Measurement started:', e),
  onMeasureFinish: (e) => console.log('Measurement finished:', e),
};
		
<MapContainer 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.

Events

Event	Data	Description
onMeasureStart	this	Fired when measurement starts.
onMeasureFinish	result	Fired when measurement finishes with results of the measurement.

Credits

Credits goes to all the contributors for the original work.

License

MIT License