Skip to content

Instantly share code, notes, and snippets.

@ix4

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

Created July 10, 2021 03:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ix4/a9f416bf1b576bbd575f1c5e82a701cf to your computer and use it in GitHub Desktop.
Save ix4/a9f416bf1b576bbd575f1c5e82a701cf to your computer and use it in GitHub Desktop.
Download ZIP
Grab The GPS Location In Browser JS
Raw
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>-->
Raw
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');
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
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; }
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment