<!doctype html> <html lang="en"> <head> <title>Using the scripts in web pages</title> <meta charset="utf-8"> <script type="module"> import LatLon from 'https://cdn.jsdelivr.net/npm/geodesy@2/latlon-spherical.min.js'; document.addEventListener('DOMContentLoaded', function() { document.querySelector('#calc-dist').onclick = function() { calculateDistance(); } }); function calculateDistance() { const p1 = LatLon.parse(document.querySelector('#point1').value); const p2 = LatLon.parse(document.querySelector('#point2').value); const dist = parseFloat(p1.distanceTo(p2).toPrecision(4)); document.querySelector('#result-distance').textContent = dist + ' metres'; } </script> </head> <body> <form> Point 1: <input type="text" name="point1" id="point1" placeholder="lat1,lon1"> Point 2: <input type="text" name="point2" id="point2" placeholder="lat2,lon2"> <button type="button" id="calc-dist">Calculate distance</button> <output id="result-distance"></output> </form> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter