Skip to content

Instantly share code, notes, and snippets.

@easierbycode

easierbycode/index.html

Last active December 13, 2019 22:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save easierbycode/ae8c4c821a1756643e1e4ddd658aab30 to your computer and use it in GitHub Desktop.
Save easierbycode/ae8c4c821a1756643e1e4ddd658aab30 to your computer and use it in GitHub Desktop.
Download ZIP
calculate_distance_between_latlongs.html
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment