leaflet-linear-measurement

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