How to use this pretty plugin?

[trippal]

Firstly, I add some strings to my project:

<meta charset="utf-8"/>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<link rel="stylesheet" type="text/css" href="Leaflet.Measurable.css">
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script src="Leaflet.Editable.js"></script>
<script src="Leaflet.Measurable.js"></script>
<style type="text/css">
    .body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 14px;
        color: #333;
        background-color: #fff
    }
    #map { height: 100%;
        width:100%; 
        position: absolute;
        z-index: 100;
        padding: 0px;
        left:0;
        top: 0
    }
</style>

As I understand measure Control need Leaflet.Editable.js
Secondly, I add map

var map = L.map('map').setView([60,30], 8);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Using my previouse expearence adding control looks like this:

map.addControl(new L.MeasureControl());

But there is nothing happened. There was no errors. It looks like browser dont know what to do with this plugin: "Ok, I see your plugin, but I do not got your idea, what you want from me".

Also I didn't find any hints of adding control like this

var map = new L.Map('map', {
  MeasureControl: true,
  MeasureControl.options: {
    position: 'topright'
  }
});

or

var Map = L.map('map', options);
var measureControl = L.Control.Measure(options);
measureControl.addTo(Map);

So, how to add this plugin to map?
Thank you in advance.

[yohanboniface]

Sorry for the delay :(
Can you set up a js fiddle using http://playground-leaflet.rhcloud.com/ ?

[trippal]

No problems))

http://playground-leaflet.rhcloud.com/gov/edit?html,output  

Plugin placed in the end of file(last 10%)
I add several changes(delete miles and NM, and change range of dyslplaying distance). As example I used Geomixer map
http://maps.kosmosnimki.ru/api/index.html      There is 5th button control(with pin).
Also I think that it is better to add div with distance, but I dont know how to add listener to vertexes and lines.
And may be add possible to put 'center' vertex not only at center?

Пятница, 11 марта 2016, 0:23 +03:00 от Yohan Boniface [email protected]:

Sorry for the delay :(
Can you set up a js fiddle using http://playground-leaflet.rhcloud.com/ ?
—
Reply to this email directly or view it on GitHub .

Best regards, Nefedov Dmitrii.

[yohanboniface]

@trippal Plugin seems to work here, but the labels are not rendered, for this you need Leaflet.Label too.
Hope it helps.