Add terrain icon next to weather (closes #4), update and cleanup code to handle it.

Replaced old terrain graphics with new b/w icons.

www/css/main.css

@@ -175,6 +175,11 @@ body {
     float: right;
 }
 
+#terrainicon {
+    margin-top: -15px;
+    height: 20px;
+}
+
 #energybar-container {
     position: absolute;
     top: 30px;

www/js/location.js

@@ -18,16 +18,15 @@
 
 
 //////////////////////////////////////////////
-//  GPS and terrain stuff
+//  GPS and map stuff
 //////////////////////////////////////////////
 
 /**
- * Handles GPS and terrain data.
+ * Handles GPS and map data.
  */
 
 // Globals
 var lockGot = false;
-var terrainGot = false;
 var latitude = 0.0000;
 var longitude = 0.0000;
 var gpsaccuracy = 9999;
@@ -36,7 +35,6 @@ var requiredaccuracy = 40;
 
 var fetchplacecounter = 0;
 var lastgpstime = 0;
-var terraintypeid = 0;
 var map = L.map('map');
 var tileurl = "http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg";
 map.setZoom(17);
@@ -176,8 +174,9 @@ function openPlace(feature) {
  * Hide the loading overlay if everything is loaded, otherwise do nothing
  */
 function hideLoading() {
-    if (lockGot && terrainGot && gpsaccuracy < requiredaccuracy && $('#loading').css('display') !== 'none') {
+    if (lockGot && gpsaccuracy < requiredaccuracy && $('#loading').css('display') !== 'none') {
         getWeather();
+        getTerrain();
         $('#loading').fadeOut('slow', function () {
             $('#loading').css('display', 'none');
             updateStatusBarColor();
@@ -197,25 +196,6 @@ var updatePosition = function (position) {
     }
     mapPos(latitude, longitude);
 };
-var updateTerrain = function (position) {
-    latitude = position.coords.latitude;
-    longitude = position.coords.longitude;
-    lastgpstime = position.timestamp;
-    gpsaccuracy = position.coords.accuracy;
-    var rasterurl = "http://earth.apis.netsyms.net/terrain.php?format=json&lat="
-            + latitude + "&long=" + longitude;
-    $.get(rasterurl, function (data) {
-        if (data.status === 'OK') {
-            terraintypeid = data.typeid;
-            terraintypename = data.typename;
-            $('#terrain-image').attr('src', 'assets/terrain/' + terraintypeid + '.png');
-            terrainGot = true;
-            hideLoading();
-        }
-    }, "json").fail(function (err) {
-        $('#terrain-image').attr('src', 'assets/terrain/0.png');
-    });
-};
 function pingServer() {
     if (lockGot && gpsaccuracy < requiredaccuracy) {
         $.get(mkApiUrl('ping') + "?user=" + username + "&lat=" + latitude + "&long=" + longitude);
@@ -231,22 +211,21 @@ function popDiagData() {
             "\nLongitude: " + longitude +
             "\nAccuracy: " + gpsaccuracy +
             "\nWeather: " + rawWeatherData.temperature + " F, " + rawWeatherData.summary + ", " + rawWeatherData.windSpeed + " mph" +
-            "\nTerrain: " + terraintypename + " (" + terraintypeid + ")",
+            "\nTerrain: " + terrainName + " (" + terrainType + ")",
             null,
-            "Information",
+            "World Info",
             "Close");
 }
 // Initial GPS position and stuff
-navigator.geolocation.getCurrentPosition(updateTerrain, onError, {timeout: 10000, enableHighAccuracy: true});
+navigator.geolocation.getCurrentPosition(updatePosition, onError, {timeout: 10000, enableHighAccuracy: true});
 // Update position
 setInterval(function () {
     navigator.geolocation.getCurrentPosition(updatePosition, onError, {timeout: 10000, enableHighAccuracy: true});
 }, 1000);
-// Update position + terrain
+// Update places
 setInterval(function () {
-    navigator.geolocation.getCurrentPosition(updateTerrain, onError, {timeout: 10000, enableHighAccuracy: true});
     loadPlaces(latitude, longitude);
-}, 1000 * 20);
+}, 1000 * 15);
 // Ping the server with coordinates
 setInterval(pingServer, 5000);
 // Show error if it's taking too long

www/js/user.js

@@ -21,6 +21,8 @@
 //////////////////////////////////////////////
 
 var rawWeatherData = [];
+var terrainType = -1;
+var terrainName = "Other";
 
 /*
  * Handles general server communication.
@@ -82,6 +84,24 @@ function getWeather() {
         var currently = data.currently;
         rawWeatherData = currently;
         skycons.set("weathericon", currently.icon);
+        skycons.play();
+    });
+}
+
+function getTerrain() {
+    $.getJSON(mkApiUrl('getterrain'), {
+        lat: latitude,
+        long: longitude
+    }, function (data) {
+        var terrainid = -1;
+        var terrainstr = "Other";
+        if (data.status === "OK") {
+            terrainid = data.type;
+            terrainstr = data.name;
+        }
+        $('#terrainicon').attr('src', 'assets/terrain/' + terrainid + '.png');
+        terrainType = terrainid;
+        terrainName = terrainstr;
     });
 }
 
@@ -104,6 +124,7 @@ setInterval(function () {
 }, 3000);
 setInterval(function () {
     getWeather();
+    getTerrain();
 }, 30 * 1000);
 // Send chat messages
 $("#chatsendform").submit(function (event) {

www/screens/home.html

@@ -43,7 +43,10 @@
 <div id="overlay-top">
     <p id="topbar">
         <span id="namedisp" onclick="openMenu('profile')"></span>
-        <span id="worldinfo" onclick="popDiagData()"><canvas id="weathericon" width="22" height="22"></canvas></span>
+        <span id="worldinfo" onclick="popDiagData()">
+            <canvas id="weathericon" width="22" height="22"></canvas> 
+            <img id="terrainicon" src="assets/terrain/-1.png" />
+        </span>
     </p>
     <div class="progress" id="energybar-container">
         <div id="energybar" class="progress-bar" role="progressbar" >