diff --git a/index.html b/index.html
index e210183..cd4a626 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
Compass
-
-
+
+
@@ -42,10 +42,13 @@
@@ -53,17 +56,19 @@
No direction available. Try this on a smartphone with an internal compass.
+ Note: the compass may be 90° off when used in landscape mode.
+
diff --git a/script.js b/script.js
index 015a38a..a842fbc 100644
--- a/script.js
+++ b/script.js
@@ -1,12 +1,19 @@
window.addEventListener("deviceorientation", setRose, true);
+const metric = !(window.navigator.language=='en-US'||window.navigator.language=='my');
+var elevator;
+function gmapsCB(){
+ elevator = new google.maps.ElevationService;
+}
+
if (!navigator.geolocation){ $('#no-gps').show(); }
else {
navigator.geolocation.watchPosition(
// success
function(pos) {
- var lat = pos.coords.latitude.toFixed(5);
- var lon = pos.coords.longitude.toFixed(5);
+ setAltitude(pos.coords.latitude, pos.coords.longitude);
+ var lat = pos.coords.latitude.toFixed(4);
+ var lon = pos.coords.longitude.toFixed(4);
lat = (lat.substring(0,1)=='-')? lat.substring(1)+' S' : lat+' N';
lon = (lon.substring(0,1)=='-')? lon.substring(1)+' E' : lon+' W';
$('#lat').text(lat);
@@ -15,6 +22,7 @@ else {
// error
function() {
$('.coord').hide();
+ $('#rotated').hide();
$('#no-gps').show();
},
// options
@@ -22,21 +30,44 @@ else {
);
}
+function setAltitude(lat,lon) {
+ if (typeof elevator != 'undefined') {
+ elevator.getElevationForLocations({
+ 'locations': [ new google.maps.LatLng(lat,lon) ]
+ }, function(res) {
+ console.log(res);
+ if (res[0].elevation){
+ $('#no-alt').hide();
+ var alt = res[0].elevation;
+ // Convert
+ if (metric) {
+ alt = alt.toFixed(1)+' m';
+ } else {
+ alt = (alt*0.3048).toFixed(1)+' ft';
+ }
+ // Set element text
+ $('#alt').text(alt);
+ } else {
+ // Show error
+ if (res.status && res.status!='OK') {
+ $('#no-alt').text('No altitude data available: '+res.status+'. ');
+ }
+ $('#no-alt').show();
+ }
+ });
+ }
+}
+
function setRose(e) {
-
- // No orientation data
- if(!e.absolute) {
+ if(!e.absolute) { // No orientation data
+ $('#rotated').hide();
$('#no-dir').show();
} else {
-
- // Rotate rose
var rot = 'rotate('+e.alpha.toString().substring(0,5)+'deg)';
$('#rose').css({
'-ms-transform': rot,
'-webkit-transform': rot,
'transform': rot
});
-
}
-
}
diff --git a/style.css b/style.css
index 91d6983..3f69099 100644
--- a/style.css
+++ b/style.css
@@ -6,7 +6,12 @@ body {
color: #EEE;
}
+header, main, footer, .error, noscript {
+ position: absolute;
+}
+
.error, noscript {
+ z-index: 10;
color: #F22;
font-size: 22px;
text-align: center;
@@ -18,7 +23,7 @@ body {
}
.coord {
- height: 50%;
+ height: 33%;
text-align: center;
font-size: 44px;
font-family: monospace;
@@ -31,23 +36,26 @@ body {
}
@media (orientation:portrait) {
- header, main, footer, .error, noscript {
- position: absolute;
- } header, main, footer {
+ .error#rotated { display: none; }
+ header, main, footer {
width: 90vw;
padding: 5vw;
} .error, noscript {
width: 82vw;
}
header {
- height: calc(60vh - 60vw);
+ height: calc(65vh - 60vw);
top: 0;
} main {
height: 90vw;
- top: calc(60vh - 50vw);
+ top: calc(65vh - 50vw);
} footer {
- height: calc(40vh - 60vw);
+ height: calc(35vh - 60vw);
bottom: 0;
+ } #about {
+ float: left;
+ } #by {
+ float: right;
}
main .error {
top: 50%;
@@ -56,10 +64,37 @@ body {
}
}
@media (orientation:landscape) {
-
+ .error#rotated { display: block; }
+ header, main, footer {
+ height: 90vh;
+ padding: 5vh;
+ } .error, noscript {
+ width: 82vh;/**/
+ }
+ header {
+ width: calc(65vw - 60vh);
+ left: 0;
+ } main {
+ width: 90vh;
+ left: calc(65vw - 50vh);
+ } footer {
+ text-align: right;
+ width: calc(35vw - 60vh);
+ right: 0;
+ } #by {
+ position: absolute;
+ bottom: 5vh;
+ right: 5vh;
+ }
+ main .error {
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 35vh 4vh;
+ }
}
-#error { display: none; }
+
+error { display: none; }
a {
color: inherit;