Leaflet.Measure Is a leaflet plugin for measuring distances and areas.
Online DEMO.
// 1. add control to map
var map = L.map("map", {
center: [29, 120],
});
L.control.measure().addTo(map);
// 2. using action directly
var measureAction = new L.MeasureAction(map, {
model: "distance", // 'area' or 'distance', default is 'distance'
});
// measureAction.setModel('area');
measureAction.enable();
| Option | Type | Default | Description | |——–|——|———|————-| | position | String | ‘topleft’ | The position of the control. | | title | String | ‘Measurement’ | The title of the control. | | collapsed | Boolean | false | If true, the control will be collapsed into an icon and expanded on mouse hover or touch. | | color | String | ‘#FF0080’| The color of the lines or polygons. |
| Option | Type | Default | Description | |——–|——|———|————-| | model | String | ‘distance’ | Measurement mode. Possible values are ‘distance’ or ‘area’. | | color | String | ‘#FF0080’| The color of the lines or polygons. |
| Method | Returns | Description | |——–|———|————-| | setModel(<String> model) | this | Sets the measurement mode. Possible values are ‘distance’ or ‘area’. |
L.Measure = {
linearMeasurement: "Distance measurement",
areaMeasurement: "Area measurement",
start: "Start",
meter: "m",
meterDecimals: 0,
kilometer: "km",
kilometerDecimals: 2,
squareMeter: "m²",
squareMeterDecimals: 0,
squareKilometers: "km²",
squareKilometersDecimals: 2
};