let canvas;

const mappa = new Mappa("Leaflet");

let latitude = 0;

let longitude = 0;

​

// Lets put all our map options in a single object

// lat and lng are the starting point for the map.

const options = {

  lat: 55.65,

  lng: 12.14,

  zoom: 4,

  style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",

};

​

function setup() {

  canvas = createCanvas(windowWidth, windowHeight);

  // background(100); let's uncomment this, we don't need it for now

​

  // Create a tile map with the options declared

  myMap = mappa.tileMap(options);

  myMap.overlay(canvas);

}

​

function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {

  var R = 6371; // Radius of the earth in km

  var dLat = deg2rad(lat2 - lat1); // deg2rad below

  var dLon = deg2rad(lon2 - lon1);

  var a =

    Math.sin(dLat / 2) * Math.sin(dLat / 2) +

    Math.cos(deg2rad(lat1)) *

      Math.cos(deg2rad(lat2)) *

      Math.sin(dLon / 2) *

      Math.sin(dLon / 2);

  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

  var d = R * c; // Distance in km

  return d;

}

​

function deg2rad(deg) {

  return deg * (Math.PI / 180);

}

​

function draw() {

  // Clear the previous canvas on every frame

  clear();

​

  var lewisburg = myMap.latLngToPixel(latitude, longitude);

​

  fill("red");

  // Using that position, draw an ellipse

  ellipse(lewisburg.x, lewisburg.y, 20, 20);

​

  var distance = getDistanceFromLatLonInKm(

    latitude,

    longitude,

    55.375,

    10.396268

  );

​

  getLocation();

  fill(255);

  textSize(20);

  text("Lat: " + latitude, 70, 150);

  text("Long: " + longitude, 70, 200);

  text("distance to odense bird: " + Math.round(distance), 70, 250);

}

​

​

​

// What to do if it works.

function success(position) {

   latitude = position.coords.latitude;

   longitude = position.coords.longitude;

​

}

​

// What to do if it doesn't work.

function error() {

  console.log('Unable  t to retrieve your location');

}

​

​

function getLocation()

{

​

// Check to see if GPS tracking is supported.

if (!navigator.geolocation) {

  console.log('Geolocation is not supported by your browser');

// If it is, get the current position as latitude, longitude

} else {

  navigator.geolocation.getCurrentPosition(success, error);

}

}