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
<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>--> |
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'); | |
} |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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; } | |
} |
<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" /> |