JSFiddle - React, Tailwind, and code Playground

by Mr Anchovy

HTML

<h3>Geolocation demo</h3>
<div id="currentLocation"></div>
<div id="watchedLocation"></div>
<div id="error"></div>

JavaScript

// geolocation demo

function getLocation() {

    var current = document.getElementById("currentLocation");
    var watched = document.getElementById("watchedLocation");
    var errorTarget = document.getElementById("error");

    function showPosition(position, target) {
        target.innerHTML = "Latitude: " + position.coords.latitude +
        "<br>Longitude: " + position.coords.longitude +
        "<br>Updated: " + (new Date).toUTCString();
    }

    function showError(error) {
        switch(error.code) {
            case error.PERMISSION_DENIED:
                errorTarget.innerHTML = "User denied the request for Geolocation."
                break;
            case error.POSITION_UNAVAILABLE:
                errorTarget.innerHTML = "Location information is unavailable."
                break;
            case error.TIMEOUT:
                errorTarget.innerHTML = "The request to get user location timed out."
                break;
            case error.UNKNOWN_ERROR:
                errorTarget.innerHTML = "An unknown error occurred."
                break;
        }
    }

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
        navigator.geolocation.watchPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

getLocation();