How to calculate distance between two points in Leaflet js
Calculating the distance between two points can be challenging in interactive maps. That’s why I decided to write an article explaining how we can do it.
I use leaflet js to create the map and calculate the distance between two points.
This article is also available in video, so you can watch it or continue reading
Step 1: Add leaflet js and CSS
First you need to add leaflet js and CSS to your document. a div for your map and a span to display the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="style.css" />
<title>Get Distances between two points</title>
</head>
<body>
<div class="result">
Distance (in meters):
<!-- displaying the distance here -->
<span id="length"></span>
</div>
<!-- map container -->
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="scripts.js"></script>
</body>
</html>Step 2: Create the base map
Use the scripts below to create a basic map. If it’s not clear to you, please read this article first, before continuing.
let mapOptions = { center: [17.385044, 78.486671],
zoom: 13
}
let map = new L.map('map', mapOptions),
layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);Step 3: Add click event
In this step, we listen to the user’s click and decide what to do after checking some conditions.
when the user clicks on the map, the first marker will be added and the second click will add the next marker. For each marker we need the longitude and latitude.
I define several variables for holding the points, polyline object and markers:
let
_firstLatLng, //holding first marker latitude and longitude
_secondLatLng,//holding second marker latitude and longitude
_polyline, //holding polyline object
merkerA= null,
markerB = null;Next, we add the click event and define what should happen after checking whether the first marker was added or the second or both:
map.on('click', function(e) {
if (!_firstLatLng) {
//get first point latitude and longitude
_firstLatLng = e.latlng;
//create first marker and add popup
markerA = L.marker(_firstLatLng).addTo(map).bindPopup('Point A<br/>' + e.latlng).openPopup();
} else if (!_secondLatLng) {
//get second point latitude and longitude
_secondLatLng = e.latlng;
//create second marker and add popup
markerB = L.marker(_secondLatLng).addTo(map).bindPopup('Point B<br/>' + e.latlng).openPopup();
//draw a line between two points
_polyline = L.polyline([_firstLatLng, _secondLatLng], {
color: 'red'
});
//add the line to the map
_polyline.addTo(map);
//get the distance between two points
let _length = map.distance(_firstLatLng, _secondLatLng);
//display the result
document.getElementById('length').innerHTML = _length;
} else {
//if already we have two points first we remove the polyline object
if (_polyline) {
map.removeLayer(_polyline);
_polyline = null;
}
//get new point latitude and longitude
_firstLatLng = e.latlng;
//remove previous markers and values for second point
map.removeLayer(markerA);
map.removeLayer(markerB);
_secondLatLng = null;
//create new marker and add it to map
markerA = L.marker(_firstLatLng).addTo(map).bindPopup('Point A<br/>' + e.latlng).openPopup();
}
});we use the distance method to return the distance between two geographical coordinates according to the map’s CRS. By default, the distance is measured in meters.
let _length = map.distance(el)
document.getElementById('length').innerHTML = _length;When the second marker is added, we pass the two points to the distance method and display the result.
map.on(‘click’, function(e) {
if (!_firstLatLng) {
//get first point latitude and longitude
_firstLatLng = e.latlng;
//get first point layerpoint
_firstPoint = e.layerPoint;
//create first marker and add popup
markerA = L.marker(_firstLatLng).addTo(map).bindPopup('Point A<br/>' + e.latlng + '<br/>' + e.layerPoint).openPopup();
} else if(!_secondLatLng) {
//get second point latitude and longitude
_secondLatLng = e.latlng;
//get second point layerpoint
_secondPoint = e.layerPoint;
//create second marker and add popup
markerB = L.marker(_secondLatLng).addTo(map).bindPopup('Point B<br/>' + e.latlng + '<br/>' + e.layerPoint).openPopup();
//draw a line between two points
_polyline = L.polyline([_firstLatLng, _secondLatLng], {
color: 'red'
});
//add the line to the map
_polyline.addTo(map);
//get the distance between two points
let _length = map.distance(_firstLatLng, _secondLatLng);
//display the result
document.getElementById('length').innerHTML = _length;
} else{
//if already we have two points first we remove the polyline object
if(_polyline){
map.removeLayer(_polyline);
_polyline= null;
}
//get new point latitude and longitude
_firstLatLng = e.latlng;
//get new point layerpoint
_firstPoint = e.layerPoint;
//remove previous markers and values for second point
map.removeLayer(markerA);
map.removeLayer(markerB);
_secondLatLng =null;
_secondPoint = null;
//create new marker and add it to map
markerA = L.marker(_firstLatLng).addTo(map).bindPopup('Point A<br/>' + e.latlng + '<br/>' + e.layerPoint).openPopup();
}
});
The complete script and demo is available on the Codepen:
I hope this article was helpful for you. This tutorial is just the beginning. You can get a lot more out of it by digging into the leaflet document.
Send me a comment if you need help or have feedback.
Here’s an article you might find interesting:
