JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<!DOCTYPE html> 
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script>
        jQuery(window).ready(function(){
            jQuery("#btnInit").click(initiate_watchlocation);
            jQuery("#btnStop").click(stop_watchlocation);
        });

        var watchProcess = null;
      
        function initiate_watchlocation() {
            if (watchProcess == null) {
                watchProcess = navigator.geolocation.watchPosition(handle_geolocation_query, handle_errors);
            }
        }

        function stop_watchlocation() {
            if (watchProcess != null)
            {
                navigator.geolocation.clearWatch(watchProcess);
                watchProcess = null;
            }
        }
      
        function handle_errors(error)
        {
            switch(error.code)
            {
                case error.PERMISSION_DENIED: alert("user did not share Geolocation data");
                break;

                case error.POSITION_UNAVAILABLE: alert("could not detect current position");
                break;

                case error.TIMEOUT: alert("retrieving position timedout");
                break;

                default: alert("unknown error");
                break;    
            }
        }
      
        function handle_geolocation_query(position) {
            var text = "Latitude: "  + position.coords.latitude  + "<br/>" +
                        "Longitude: " + position.coords.longitude + "<br/>" +
                        "Accuracy: "  + position.coords.accuracy  + "m<br/>" +
                        "Time: " + new Date(position.timestamp);
            jQuery("#info").html(text);

            var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + position.coords.latitude + ',' + position.coords.longitude + 
                            "&zoom=14&size=300x400&markers=color:blue|label:S|" + position.coords.latitude + ',' +...

CSS

.even{background:#BACFDB; }
th{background:#5E8CA5; padding:3px; font-weight:600; color:#fff;}
td{padding:3px;}
#Output{font-weight:500;}

JavaScript

navigator.geolocation.getCurrentPosition(
gotPosition,
//errorGettingPosition,
{
    'enableHighAccuracy': true,
    'timeout': 1000,
    'maximumAge': 0
});

function gotPosition(pos) {
    var outputStr = 
        "latitude:<input value='" + pos.coords.latitude + "'/><br>" + 
        "longitude:<input value='" + pos.coords.longitude + "'/><br>" + 
        "accuracy:" + pos.coords.accuracy + "<br>" + 
        "altitude:" + pos.coords.altitude + "<br>" + 
        "altitudeAccuracy:" + pos.coords.altitudeAccuracy + "<br>" + 
        "heading:" + pos.coords.heading + "<br>" + 
        "speed:" + pos.coords.speed + "";

        document.getElementById("Output").innerHTML = outputStr;
}

function errorGettingPosition(err) {
    if (err.code == 1) {
        alert("User denied geolocation.");
    }
    else if (err.code == 2) {
        alert("Position unavailable.");
    }
    else if (err.code == 3) {
        alert("Timeout expired.");
    }
    else {
        alert("ERROR:" + err.message);
    }
}


$(document).ready(function(){
    
   $('.numcol').remove();
   $('.distcol').remove();
   $('td').width('175');
    $('tr:even').addClass('even');
    
});