JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div id="geo" class="geo"></div>

CSS

.geo {
  color: green;
}
body[data-hide-geo] .geo {
  color: red;
}

JavaScript

var a = 500;  /* max 500 meters */
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, showError, {
    enableHighAccuracy: true
  });
} else {
  document.getElementById("geo").innerHTML = "Geolocation is not supported by this browser.";
  hideGeo();
}
function showPosition(position) {
  document.getElementById("geo").innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude +
    "<br>Accuracy: " + position.coords.accuracy +
    "<br>Speed: " + position.coords.speed + " m/s" +
    "<br>Altitude: " + position.coords.altitude +
    "<br>Heading: " + position.coords.heading;
  hideGeo(position.coords.accuracy);
}
function showError(error) {
  document.getElementById("geo").innerHTML = "Error: " + error.code;
  hideGeo();
}
function hideGeo(accuracy) {
  if (!accuracy || accuracy > a) {
    document.body.setAttribute('data-hide-geo','');
  }
}