Ruler measurement tool for Leaflet with distance values updating on changing location of path points. Requires Leaflet.EasyButton to be installed.
Check the demo page to see it in action.
Include script file
<script src="leaflet.interactive-path-ruler.js" type="text/javascript"></script>
Assuming that map
variable is Leaflet map, initialize ruler with optional parameters:
L.interactivePathRuler(map, {
buttonIconOff: 'fa-ellipsis-h fa-lg', // Button icon in 'off' state
buttonIconOn: 'fa-ellipsis-h fa-lg', // Button icon in 'on' state
buttonTitleOff: 'Turn ruler on', // Button tooltip text in 'off' state
buttonTitleOn: 'Turn ruler off', // Button tooltip text in 'on' state
buttonBackgroundColorOff: 'white', // Button background color in 'off' state
buttonBackgroundColorOn: 'orange', // Button background color in 'on' state
rulerLineColor: 'red', // Line stroke color
rulerLineWeight: 3, // Line stroke width in pixels
markerPopupClassName: '', // Custom CSS class name for popup
decimalSeparator: '.', // Used to format distance values in popups
unitNameMeter: 'M', // Unit name for distance values expressed in meters
unitNameKilometer: 'KM' // Used to format distance values expressed in kilometers
});
Note: this example options requires Font Awesome installed for button icons.
Now ruler button will be added to other map buttons.
- More customization options for line/markers/popups
- Easy adding vertex on path line (with click tolerance distance)
- More measurement units