Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

How to use this pretty plugin? #1

Open
trippal opened this issue Jan 18, 2016 · 3 comments
Open

How to use this pretty plugin? #1

trippal opened this issue Jan 18, 2016 · 3 comments

Comments

@trippal
Copy link

trippal commented Jan 18, 2016

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
Copy link
Member

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

@trippal
Copy link
Author

trippal commented Mar 11, 2016

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 notifications@github.com:

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
Copy link
Member

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants