awshanks-react-leaflet-measure
v2.1.2
Published
React wrapper of leaflet-measure. Coordinate, linear, and area measure control for Leaflet maps.
Downloads
2
Maintainers
Readme
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
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='© <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='© <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