separate assembling and drawing functions and make the latter happen on requestAnimat...
[lantea.git] / js / map.js
index 482f5a4f60e76aea8145e246da2fc1f1c596fdec..e999fb85176c8ad123aaeae020efbd5e3a05121e 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-var gMapCanvas, gMapContext, gGLMapCanvas, gTrackCanvas, gTrackContext, gGeolocation;
+var gGLMapCanvas, gTrackCanvas, gTrackContext, gGeolocation;
 var gDebug = false;
 
 var gMinTrackAccuracy = 1000; // meters
@@ -63,10 +63,8 @@ var gCurPosMapCache;
 
 function initMap() {
   gGeolocation = navigator.geolocation;
-  // Set up canvas contexts. TODO: Remove 2D map once GL support works.
-  gMapCanvas = document.getElementById("map");
-  gMapContext = gMapCanvas.getContext("2d");
-  gGLMapCanvas = document.getElementById("glmap");
+  // Set up canvas context.
+  gGLMapCanvas = document.getElementById("map");
   try {
     // Try to grab the standard context. If it fails, fallback to experimental.
     // We also try to tell it we do not need a depth buffer.
@@ -140,7 +138,7 @@ function loadPrefs(aEvent) {
     gAction.addEventListener("prefs-step", loadPrefs, false);
     gWaitCounter++;
     gPrefs.get("position", function(aValue) {
-      if (aValue) {
+      if (aValue && aValue.x && aValue.y && aValue.z) {
         gMap.pos = aValue;
       }
       gWaitCounter--;
@@ -217,6 +215,9 @@ var gMap = {
     z: 5           // This could be fractional if supported being between zoom levels.
   },
 
+  get width() { return gMap.gl ? gMap.gl.drawingBufferWidth : gGLMapCanvas.width; },
+  get height() { return gMap.gl ? gMap.gl.drawingBufferHeight : gGLMapCanvas.height; },
+
   getVertShaderSource: function() {
     return 'attribute vec2 aVertexPosition;\n' +
     'attribute vec2 aTextureCoord;\n\n' +
@@ -306,25 +307,18 @@ var gMap = {
     gAction.dispatchEvent(throwEv);
   },
 
-  drawGLTest: function() {
-    if (!gMap.gl) { return; }
-
-    this.drawTileGL(5, 10, 0);
-    this.drawTileGL(300, 20, 0);
+  draw: function(aPixels, aOverdraw) {
+    gMap.assembleGL(aPixels);
+    drawTrack();
   },
 
-  drawGL: function(aPixels, aOverdraw) {
+  assembleGL: function(aPixels) {
     if (!gMap.gl) { return; }
     // aPixels is an object with left/right/top/bottom members telling how many
     //   pixels on the borders should actually be drawn.
-    // aOverdraw is a bool that tells if we should draw placeholders or draw
-    //   straight over the existing content.
-    // XXX: Both those optimizations are OFF for GL right now!
-    //if (!aPixels)
+    if (!aPixels)
       aPixels = {left: gMap.gl.drawingBufferWidth, right: gMap.gl.drawingBufferWidth,
                  top: gMap.gl.drawingBufferHeight, bottom: gMap.gl.drawingBufferHeight};
-    if (!aOverdraw)
-      aOverdraw = false;
 
     document.getElementById("zoomLevel").textContent = gMap.pos.z;
     gMap.zoomFactor = Math.pow(2, gMap.maxZoom - gMap.pos.z);
@@ -352,62 +346,92 @@ var gMap = {
     // Go through all the tiles in the map, find out if to draw them and do so.
     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.
+        // Only go to loading step if we need to fetch the image for this tile.
         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) / gMap.zoomFactor);
-          var yoff = Math.round((y * size - yMin) / gMap.zoomFactor);
-          // Draw placeholder tile unless we overdraw.
-          if (!aOverdraw &&
-              (x < tiles.left -1  || x > tiles.right + 1 ||
-              y < tiles.top -1 || y > tiles.bottom + 1)) {
-            gMap.drawTileGL(xoff, yoff, 0);
-          }
           // Initiate loading/drawing of the actual tile.
           gTileService.get(gMap.activeMap, {x: x, y: y, z: gMap.pos.z},
-                          function(aImage, aStyle, aCoords, aTileKey) {
-            // Only draw if this applies for the current view.
+                           function(aImage, aStyle, aCoords, aTileKey) {
+            // Only load if this applies for the current view.
             if ((aStyle == gMap.activeMap) && (aCoords.z == gMap.pos.z)) {
-              var ixMin = gMap.pos.x - wid / 2;
-              var iyMin = gMap.pos.y - ht / 2;
-              var ixoff = Math.round((aCoords.x * size - ixMin) / gMap.zoomFactor);
-              var iyoff = Math.round((aCoords.y * size - iyMin) / gMap.zoomFactor);
-              var URL = window.URL;
-              var imgURL = URL.createObjectURL(aImage);
-              var imgObj = new Image();
-              imgObj.src = imgURL;
-              imgObj.onload = function() {
-                var txIndex = gMap.glTextureKeys[aTileKey];
-                if (!txIndex) {
-                  txIndex = Object.keys(gMap.glTextureKeys).length;
-                  gMap.loadImageToTexture(imgObj, txIndex, aTileKey);
+              var txIndex = gMap.glTextureKeys[aTileKey];
+              if (!txIndex) {
+                var URL = window.URL;
+                var imgURL = URL.createObjectURL(aImage);
+                var imgObj = new Image();
+                imgObj.onload = function() {
+                  var txNr = 1;
+                  while (gMap.glTextures["tx" + txNr]) { txNr++; }
+                  gMap.loadImageToTexture(imgObj, txNr, aTileKey);
+                  requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+                  URL.revokeObjectURL(imgURL);
                 }
-                gMap.drawTileGL(ixoff, iyoff, txIndex);
-                URL.revokeObjectURL(imgURL);
+                imgObj.src = imgURL;
               }
             }
           });
         }
       }
     }
-    //drawTrack();
+    requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
   },
 
-  resizeAndDrawGL: function() {
-    if (!gMap.gl) { return; }
+  drawGL: function() {
+    var wid = gMap.gl.drawingBufferWidth * gMap.zoomFactor; // Width in level 18 pixels.
+    var ht = gMap.gl.drawingBufferHeight * gMap.zoomFactor; // Height in level 18 pixels.
+    var size = gMap.tileSize * gMap.zoomFactor; // Tile size in level 18 pixels.
+
+    var xMin = gMap.pos.x - wid / 2; // Corners of the window in level 18 pixels.
+    var yMin = gMap.pos.y - ht / 2;
+    var xMax = gMap.pos.x + wid / 2;
+    var yMax = gMap.pos.y + ht / 2;
+
+    var txIndexList = [];
+    // Go through all the tiles in the map, find out if to draw them and do so.
+    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!
+        // Round here is **CRUCIAL** otherwise the images are filtered
+        // and the performance sucks (more than expected).
+        var xoff = Math.round((x * size - xMin) / gMap.zoomFactor);
+        var yoff = Math.round((y * size - yMin) / gMap.zoomFactor);
+        // Draw the tile, first find out the index of the texture to use.
+        var norm = normalizeCoords({x: x, y: y, z: gMap.pos.z});
+        var tileKey = getTileKey(gMap.activeMap, norm);
+        var txIndex = gMap.glTextureKeys[tileKey];
+        if (!txIndex) { txIndex = 0; }
+        txIndexList.push(txIndex);
+        gMap.drawTileGL(xoff, yoff, txIndex);
+      }
+    }
+    console.log("Used Indexes: " + txIndexList.join(","));
+  },
 
-    gMap.gl.viewport(0, 0, gMap.gl.drawingBufferWidth, gMap.gl.drawingBufferHeight);
-    gMap.gl.clear(gMap.gl.COLOR_BUFFER_BIT);  // Clear the color.
-    gMap.gl.uniform2f(gMap.glResolutionAttr, gGLMapCanvas.width, gGLMapCanvas.height);
-    //gMap.drawGLTest();
-    gMap.drawGL();
+  resizeAndDraw: function() {
+    var viewportWidth = Math.min(window.innerWidth, window.outerWidth);
+    var viewportHeight = Math.min(window.innerHeight, window.outerHeight);
+    if (gGLMapCanvas && gTrackCanvas) {
+      gGLMapCanvas.width = viewportWidth;
+      gGLMapCanvas.height = viewportHeight;
+      gTrackCanvas.width = viewportWidth;
+      gTrackCanvas.height = viewportHeight;
+      if (gMap.gl) {
+        // Size viewport to canvas size.
+        gMap.gl.viewport(0, 0, gMap.gl.drawingBufferWidth, gMap.gl.drawingBufferHeight);
+        // Clear the color.
+        gMap.gl.clear(gMap.gl.COLOR_BUFFER_BIT);
+        // Make sure the vertex shader get the right resolution.
+        gMap.gl.uniform2f(gMap.glResolutionAttr, gGLMapCanvas.width, gGLMapCanvas.height);
+      }
+      gMap.draw();
+      showUI();
+    }
   },
 
   drawTileGL: function(aLeft, aRight, aTextureIndex) {
-    gMap.gl.activeTexture(gMap.gl.TEXTURE0 + aTextureIndex);
-    gMap.gl.bindTexture(gMap.gl.TEXTURE_2D, gMap.glTextures[aTextureIndex]);
+    gMap.gl.activeTexture(gMap.gl.TEXTURE0);
+    gMap.gl.bindTexture(gMap.gl.TEXTURE_2D, gMap.glTextures["tx" + aTextureIndex]);
+    // Set uImage to refer to TEXTURE0
+    gMap.gl.uniform1i(gMap.gl.getUniformLocation(gMap.glShaderProgram, "uImage"), 0);
     var x_start = aLeft;
     var i_width = gMap.tileSize;
     var y_start = aRight;
@@ -427,12 +451,11 @@ var gMap = {
   },
 
   loadImageToTexture: function(aImage, aTextureIndex, aTileKey) {
+    // TODO: Get rid of old textures.
     gMap.glTextureKeys[aTileKey] = aTextureIndex;
     // Create and bind texture.
-    gMap.glTextures[aTextureIndex] = gMap.gl.createTexture();
-    gMap.gl.activeTexture(gMap.gl.TEXTURE0 + aTextureIndex);
-    gMap.gl.bindTexture(gMap.gl.TEXTURE_2D, gMap.glTextures[aTextureIndex]);
-    gMap.gl.uniform1i(gMap.gl.getUniformLocation(gMap.glShaderProgram, "uImage"), 0);
+    gMap.glTextures["tx" + aTextureIndex] = gMap.gl.createTexture();
+    gMap.gl.bindTexture(gMap.gl.TEXTURE_2D, gMap.glTextures["tx" + aTextureIndex]);
     // Set params for how the texture minifies and magnifies (wrap params are not needed as we're power-of-two).
     gMap.gl.texParameteri(gMap.gl.TEXTURE_2D, gMap.gl.TEXTURE_MIN_FILTER, gMap.gl.NEAREST);
     gMap.gl.texParameteri(gMap.gl.TEXTURE_2D, gMap.gl.TEXTURE_MAG_FILTER, gMap.gl.NEAREST);
@@ -441,36 +464,20 @@ var gMap = {
   },
 }
 
-function resizeAndDraw() {
-  var viewportWidth = Math.min(window.innerWidth, window.outerWidth);
-  var viewportHeight = Math.min(window.innerHeight, window.outerHeight);
-  if (gMapCanvas && gGLMapCanvas && gTrackCanvas) {
-    gMapCanvas.width = viewportWidth;
-    gMapCanvas.height = viewportHeight;
-    gGLMapCanvas.width = viewportWidth;
-    gGLMapCanvas.height = viewportHeight;
-    gTrackCanvas.width = viewportWidth;
-    gTrackCanvas.height = viewportHeight;
-    drawMap();
-    gMap.resizeAndDrawGL();
-    showUI();
-  }
-}
-
 // Using scale(x, y) together with drawing old data on scaled canvas would be an improvement for zooming.
 // See https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Transformations#Scaling
 
 function zoomIn() {
   if (gMap.pos.z < gMap.maxZoom) {
     gMap.pos.z++;
-    drawMap();
+    gMap.draw();
   }
 }
 
 function zoomOut() {
   if (gMap.pos.z > 0) {
     gMap.pos.z--;
-    drawMap();
+    gMap.draw();
   }
 }
 
@@ -478,7 +485,7 @@ function zoomTo(aTargetLevel) {
   aTargetLevel = parseInt(aTargetLevel);
   if (aTargetLevel >= 0 && aTargetLevel <= gMap.maxZoom) {
     gMap.pos.z = aTargetLevel;
-    drawMap();
+    gMap.draw();
   }
 }
 
@@ -507,7 +514,7 @@ function setMapStyle() {
     document.getElementById("copyright").innerHTML =
         gMapStyles[gMap.activeMap].copyright;
     showUI();
-    drawMap();
+    gMap.draw();
   }
 }
 
@@ -524,13 +531,20 @@ function normalizeCoords(aCoords) {
           z: aCoords.z};
 }
 
+function getTileKey(aStyle, aNormalizedCoords) {
+  return aStyle + "::" +
+         aNormalizedCoords.x + "," +
+         aNormalizedCoords.y + "," +
+         aNormalizedCoords.z;
+}
+
 // Returns true if the tile is outside the current view.
 function isOutsideWindow(t) {
   var pos = decodeIndex(t);
 
   var zoomFactor = Math.pow(2, gMap.maxZoom - pos.z);
-  var wid = gMapCanvas.width * zoomFactor;
-  var ht = gMapCanvas.height * zoomFactor;
+  var wid = gMap.width * zoomFactor;
+  var ht = gMap.height * zoomFactor;
 
   pos.x *= zoomFactor;
   pos.y *= zoomFactor;
@@ -552,84 +566,6 @@ function decodeIndex(encodedIdx) {
   return {x: ind[0], y: ind[1], z: ind[2]};
 }
 
-function drawMap(aPixels, aOverdraw) {
-  gMap.drawGL(aPixels, aOverdraw);
-  /*
-  // aPixels is an object with left/right/top/bottom members telling how many
-  //   pixels on the borders should actually be drawn.
-  // aOverdraw is a bool that tells if we should draw placeholders or draw
-  //   straight over the existing content.
-  if (!aPixels)
-    aPixels = {left: gMapCanvas.width, right: gMapCanvas.width,
-               top: gMapCanvas.height, bottom: gMapCanvas.height};
-  if (!aOverdraw)
-    aOverdraw = false;
-
-  document.getElementById("zoomLevel").textContent = gMap.pos.z;
-  gMap.zoomFactor = Math.pow(2, gMap.maxZoom - gMap.pos.z);
-  var wid = gMapCanvas.width * gMap.zoomFactor; // Width in level 18 pixels.
-  var ht = gMapCanvas.height * gMap.zoomFactor; // Height in level 18 pixels.
-  var size = gMap.tileSize * gMap.zoomFactor; // Tile size in level 18 pixels.
-
-  var xMin = gMap.pos.x - wid / 2; // Corners of the window in level 18 pixels.
-  var yMin = gMap.pos.y - ht / 2;
-  var xMax = gMap.pos.x + wid / 2;
-  var yMax = gMap.pos.y + ht / 2;
-
-  if (gMapPrefsLoaded && mainDB)
-    gPrefs.set("position", gMap.pos);
-
-  var tiles = {left: Math.ceil((xMin + aPixels.left * gMap.zoomFactor) / size) -
-                               (aPixels.left ? 0 : 1),
-               right: Math.floor((xMax - aPixels.right * gMap.zoomFactor) / size) -
-                                 (aPixels.right ? 1 : 0),
-               top: Math.ceil((yMin + aPixels.top * gMap.zoomFactor) / size) -
-                              (aPixels.top ? 0 : 1),
-               bottom: Math.floor((yMax - aPixels.bottom * gMap.zoomFactor) / size) -
-                                  (aPixels.bottom ? 1 : 0)};
-
-  // Go through all the tiles in the map, find out if to draw them and do so.
-  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) {
-        // Round here is **CRUCIAL** otherwise the images are filtered
-        // and the performance sucks (more than expected).
-        var xoff = Math.round((x * size - xMin) / gMap.zoomFactor);
-        var yoff = Math.round((y * size - yMin) / gMap.zoomFactor);
-        // Draw placeholder tile unless we overdraw.
-        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.
-        gTileService.get(gMap.activeMap, {x: x, y: y, z: gMap.pos.z},
-                         function(aImage, aStyle, aCoords, aTileKey) {
-          // Only draw if this applies for the current view.
-          if ((aStyle == gMap.activeMap) && (aCoords.z == gMap.pos.z)) {
-            var ixMin = gMap.pos.x - wid / 2;
-            var iyMin = gMap.pos.y - ht / 2;
-            var ixoff = Math.round((aCoords.x * size - ixMin) / gMap.zoomFactor);
-            var iyoff = Math.round((aCoords.y * size - iyMin) / gMap.zoomFactor);
-            var URL = window.URL;
-            var imgURL = URL.createObjectURL(aImage);
-            var imgObj = new Image();
-            imgObj.src = imgURL;
-            imgObj.onload = function() {
-              gMapContext.drawImage(imgObj, ixoff, iyoff);
-              URL.revokeObjectURL(imgURL);
-            }
-          }
-        });
-      }
-    }
-  }
-  */
-  drawTrack();
-}
-
 function drawTrack() {
   gLastDrawnPoint = null;
   gCurPosMapCache = undefined;
@@ -646,8 +582,8 @@ function drawTrackPoint(aLatitude, aLongitude, lastPoint) {
   var trackpoint = gps2xy(aLatitude, aLongitude);
   // lastPoint is for optimizing (not actually executing the draw until the last)
   trackpoint.optimized = (lastPoint === false);
-  var mappos = {x: Math.round((trackpoint.x - gMap.pos.x) / gMap.zoomFactor + gMapCanvas.width / 2),
-                y: Math.round((trackpoint.y - gMap.pos.y) / gMap.zoomFactor + gMapCanvas.height / 2)};
+  var mappos = {x: Math.round((trackpoint.x - gMap.pos.x) / gMap.zoomFactor + gMap.width / 2),
+                y: Math.round((trackpoint.y - gMap.pos.y) / gMap.zoomFactor + gMap.height / 2)};
 
   if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
     gTrackContext.strokeStyle = gTrackColor;
@@ -669,8 +605,8 @@ function drawTrackPoint(aLatitude, aLongitude, lastPoint) {
   else {
     if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
       gTrackContext.beginPath();
-      gTrackContext.moveTo(Math.round((gLastDrawnPoint.x - gMap.pos.x) / gMap.zoomFactor + gMapCanvas.width / 2),
-                           Math.round((gLastDrawnPoint.y - gMap.pos.y) / gMap.zoomFactor + gMapCanvas.height / 2));
+      gTrackContext.moveTo(Math.round((gLastDrawnPoint.x - gMap.pos.x) / gMap.zoomFactor + gMap.width / 2),
+                           Math.round((gLastDrawnPoint.y - gMap.pos.y) / gMap.zoomFactor + gMap.height / 2));
     }
     gTrackContext.lineTo(mappos.x, mappos.y);
     if (!trackpoint.optimized)
@@ -682,8 +618,8 @@ function drawTrackPoint(aLatitude, aLongitude, lastPoint) {
 function drawCurrentLocation(trackPoint) {
   var locpoint = gps2xy(trackPoint.coords.latitude, trackPoint.coords.longitude);
   var circleRadius = Math.round(gCurLocSize / 2);
-  var mappos = {x: Math.round((locpoint.x - gMap.pos.x) / gMap.zoomFactor + gMapCanvas.width / 2),
-                y: Math.round((locpoint.y - gMap.pos.y) / gMap.zoomFactor + gMapCanvas.height / 2)};
+  var mappos = {x: Math.round((locpoint.x - gMap.pos.x) / gMap.zoomFactor + gMap.width / 2),
+                y: Math.round((locpoint.y - gMap.pos.y) / gMap.zoomFactor + gMap.height / 2)};
 
   undrawCurrentLocation();
 
@@ -706,8 +642,8 @@ function drawCurrentLocation(trackPoint) {
 function undrawCurrentLocation() {
   if (gCurPosMapCache) {
     var oldpoint = gCurPosMapCache.point;
-    var oldmp = {x: Math.round((oldpoint.x - gMap.pos.x) / gMap.zoomFactor + gMapCanvas.width / 2),
-                 y: Math.round((oldpoint.y - gMap.pos.y) / gMap.zoomFactor + gMapCanvas.height / 2)};
+    var oldmp = {x: Math.round((oldpoint.x - gMap.pos.x) / gMap.zoomFactor + gMap.width / 2),
+                 y: Math.round((oldpoint.y - gMap.pos.y) / gMap.zoomFactor + gMap.height / 2)};
     gTrackContext.putImageData(gCurPosMapCache.data,
                                oldmp.x - gCurPosMapCache.radius,
                                oldmp.y - gCurPosMapCache.radius);
@@ -758,8 +694,8 @@ var mapEvHandler = {
           gDragTouchID = aEvent.changedTouches.item(0).identifier;
           coordObj = aEvent.changedTouches.identifiedTouch(gDragTouchID);
         }
-        var x = coordObj.clientX - gMapCanvas.offsetLeft;
-        var y = coordObj.clientY - gMapCanvas.offsetTop;
+        var x = coordObj.clientX - gGLMapCanvas.offsetLeft;
+        var y = coordObj.clientY - gGLMapCanvas.offsetTop;
 
         if (touchEvent || aEvent.button === 0) {
           gDragging = true;
@@ -789,15 +725,15 @@ var mapEvHandler = {
               // must equal pixel distance of new center and middle.
               var x = (aEvent.targetTouches.item(1).clientX +
                        aEvent.targetTouches.item(0).clientX) / 2 -
-                      gMapCanvas.offsetLeft;
+                      gGLMapCanvas.offsetLeft;
               var y = (aEvent.targetTouches.item(1).clientY +
                        aEvent.targetTouches.item(0).clientY) / 2 -
-                      gMapCanvas.offsetTop;
+                      gGLMapCanvas.offsetTop;
 
               // Zoom factor after this action.
               var newZoomFactor = Math.pow(2, gMap.maxZoom - newZoomLevel);
-              gMap.pos.x -= (x - gMapCanvas.width / 2) * (newZoomFactor - gMap.zoomFactor);
-              gMap.pos.y -= (y - gMapCanvas.height / 2) * (newZoomFactor - gMap.zoomFactor);
+              gMap.pos.x -= (x - gMap.width / 2) * (newZoomFactor - gMap.zoomFactor);
+              gMap.pos.y -= (y - gMap.height / 2) * (newZoomFactor - gMap.zoomFactor);
 
               if (gPinchStartWidth < curPinchStartWidth)
                 zoomIn();
@@ -811,26 +747,28 @@ var mapEvHandler = {
           // If we are in a pinch, do not drag.
           break;
         }
-        var x = coordObj.clientX - gMapCanvas.offsetLeft;
-        var y = coordObj.clientY - gMapCanvas.offsetTop;
+        var x = coordObj.clientX - gGLMapCanvas.offsetLeft;
+        var y = coordObj.clientY - gGLMapCanvas.offsetTop;
         if (gDragging === true) {
           var dX = x - gLastMouseX;
           var dY = y - gLastMouseY;
           gMap.pos.x -= dX * gMap.zoomFactor;
           gMap.pos.y -= dY * gMap.zoomFactor;
-          if (true) { // use optimized path
+          if (false) { // use optimized path
+            /* TODO: investigate optimized path for GL - code below was 2D.
             var mapData = gMapContext.getImageData(0, 0,
                                                    gMapCanvas.width,
                                                    gMapCanvas.height);
             gMapContext.clearRect(0, 0, gMapCanvas.width, gMapCanvas.height);
             gMapContext.putImageData(mapData, dX, dY);
-            drawMap({left: (dX > 0) ? dX : 0,
+            gMap.draw({left: (dX > 0) ? dX : 0,
                      right: (dX < 0) ? -dX : 0,
                      top: (dY > 0) ? dY : 0,
                      bottom: (dY < 0) ? -dY : 0});
+            */
           }
           else {
-            drawMap(false, true);
+            gMap.draw(false, true);
           }
           showUI();
         }
@@ -858,8 +796,8 @@ var mapEvHandler = {
 
         // Debug output: "coordinates" of the point the mouse was over.
         /*
-        var ptCoord = {x: gMap.pos.x + (x - gMapCanvas.width / 2) * gMap.zoomFactor,
-                       y: gMap.pos.y + (x - gMapCanvas.height / 2) * gMap.zoomFactor};
+        var ptCoord = {x: gMap.pos.x + (x - gMap.width / 2) * gMap.zoomFactor,
+                       y: gMap.pos.y + (x - gMap.height / 2) * gMap.zoomFactor};
         var gpsCoord = xy2gps(ptCoord.x, ptCoord.y);
         var pt2Coord = gps2xy(gpsCoord.latitude, gpsCoord.longitude);
         console.log(ptCoord.x + "/" + ptCoord.y + " - " +
@@ -872,13 +810,13 @@ var mapEvHandler = {
           // Calculate new center of the map - same point stays under the mouse.
           // This means that the pixel distance between the old center and point
           // must equal the pixel distance of the new center and that point.
-          var x = coordObj.clientX - gMapCanvas.offsetLeft;
-          var y = coordObj.clientY - gMapCanvas.offsetTop;
+          var x = coordObj.clientX - gGLMapCanvas.offsetLeft;
+          var y = coordObj.clientY - gGLMapCanvas.offsetTop;
 
           // Zoom factor after this action.
           var newZoomFactor = Math.pow(2, gMap.maxZoom - newZoomLevel);
-          gMap.pos.x -= (x - gMapCanvas.width / 2) * (newZoomFactor - gMap.zoomFactor);
-          gMap.pos.y -= (y - gMapCanvas.height / 2) * (newZoomFactor - gMap.zoomFactor);
+          gMap.pos.x -= (x - gMap.width / 2) * (newZoomFactor - gMap.zoomFactor);
+          gMap.pos.y -= (y - gMap.height / 2) * (newZoomFactor - gMap.zoomFactor);
 
           if (aEvent.deltaY < 0)
             zoomIn();
@@ -952,19 +890,21 @@ var mapEvHandler = {
         if (dX || dY) {
           gMap.pos.x -= dX * gMap.zoomFactor;
           gMap.pos.y -= dY * gMap.zoomFactor;
-          if (true) { // use optimized path
+          if (false) { // use optimized path
+            /* TODO: investigate optimized path for GL - code below was 2D.
             var mapData = gMapContext.getImageData(0, 0,
                                                    gMapCanvas.width,
                                                    gMapCanvas.height);
             gMapContext.clearRect(0, 0, gMapCanvas.width, gMapCanvas.height);
             gMapContext.putImageData(mapData, dX, dY);
-            drawMap({left: (dX > 0) ? dX : 0,
+            gMap.draw({left: (dX > 0) ? dX : 0,
                      right: (dX < 0) ? -dX : 0,
                      top: (dY > 0) ? dY : 0,
                      bottom: (dY < 0) ? -dY : 0});
+            */
           }
           else {
-            drawMap(false, true);
+            gMap.draw(false, true);
           }
         }
         break;
@@ -1048,11 +988,11 @@ function startTracking() {
           if (gCenterPosition) {
             var posCoord = gps2xy(position.coords.latitude,
                                   position.coords.longitude);
-            if (Math.abs(gMap.pos.x - posCoord.x) > gMapCanvas.width * gMap.zoomFactor / 4 ||
-                Math.abs(gMap.pos.y - posCoord.y) > gMapCanvas.height * gMap.zoomFactor / 4) {
+            if (Math.abs(gMap.pos.x - posCoord.x) > gMap.width * gMap.zoomFactor / 4 ||
+                Math.abs(gMap.pos.y - posCoord.y) > gMap.height * gMap.zoomFactor / 4) {
               gMap.pos.x = posCoord.x;
               gMap.pos.y = posCoord.y;
-              drawMap(); // This draws the current point as well.
+              gMap.draw(); // This draws the current point as well.
               redrawn = true;
             }
           }
@@ -1096,7 +1036,7 @@ var gTileService = {
 
   get: function(aStyle, aCoords, aCallback) {
     var norm = normalizeCoords(aCoords);
-    var dbkey = aStyle + "::" + norm.x + "," + norm.y + "," + norm.z;
+    var dbkey = getTileKey(aStyle, norm);
     this.getDBCache(dbkey, function(aResult, aEvent) {
       if (aResult) {
         // We did get a cached object.