Leaflet plugin that creates polylines with incremental measures along the path. (A.K.A a ruler)
JavaScript CSS
Latest commit 376f760 Jan 9, 2017 @longenecker79 longenecker79 committed on GitHub Updated Plugin Features
Updated plugin feature list.

README.md

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 = [
                '<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

optiondefault
positiontopleft
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