Get Distance From

by sperske

HTML

<link rel="stylesheet" href="https://sndtst.com/static/css/sndtst.min.css">
<main role="main">
  <div class="container">
    <ul id="locations"></ul>
    <button type="button" id="AddLocation" class="btn btn-xs btn-info">+</button>
  </div>
</main>

JavaScript

import LatLon from 'https://cdn.jsdelivr.net/npm/geodesy@2/latlon-ellipsoidal-vincenty.js';

const addLocation = $("#AddLocation");
const list = document.getElementById("locations");

function loadData() {
  let data = window.localStorage.getItem('locations');
  if (data) {
    let information = JSON.parse(data);
    let points = [];
    information.forEach((record) => {
      points.push({
        label: record.label,
        lat: record.lat,
        lon: record.lon,
        point: LatLon.parse(record.lat, record.lon)
      });
    });
    return points;
  } else {
    return [];
  }
}

function saveData(points) {
  let data = [];
  points.forEach((point) => {
    data.push({
      label: point.label,
      lat: point.lat,
      lon: point.lon
    });
  });
  window.localStorage.setItem('locations', JSON.stringify(data));
}

function createRow(location, distanceTo) {
  let row = document.createElement('li');
  let distance = document.createElement('span');
  distance.innerText = distanceTo.toFixed(2) + ' m';
  row.innerText = location.label + " ";
  row.appendChild(distance);
  return row;
}

function drawList(points, from) {
  list.innerHTML = '';
  points.forEach((location, index) => {
    const dist = parseFloat(from.distanceTo(location.point));
    list.appendChild(createRow(location, dist));
  });
}
let points = loadData();
navigator.geolocation.watchPosition(
  (position) => {
    const from = LatLon.parse(position.coords.latitude, position.coords.longitude);
    drawList(points, from);
  }, () => {
    alert('Position could not be determined.');
  }, {
    enableHighAccuracy: true
  }
);
addLocation.on('click', () => {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const from = LatLon.parse(position.coords.latitude, position.coords.longitude)
      const label = prompt("What do you call this place?");
      points.push({
        label: label,
        lat: position.coords.latitude,
        lon: position.coords.longitude,
       ...