- Leaflet Plugin to 📐 measure distances of simple lines as well as of complex polylines.
- Measuring in metric system (meters, kilometers) or in imperial system (yards, miles)
- To finish drawing a line just doubleclick, or singleclick onto the last (=orange) point, or press "ESC"-key.
- Moving of line's points afterwards is possible by click and drag them.
- It is an evolution of jtreml's Plugin leaflet.measure since the original plugin hasn't been bugfixed for years. I modified it to work again with Leaflet v1.0 and newer (still runs with Leaflet v0.7) and added some optical improvements.
- Please take a look at the following Demo (metric values, with Clear-button) or Demo (imperial values, without Clear-button)
Add 2 lines within your HTML-code to load the .css and .js files of the plugin:
<link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css" />
<script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>Add 1 line within your Javascript-code to add the plugin's control into your Leaflet map.
L.control.polylineMeasure(options).addTo(map);options = {
position: 'topleft', // Position to show the control. Possible values are: 'topright', 'topleft', 'bottomright', 'bottomleft'
imperial: false, // Show imperial or metric distances
measureControlTitle: '', // Title for the control
measureControlLabel: '↦', // HTML to place inside the control
measureControlClasses: [], // Classes to apply to the control
backgroundColor: '#8f8', // Background color for control when selected
cursor: 'crosshair', // Cursor type to show when creating measurements
clearMeasurementsOnStop: true, // Clear all the measurements when the control is unselected
showMeasurementsClearControl: false, // Show a control to clear all the measurements
clearControlTitle: 'Clear', // Title text to show on the clear measurements control button
clearControlLabel: '×', // Clear control inner html
clearControlClasses: [], // Collection of classes to add to clear control button
tempLine: { // Styling settings for the temporary dashed line
color: '#00f', // Dashed line color
weight: 2 // Dashed line weight
},
fixedLine: { // Styling for the solid line
color: '#006', // Solid line color
weight: 2 // Solid line weight
},
startCircle: { // Style settings for circle marker indicating the starting point of the polyline
color: '#000', // Color of the border of the circle
weight: 1, // Weight of the circle
fillColor: '#0f0', // Fill color of the circle
fillOpacity: 1, // Fill opacity of the circle
radius: 3 // Radius of the circle
},
intermedCircle: { // Style settings for all circle markers between startCircle and endCircle
color: '#000', // Color of the border of the circle
weight: 1, // Weight of the circle
fillColor: '#ff0', // Fill color of the circle
fillOpacity: 1, // Fill opacity of the circle
radius: 3 // Radius of the circle
},
currentCircle: { // Style settings for circle marker indicating the latest point of the polyline during drawing a line
color: '#000', // Color of the border of the circle
weight: 1, // Weight of the circle
fillColor: '#f0f', // Fill color of the circle
fillOpacity: 1, // Fill opacity of the circle
radius: 3 // Radius of the circle
},
endCircle: { // Style settings for circle marker indicating the last point of the polyline
color: '#000', // Color of the border of the circle
weight: 1, // Weight of the circle
fillColor: '#f00', // Fill color of the circle
fillOpacity: 1, // Fill opacity of the circle
radius: 3 // Radius of the circle
},
};enable- enable measuring;disable- disable measuring;toggle- for both;start- start line measure;path- create intermediate point {length, distance};move- on mouse move when measure {length, distance};stop- stop line measure {distance};