- This plugin is a measuring tool that shows interval marks along the polyline path.
- A tooltip at the end of the last segment indicates the total distance of all segments in a polyline.
- It is possible to create multiple polylines on the same map.
- Double click event will complete the creation of a polyline and allow the creation of a new polyline.
- The polylines can be individually removed from the map.
See the demo.
LinearCore is a control class that holds several plugins to interact with the map. You need to just add an instance to the map with a config object:
Include the script and css
map.addControl(new L.Control.LinearMeasurement({ unitSystem: 'imperial', color: '#FF0080', type: 'line' }));
There is the possibility to extend the plugin to handle some of the internal events:
var Core = L.Control.LinearCore.extend({
onSelect: function(e){
if(!e.total){
return;
}
var distance = e.total.scalar;
if(e.total.unit === 'mi'){
distance *= e.sub_unit;
} else if(e.total.unit === 'km'){
distance *= 3280.84;
} else if(e.total.unit === 'm'){
distance *= 3.28084;
}
var cost_underground = 12.55,
cost_above_ground = 17.89,
html = [
'<table>',
' <tr><td class="cost_label">Cost Above Ground:</td><td class="cost_value">${total_above_ground}</td></tr>',
' <tr><td class="cost_label">Cost Underground:</td><td class="cost_value">${total_underground}</td></tr>',
'</table>'
].join(''),
numberWithCommas = function(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};
var data = {
total_above_ground: numberWithCommas(L.Util.formatNum(cost_above_ground * distance, 2)),
total_underground: numberWithCommas(L.Util.formatNum(cost_underground * distance, 2))
};
if(e.rulerOn){
var content = L.Util.template(html, data),
popup = L.popup().setContent(content);
e.total_label.bindPopup(popup, { offset: [45, 0] });
e.total_label.openPopup();
}
}
});
map.addControl(new Core({
unitSystem: 'imperial',
color: '#FF0080',
type: 'line'
}));</code>
option default
position topleft
color #4D90FE
fillColor #fff
type node
features ['node', 'line', 'polygon', 'ruler', 'paint', 'drag', 'rotate', 'nodedrag', 'trash']
pallette ['#FF0080', '#4D90FE', 'red', 'blue', 'green', 'orange', 'black']
dashArrayOptions ['5, 5', '5, 10', '10, 5', '5, 1', '1, 5', '0.9', '15, 10, 5', '15, 10, 5, 10', '15, 10, 5, 10, 15', '5, 5, 1, 5']
fill true
stroke true
dashArray 5, 5
weight 2
opacity 1
fillOpacity 0.5
radius 3
unitSystem imperial
doubleClickSpeed 300
Leaflet 1.0.0+ (may work with earlier versions)
New Light Technologies, Inc. (NLT)
Contact us for more informaiton: https://newlighttechnologies.com/about/contact/