Leaflet.js Measurement — Distance and Area Tools

DodaTech Updated 2026-06-28 3 min read

In this tutorial, you will learn about Leaflet.js Measurement. We cover key concepts, practical examples, and best practices to help you master this topic.

Leaflet.js measurement tools enable users to draw lines and polygons on the map and calculate distances and areas using built-in geodesic formulas.

What You'll Learn

By the end of this guide, you will install Leaflet Draw for measurement, calculate distance along drawn lines, calculate polygon areas in various units, customize measurement display, and build a custom measurement control.

Leaflet Draw Measurement

// npm install leaflet-draw
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
    edit: { featureGroup: drawnItems },
    draw: {
        polyline: true,
        polygon: true,
        circle: false,
        marker: false,
        rectangle: true
    }
});
map.addControl(drawControl);

Distance Calculation

map.on(L.Draw.Event.CREATED, function(event) {
    var layer = event.layer;
    drawnItems.addLayer(layer);

    if (event.layerType === 'polyline') {
        var latlngs = layer.getLatLngs();
        var distance = 0;
        for (var i = 0; i < latlngs.length - 1; i++) {
            distance += latlngs[i].distanceTo(latlngs[i + 1]);
        }
        layer.bindPopup('Distance: ' + (distance / 1000).toFixed(2) + ' km');
    }

    if (event.layerType === 'polygon') {
        var area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
        layer.bindPopup('Area: ' + (area / 1000000).toFixed(2) + ' km' + '<sup>2</sup>');
    }
});

Common Mistakes

1. Not Using Geodesic Distance

Simple coordinate subtraction gives wrong results. Use layer.distanceTo() for geodesic distance.

2. Polygon Area in Wrong Units

L.GeometryUtil.geodesicArea returns square meters. Convert to hectares or km2 for display.

3. Draw Events Not Firing

Listen to L.Draw.Event.CREATED. The draw:created string constant may differ between versions.

4. Measurement on Wrong Projection

Leaflet uses EPSG3857 by default. Distance calculations are approximate near poles. Use true geodesic functions.

5. Not Clearing Previous Measurements

Allow users to clear drawn layers. Add a trash button or double-click to delete.

Practice Questions

Q1: What plugin provides measurement drawing tools? A: Leaflet Draw (leaflet-draw).

Q2: How do you calculate geodesic distance? A: Use latlng.distanceTo(otherLatLng) which returns meters using the Haversine formula.

Q3: How do you calculate polygon area? A: Use L.GeometryUtil.geodesicArea(latlngs) which returns area in square meters.

Q4: What event fires when a shape is drawn? A: L.Draw.Event.CREATED or the string 'draw:created'.

Q5: How do you convert square meters to hectares? A: Divide by 10,000. For km2, divide by 1,000,000.

Challenge: Build a measurement toolbar with distance, area, and bearing tools. Display measurements in a floating panel that updates as the user drags the last point.

FAQ

Can I use Leaflet Draw in production?

Yes, but be aware the plugin is in maintenance mode. Consider Leaflet.Editable or Leaflet.FeatureGroup.SubGroup as alternatives.

How accurate are Leaflet distance calculations?

Leaflet uses the Haversine formula for great-circle distance. Accuracy is within 0.5% for most use cases.

Can I measure bearing?

Calculate bearing using Math.atan2 between two latlngs. Leaflet does not provide a built-in bearing function.

How do I restrict measurement to a specific area?

Set map.setMaxBounds to limit the visible area for drawing.

Can I use metric and imperial units?

Yes. Convert meters to feet (1m = 3.281ft) and km to miles (1km = 0.621mi).

Try It Yourself

Build a map with distance and area measurement.

<!DOCTYPE html>
<html>
<head>
    <title>Measurement Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1/dist/leaflet.draw.css" />
    <script src="https://unpkg.com/leaflet@1.9/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-draw@1/dist/leaflet.draw.js"></script>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Measurement Tools</h2>
<div id="map" style="height:400px;border-radius:8px;"></div>
<p>Draw a line to measure distance, or a polygon to measure area.</p>
<script>
var map = L.map('map').setView([40.7128, -74.0060], 12);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OSM'
}).addTo(map);

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
    edit: { featureGroup: drawnItems },
    draw: {
        polyline: { metric: true },
        polygon: { metric: true },
        circle: false,
        circlemarker: false,
        marker: false,
        rectangle: true
    }
});
map.addControl(drawControl);

map.on('draw:created', function(event) {
    var layer = event.layer;
    var type = event.layerType;
    drawnItems.addLayer(layer);

    if (type === 'polyline') {
        var latlngs = layer.getLatLngs();
        var dist = 0;
        for (var i = 0; i < latlngs.length - 1; i++) {
            dist += latlngs[i].distanceTo(latlngs[i + 1]);
        }
        layer.bindPopup('Distance: ' + (dist / 1000).toFixed(2) + ' km').openPopup();
    }

    if (type === 'polygon' || type === 'rectangle') {
        var area = L.GeometryUtil.geodesicArea(layer.getLatLngs()[0]);
        var hectares = area / 10000;
        layer.bindPopup('Area: ' + hectares.toFixed(2) + ' ha').openPopup();
    }
});
</script>
</body>
</html>

What's Next

Enable offline map support.

Offline — Offline maps. Performance — Performance optimization.

← Previous Leaflet.js Popups — Interactive Information Windows Next → Leaflet.js Offline — Building Maps Without Internet

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Leafletjs