Grab The GPS Location In Browser JS

grab-the-gps-location-in-browser-js.markdown

Grab The GPS Location In Browser JS

Put location on...

References: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

https://developers.google.com/web/fundamentals/device-access/user-location/obtain-location?hl=en

A Pen by Peter on CodePen.

License.

index.html

<div class="overlay"></div>
<div class="loader">
  <svg class="circular" viewBox="25 25 50 50">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
  </svg>
</div>
<section>
  <span>Latitide :</span>
  <span id="startLat"></span>

  <span>Longitude :</span>
  <span id="startLon"></span>

  <span>Altitude :</span>
  <span id="altitude"></span>

  <span>Date :</span>
  <span id="dateCode"></span>

  <span>Time :</span>
  <span id="timeCode"></span>

  <span>Accuracy :</span>
  <span id="accuracy"></span>

  <span>Error :</span>
  <span id="errMsg">None</span>
</section>

<!--<section>
<div>
Most GPS enabled devices report altitude, but did not work Android Samsung S3, on iPhone works well.
<p>As I check my settings there are three: 
<ol>
<li> High Accuracy: Uses GPS, Wifi, and mobile networks to estimate your location. 
<li> Power Saving: Uses Wifi and mobile networks to estimate your location.
<li> GPS Only: Users GPS to estimate your location.
</ol>
<p>Reading <a href="http://www.htmlgoodies.com/html5/Web-Developer-Class-HTML5-Geolocation-3917596.htm#fbid=gr4qaceB9Js">more from this article:</a>

<blockquote>"Most GPS enabled devices are capable of reporting altitude but non-GPS methods such as cell triangulation can not report altitude... If the device does not support altitude information, the altitudeAccuracy property on the position object will be null."</blockquote>
</div>
</section>-->

script.js

var options = {
  // enableHighAccuracy can slower response times or increase power consumption 
  enableHighAccuracy: true,
  // Maximum length of time (in milliseconds) the device is allowed to return a position
  timeout: 5000,
  // Maximum age in milliseconds of a possible cached position that is acceptable
  maximumAge: 1000 * 5 * 3
};

function startGeoLookup() {  
  navigator.geolocation.getCurrentPosition(success, error, options);  
   $('.overlay, .loader').fadeIn('fast');
} 
startGeoLookup();

function success(pos) {
  $('.overlay, .loader').fadeOut('fast');
  var crd = pos.coords;
  var tme = pos.timestamp;
  var d = new Date(tme);
  var t = new Date(tme);

  // alert("Altitude: " + crd.altitude + " \nAltitudeAccuracy: " + crd.altitudeAccuracy);
  var roundAcc = Math.floor(crd.accuracy);
  document.getElementById('startLat').innerHTML = crd.latitude;
  document.getElementById('startLon').innerHTML = crd.longitude;
  if(!crd.altitude) {
    document.getElementById('altitude').innerHTML = "Not available on this device."
  }
  else {
    let altitudeInFeet = Math.ceil(crd.altitude * 3.28);
    document.getElementById('altitude').innerHTML = (altitudeInFeet + "'");
  }

  document.getElementById('accuracy').innerHTML = roundAcc + " Meters";
  document.getElementById('dateCode').innerHTML = d.toLocaleString().slice(0, 10);
  document.getElementById('timeCode').innerHTML = t.toLocaleString().slice(10, 25);
}

/* Error Codes: 1 PERMISSION_DENIED, 2 POSITION_UNAVAILABLE, 3 TIMEOUT */
function error(err) {
  var geoerror = (err.code == (1, 2, 3) ? "Error loading" : err.message);
  document.getElementById('errMsg').innerHTML = geoerror;
  $('.overlay, .loader').fadeOut('fast');
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body {
  background-color: #222;
  color: #ccc;
  font-family: "Comfortaa";
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  font-size: 0;
  float: left;
  margin-bottom: 1rem;
  a {color: #aaa;}
  em {
    font-style: normal;
    color: #ff69b4;
  }
  span {
    padding: .3rem;
    font-size: 22px;
    width: 50%;
    display: inline-block;
    vertical-align: top;
    &:nth-child(odd) {
      text-align: right;
      color: #aaa;
    }
  }
  div {
    background-color: transparent;
    font-size: 6.5vh;
    color: #aaa;
  }
}

/* Loader styles */
.overlay {
  position: fixed;
  display: none;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .7;
  z-index: 5;
}
.loader {
  display: none;
  position: fixed;
  margin: 4rem auto;
  width: 100px;
  left: calc(50% - 50px);
  z-index: 10;
}
.loader:before {
  content: '';
  display: block;
  padding-top: 100%;
}
.circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@-webkit-keyframes color {
  100%, 0% {  stroke: #fff; }
  40% { stroke: yellow; }
  66% { stroke: #fff; }
  80%, 90% {  stroke: yellow; }
}
@keyframes color {
  100%, 0% {  stroke: #fff;  }
  40% {   stroke: yellow; }
  66% {  stroke: #fff; }
  80%, 90% { stroke: yellow; }
}

styles

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" />