call painting tiles before issuing the command to cache them

[lantea.git] / js / map.js

diff --git a/js/map.js b/js/map.js
index a8105ae48f0bbb0845162a32ec85bc97e2b655dd..14b692187b95388931c5674d24fa28a4a84d061f 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -35,7 +35,7 @@ var gMapStyles = {
      copyright: 'Map data &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors (<a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>), tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a>.'},
   mapquest_aerial:
     {name: "MapQuest Open Aerial",
      copyright: 'Map data &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors (<a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>), tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a>.'},
   mapquest_aerial:
     {name: "MapQuest Open Aerial",

-     url: "http://oatile[1-4].mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg",
+     url: "http://otile[1-4].mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg",

      copyright: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a>, portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency.'},
   opengeoserver_arial:
     {name: "OpenGeoServer Aerial",
      copyright: 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a>, portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency.'},
   opengeoserver_arial:
     {name: "OpenGeoServer Aerial",


@@ -297,13 +297,16 @@ function drawMap(aPixels, aOverdraw) {
   for (var x = Math.floor(xMin / size); x < Math.ceil(xMax / size); x++) {
     for (var y = Math.floor(yMin / size); y < Math.ceil(yMax / size); y++) { // slow script warnings on the tablet appear here!
       // Only go to the drawing step if we need to draw this tile.
   for (var x = Math.floor(xMin / size); x < Math.ceil(xMax / size); x++) {
     for (var y = Math.floor(yMin / size); y < Math.ceil(yMax / size); y++) { // slow script warnings on the tablet appear here!
       // Only go to the drawing step if we need to draw this tile.

-      if (x < tiles.left || x > tiles.right || y < tiles.top || y > tiles.bottom) {
+      if (x < tiles.left || x > tiles.right ||
+          y < tiles.top || y > tiles.bottom) {

         // Round here is **CRUCIAL** otherwise the images are filtered
         // and the performance sucks (more than expected).
         var xoff = Math.round((x * size - xMin) / gZoomFactor);
         var yoff = Math.round((y * size - yMin) / gZoomFactor);
         // Draw placeholder tile unless we overdraw.
         // Round here is **CRUCIAL** otherwise the images are filtered
         // and the performance sucks (more than expected).
         var xoff = Math.round((x * size - xMin) / gZoomFactor);
         var yoff = Math.round((y * size - yMin) / gZoomFactor);
         // Draw placeholder tile unless we overdraw.

-        if (!aOverdraw)
+        if (!aOverdraw &&
+            (x < tiles.left -1  || x > tiles.right + 1 ||
+             y < tiles.top -1 || y > tiles.bottom + 1))

           gMapContext.drawImage(gLoadingTile, xoff, yoff);
 
         // Initiate loading/drawing of the actual tile.
           gMapContext.drawImage(gLoadingTile, xoff, yoff);
 
         // Initiate loading/drawing of the actual tile.


@@ -575,8 +578,14 @@ function setTracking(aCheckbox) {
 
 function startTracking() {
   if (gGeolocation) {
 
 function startTracking() {
   if (gGeolocation) {

+    gActionLabel.textContent = "Establishing Position";
+    gAction.style.display = "block";

     gGeoWatchID = gGeolocation.watchPosition(
       function(position) {
     gGeoWatchID = gGeolocation.watchPosition(
       function(position) {

+        if (gActionLabel.textContent) {
+          gActionLabel.textContent = "";
+          gAction.style.display = "none";
+        }

         // Coords spec: https://developer.mozilla.org/en/XPCOM_Interface_Reference/NsIDOMGeoPositionCoords
         var tPoint = {time: position.timestamp,
                       coords: {latitude: position.coords.latitude,
         // Coords spec: https://developer.mozilla.org/en/XPCOM_Interface_Reference/NsIDOMGeoPositionCoords
         var tPoint = {time: position.timestamp,
                       coords: {latitude: position.coords.latitude,


@@ -622,6 +631,10 @@ function startTracking() {
 }
 
 function endTracking() {
 }
 
 function endTracking() {

+  if (gActionLabel.textContent) {
+    gActionLabel.textContent = "";
+    gAction.style.display = "none";
+  }

   if (gGeoWatchID) {
     gGeolocation.clearWatch(gGeoWatchID);
   }
   if (gGeoWatchID) {
     gGeolocation.clearWatch(gGeoWatchID);
   }


@@ -636,36 +649,40 @@ function clearTrack() {
 var gTileService = {
   objStore: "tilecache",
 
 var gTileService = {
   objStore: "tilecache",
 

+  ageLimit: 14 * 86400, // 2 weeks
+

   get: function(aStyle, aCoords, aCallback) {
     var norm = normalizeCoords(aCoords);
     var dbkey = aStyle + "::" + norm.x + "," + norm.y + "," + norm.z;
     this.getDBCache(dbkey, function(aResult, aEvent) {
       if (aResult) {
         // We did get a cached object.
   get: function(aStyle, aCoords, aCallback) {
     var norm = normalizeCoords(aCoords);
     var dbkey = aStyle + "::" + norm.x + "," + norm.y + "," + norm.z;
     this.getDBCache(dbkey, function(aResult, aEvent) {
       if (aResult) {
         // We did get a cached object.

-        // TODO: Look at the timestamp and trigger a reload when it's too old.

         aCallback(aResult.image, aStyle, aCoords);
         aCallback(aResult.image, aStyle, aCoords);

+        // Look at the timestamp and return if it's not too old.
+        if (aResult.timestamp + this.ageLimit > Date.now())
+          return;
+        // Reload cached tile otherwise.
+        console.log("reload cached tile: " + dbkey);

       }
       }

-      else {
-        // Retrieve image from the web and store it in the cache.
-        var XHR = new XMLHttpRequest();
-        XHR.open("GET",
-                 gMapStyles[aStyle].url
-                   .replace("{x}", norm.x)
-                   .replace("{y}", norm.y)
-                   .replace("{z}", norm.z)
-                   .replace("[a-c]", String.fromCharCode(97 + Math.floor(Math.random() * 2)))
-                   .replace("[1-4]", 1 + Math.floor(Math.random() * 3)),
-                 true);
-        XHR.responseType = "blob";
-        XHR.addEventListener("load", function () {
-          if (XHR.status === 200) {
-            var blob = XHR.response;
-            gTileService.setDBCache(dbkey, {image: blob, timestamp: Date.now()});
-            aCallback(blob, aStyle, aCoords);
-          }
-        }, false);
-        XHR.send();
-      }
+      // Retrieve image from the web and store it in the cache.
+      var XHR = new XMLHttpRequest();
+      XHR.open("GET",
+                gMapStyles[aStyle].url
+                  .replace("{x}", norm.x)
+                  .replace("{y}", norm.y)
+                  .replace("{z}", norm.z)
+                  .replace("[a-c]", String.fromCharCode(97 + Math.floor(Math.random() * 2)))
+                  .replace("[1-4]", 1 + Math.floor(Math.random() * 3)),
+                true);
+      XHR.responseType = "blob";
+      XHR.addEventListener("load", function () {
+        if (XHR.status === 200) {
+          var blob = XHR.response;
+          aCallback(blob, aStyle, aCoords);
+          gTileService.setDBCache(dbkey, {image: blob, timestamp: Date.now()});
+        }
+      }, false);
+      XHR.send();

     });
   },
 
     });
   },
 


@@ -718,5 +735,23 @@ var gTileService = {
       if (aCallback)
         aCallback(success, event);
     }
       if (aCallback)
         aCallback(success, event);
     }

+  },
+
+  clearDB: function(aCallback) {
+    if (!mainDB)
+      return;
+    var success = false;
+    var transaction = mainDB.transaction([this.objStore], "readwrite");
+    var request = transaction.objectStore(this.objStore).clear();
+    request.onsuccess = function(event) {
+      success = true;
+      if (aCallback)
+        aCallback(success, event);
+    };
+    request.onerror = function(event) {
+      // Errors can be handled here.
+      if (aCallback)
+        aCallback(success, event);
+    }

   }
 };
   }
 };