Leaflet measure plugin

Leaflet plugin for measuring distance and areas on a leaflet powered map.

Download the plugin at https://github.com/ljagis/leaflet-measure

You can download the geojson file used in the example below here- https://www.dropbox.com/s/253uqu4fpfrhwli/Cities.geojson?dl=0

 

Explanation

– Use JQuery .getJSON to load geojson file from an external source. Add to the map.
$.getJSON(‘Cities.geojson’, function(data){
var real = L.geoJson(data, {
pointToLayer: function(feature, latlng){
marker = L.marker(latlng);
return marker;
}}).addTo(map);
});

 

– Create the variable object for the measure control- L.Control.Measure- and also include options.

Default measurements are not metric so the option will customize the measurement units to user requirements.

Add the control to the map.

 

var measureControl = new L.Control.Measure({ primaryLengthUnit: ‘meters’, secondaryLengthUnit: ‘miles’, primaryAreaUnit: ‘sqmeters’, secondaryAreaUnit: ‘hectares’, activeColor: ‘#316’, completedColor: ‘#316’}).addTo(map);

 

Screenshots of the example. The left screenshot shows a linear measurement while the right screenshot displays result of an area measurement. See full text below the screenshots.

Capture-19     Capture-20

See live map by clicking the link below:

http://htmlpreview.github.io/?https://github.com/mayotunde/major/blob/gh-pages/measure.html

Download the plain text version of the source code- https://www.dropbox.com/s/885ohim0twc4hke/leaflet%20measure%20plugin%20in%20leaflet%20map.txt?dl=0

ddr-001

 

 

Documentation at https://github.com/ljagis/leaflet-measure

 

Thank you for following the blog.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s