A
Leafletplugin to measure distance on map. This repository is based onjtreml/leaflet.measure, the origin repo seems not to be maintained anymore.
Supported with current latest
leafletv1.x.
You can check the example here.
Assume that you have already installed Leaflet:
Enable plugin in map constructor:
var map = L.map(elMap, {
center: [22.536836, 113.951513],
zoom: 5,
measureControl: true
})Or, add it anytime you wish, with specific options:
L.control.measure({
position: 'topleft'
}).addTo(map)The available options are listed below:
| option | default | description |
|---|---|---|
| position | 'topleft' | Option from L.Control |
| keyboard | true | Whether to use keyboard control for this plugin. If set to true, you can use the defined key to toggle measuring |
| activeKeyCode | 77 | The key code to active measuring. 77 is the key code of M |
| cancelKeyCode | 27 | The key code to cancel measuring. 27 is the key code of ESC |
| lineColor | 'black' | The color of measuring line. Option from L.Polyline |
| lineWeight | 2 | The weight(width) of measuring line. Option from L.Polyline |
| lineDashArray | '6, 6' | The dash array of measuring line. Option from L.Polyline |
| lineOpacity | 1 | The opacity of measuring line. Option from L.Polyline |
| textColor | 'black' | The color of distance label. Can be set to any valid css color |
| formatDistance | ~ | The measure distance format method, output as m and km string by default. You can customize to any other distance unit(see example code below) |
L.control.measure({
// distance formatter, output mile instead of km
formatDistance: function (val) {
return Math.round(1000 * val / 1609.344) / 1000 + 'mile';
}
}).addTo(map)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent