Leaflet Linear Measurement Plugin

• 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.

Demo

See the demo.

Usage

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>

Options

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

Requirements

Leaflet 1.0.0+ (may work with earlier versions)

Author

New Light Technologies, Inc. (NLT) Contact us for more informaiton: https://newlighttechnologies.com/about/contact/