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



– 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;


– 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:


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




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


Thank you for following the blog.


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