Here’s an example of a basic distance calculator in HTML that calculates the distance between two points (point A and point B) based on their latitude and longitude coordinates:
<!DOCTYPE html> <html> <head> <title>Distance Calculator</title> <script src="https://cdn.jsdelivr.net/npm/geolib@3.0.0/dist/geolib.min.js"></script> </head> <body> <h1>Distance Calculator</h1> <form> Point A Latitude: <input type="number" id="lat1"><br><br> Point A Longitude: <input type="number" id="long1"><br><br> Point B Latitude: <input type="number" id="lat2"><br><br> Point B Longitude: <input type="number" id="long2"><br><br> <button onclick="calculateDistance()">Calculate Distance</button> </form> <p>Distance: <span id="distance"></span> meters</p> <script> function calculateDistance() { var pointA = {latitude: document.getElementById("lat1").value, longitude: document.getElementById("long1").value}; var pointB = {latitude: document.getElementById("lat2").value, longitude: document.getElementById("long2").value}; var distance = geolib.getDistance(pointA, pointB); document.getElementById("distance").innerHTML = distance; } </script> </body> </html>
This will create a simple webpage with a form that prompts the user to enter the latitude and longitude coordinates for two points (point A and point B). The form includes a button labeled “Calculate Distance” that, when clicked, runs a JavaScript function to use the geolib.getDistance(pointA, pointB)
function from the geolib library to calculate the distance between the two points in meters. And it will show the distance result in the web page.
In this example I have used the geolib library which is easy to use and powerful library for geographical calculations. You can add additional error message in case user didn’t put any value on latitudes or longitudes and or you can validate the inputs before calculating the distance. It’s a basic example but it can be improved to suit your needs and make it more user-friendly.