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

npm install react-leaflet-measure --save

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>

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:

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);
		
<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 />
</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