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:

    map.addControl(new L.Control.LinearCore({
      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 = [
                    '',
                    ' ',
                    ' ',
                    'Cost Above Ground: ${total_above_ground}
Cost Underground: ${total_underground}'
                ].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'
    }));

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

Juan Daniel Flores

Cost Above Ground:	${total_above_ground}
Cost Underground:	${total_underground}