JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="arrow"></div>
<pre id="text"></pre>

CSS

#arrow {
  margin: 20px;
  
  height: 0;
  width: 0;
  border: 20px solid transparent;
  border-top-width: 0;
  border-bottom-color: blue;
}

JavaScript

try { 
/** Extend Number object with method to convert numeric degrees to radians */
if (Number.prototype.toRadians === undefined) {
    Number.prototype.toRadians = function() { return this * Math.PI / 180; };
}

/** Extend Number object with method to convert radians to numeric (signed) degrees */
if (Number.prototype.toDegrees === undefined) {
    Number.prototype.toDegrees = function() { return this * 180 / Math.PI; };
}

var geo = navigator.geolocation;
var watch = geo.watchPosition(locationSuccess, null, {
	enableHighAccuracy: true,
  maximumAge: 0
});
var globalPosition = {
	coords: {
    accuracy: 9999999,
    altitude: null,
    altitudeAccuracy: null,
    heading: null,
    latitude: 0,
    longitude: 0,
    speed: null
  }
};
var globalOrientation = 0;
var globalDistance = 0;
var globalBearing = 0;
        
function positionToJSON(position) {
	return {
  	coords: {
    	accuracy: position.coords.accuracy,
      altitude: position.coords.altitude,
      altitudeAccuracy: position.coords.altitudeAccuracy,
      heading: position.coords.heading,
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      speed: position.coords.speed,
    },
    timestamp:  position.timestamp
  };
}

function updateOutput(position,orientation, distance, bearing) {
	var node = document.getElementById('text');
  var output = {
  	position: positionToJSON(position),
    orientation: orientation,
    distance: `${distance} meters`,
    bearing: `${bearing}°`
  };
	node.innerHTML = JSON.stringify(output, null, 2);
}


function updateArrow(position, orientation) {
	var arrow = document.getElementById('arrow');
  var bearing = decimalDegreesToBearing(position.coords.latitude, breakroom.latitude, position.coords.longitude, breakroom.longitude);
  
  globalBearing = bearing;
  
  arrow.style.transform = `rotate(${bearing}deg)`;
}

function decimalDegreesToDistance(lat1, lat2, lon1, lon2) {
	var R = 6371e3; // metres
  var φ1 = lat1.toRadians();
  var...