separate assembling and drawing functions and make the latter happen on requestAnimat...
[lantea.git] / js / map.js
index a3a459b5675a9afab3d44a0e454fd6e71b6e7dc9..e999fb85176c8ad123aaeae020efbd5e3a05121e 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -2,12 +2,9 @@
  * 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/. */
 
  * 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, gTrackCanvas, gTrackContext, gGeolocation;
+var gGLMapCanvas, gTrackCanvas, gTrackContext, gGeolocation;
 var gDebug = false;
 
 var gDebug = false;
 
-var gTileSize = 256;
-var gMaxZoom = 18; // The minimum is 0.
-
 var gMinTrackAccuracy = 1000; // meters
 var gTrackWidth = 2; // pixels
 var gTrackColor = "#FF0000";
 var gMinTrackAccuracy = 1000; // meters
 var gTrackWidth = 2; // pixels
 var gTrackColor = "#FF0000";
@@ -46,22 +43,16 @@ var gMapStyles = {
      url: " http://mt1.google.com/vt/x={x}&y={y}&z={z}",
      copyright: 'Map data and imagery &copy; <a href="http://maps.google.com/">Google</a>'},
 };
      url: " http://mt1.google.com/vt/x={x}&y={y}&z={z}",
      copyright: 'Map data and imagery &copy; <a href="http://maps.google.com/">Google</a>'},
 };
-var gActiveMap = "osm_mapnik";
-
-var gPos = {x: 35630000.0, // Current position in the map in pixels at the maximum zoom level (18)
-            y: 23670000.0, // The range is 0-67108864 (2^gMaxZoom * gTileSize)
-            z: 5}; // This could be fractional if supported being between zoom levels.
 
 var gLastMouseX = 0;
 var gLastMouseY = 0;
 
 var gLastMouseX = 0;
 var gLastMouseY = 0;
-var gZoomFactor;
 
 var gLoadingTile;
 
 var gMapPrefsLoaded = false;
 
 var gDragging = false;
 
 var gLoadingTile;
 
 var gMapPrefsLoaded = false;
 
 var gDragging = false;
-var gDragTouchID;
+var gDragTouchID, gPinchStartWidth;
 
 var gGeoWatchID;
 var gTrack = [];
 
 var gGeoWatchID;
 var gTrack = [];
@@ -72,12 +63,24 @@ var gCurPosMapCache;
 
 function initMap() {
   gGeolocation = navigator.geolocation;
 
 function initMap() {
   gGeolocation = navigator.geolocation;
-  gMapCanvas = document.getElementById("map");
-  gMapContext = gMapCanvas.getContext("2d");
+  // 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.
+    gMap.gl = gGLMapCanvas.getContext("webgl", {depth: false}) ||
+              gGLMapCanvas.getContext("experimental-webgl", {depth: false});
+  }
+  catch(e) {}
+  // If we don't have a GL context, give up now
+  if (!gMap.gl) {
+    showGLWarningDialog();
+    gMap.gl = null;
+  }
   gTrackCanvas = document.getElementById("track");
   gTrackContext = gTrackCanvas.getContext("2d");
   gTrackCanvas = document.getElementById("track");
   gTrackContext = gTrackCanvas.getContext("2d");
-  if (!gActiveMap)
-    gActiveMap = "osm_mapnik";
+  if (!gMap.activeMap)
+    gMap.activeMap = "osm_mapnik";
 
   //gDebug = true;
   if (gDebug) {
 
   //gDebug = true;
   if (gDebug) {
@@ -89,116 +92,405 @@ function initMap() {
     }
   }
 
     }
   }
 
-  var loopCnt = 0;
-  var getPersistentPrefs = function() {
-    if (mainDB) {
-      gWaitCounter++;
-      gPrefs.get("position", function(aValue) {
-        if (aValue) {
-          gPos = aValue;
-          gWaitCounter--;
-        }
-      });
-      gWaitCounter++;
-      gPrefs.get("center_map", function(aValue) {
-        if (aValue === undefined)
-          document.getElementById("centerCheckbox").checked = true;
-        else
-          document.getElementById("centerCheckbox").checked = aValue;
-        setCentering(document.getElementById("centerCheckbox"));
-        gWaitCounter--;
-      });
-      gWaitCounter++;
-      gPrefs.get("tracking_enabled", function(aValue) {
-        if (aValue === undefined)
-          document.getElementById("trackCheckbox").checked = true;
-        else
-          document.getElementById("trackCheckbox").checked = aValue;
-        gWaitCounter--;
-      });
-      gWaitCounter++;
-      gTrackStore.getList(function(aTPoints) {
-        if (gDebug)
-          console.log(aTPoints.length + " points loaded.");
-        if (aTPoints.length) {
-          gTrack = aTPoints;
+  gAction.addEventListener("prefload-done", gMap.initGL, false);
+
+  console.log("map vars set, loading prefs...");
+  loadPrefs();
+}
+
+function loadPrefs(aEvent) {
+  if (aEvent && aEvent.type == "prefs-step") {
+    console.log("wait: " + gWaitCounter);
+    if (gWaitCounter == 0) {
+      gAction.removeEventListener(aEvent.type, loadPrefs, false);
+      gMapPrefsLoaded = true;
+      console.log("prefs loaded.");
+
+      gTrackCanvas.addEventListener("mouseup", mapEvHandler, false);
+      gTrackCanvas.addEventListener("mousemove", mapEvHandler, false);
+      gTrackCanvas.addEventListener("mousedown", mapEvHandler, false);
+      gTrackCanvas.addEventListener("mouseout", mapEvHandler, false);
+
+      gTrackCanvas.addEventListener("touchstart", mapEvHandler, false);
+      gTrackCanvas.addEventListener("touchmove", mapEvHandler, false);
+      gTrackCanvas.addEventListener("touchend", mapEvHandler, false);
+      gTrackCanvas.addEventListener("touchcancel", mapEvHandler, false);
+      gTrackCanvas.addEventListener("touchleave", mapEvHandler, false);
+
+      gTrackCanvas.addEventListener("wheel", mapEvHandler, false);
+
+      document.getElementById("body").addEventListener("keydown", mapEvHandler, false);
+
+      document.getElementById("copyright").innerHTML =
+          gMapStyles[gMap.activeMap].copyright;
+
+      gLoadingTile = new Image();
+      gLoadingTile.src = "style/loading.png";
+      gLoadingTile.onload = function() {
+        var throwEv = new CustomEvent("prefload-done");
+        gAction.dispatchEvent(throwEv);
+      };
+    }
+  }
+  else {
+    if (aEvent)
+      gAction.removeEventListener(aEvent.type, loadPrefs, false);
+    gAction.addEventListener("prefs-step", loadPrefs, false);
+    gWaitCounter++;
+    gPrefs.get("position", function(aValue) {
+      if (aValue && aValue.x && aValue.y && aValue.z) {
+        gMap.pos = aValue;
+      }
+      gWaitCounter--;
+      var throwEv = new CustomEvent("prefs-step");
+      gAction.dispatchEvent(throwEv);
+    });
+    gWaitCounter++;
+    gPrefs.get("center_map", function(aValue) {
+      if (aValue === undefined)
+        document.getElementById("centerCheckbox").checked = true;
+      else
+        document.getElementById("centerCheckbox").checked = aValue;
+      setCentering(document.getElementById("centerCheckbox"));
+      gWaitCounter--;
+      var throwEv = new CustomEvent("prefs-step");
+      gAction.dispatchEvent(throwEv);
+    });
+    gWaitCounter++;
+    gPrefs.get("tracking_enabled", function(aValue) {
+      if (aValue === undefined)
+        document.getElementById("trackCheckbox").checked = true;
+      else
+        document.getElementById("trackCheckbox").checked = aValue;
+      gWaitCounter--;
+      var throwEv = new CustomEvent("prefs-step");
+      gAction.dispatchEvent(throwEv);
+    });
+    gWaitCounter++;
+    var trackLoadStarted = false;
+    var redrawBase = 100;
+    gTrackStore.getListStepped(function(aTPoint) {
+      if (aTPoint) {
+        // Add in front and return new length.
+        var tracklen = gTrack.unshift(aTPoint);
+        // Redraw track periodically, larger distance the longer it gets.
+        // Initial paint will do initial track drawing.
+        if (tracklen % redrawBase == 0) {
+          drawTrack();
+          redrawBase = tracklen;
         }
         }
+      }
+      else {
+        // Last point received.
+        drawTrack();
+      }
+      if (!trackLoadStarted) {
+        // We have the most recent point, if present, rest will load async.
+        trackLoadStarted = true;
         gWaitCounter--;
         gWaitCounter--;
-      });
-    }
-    else
-      setTimeout(getPersistentPrefs, 100);
-    loopCnt++;
-    if (loopCnt > 50) {
-      console.log("Loading prefs failed.");
+        var throwEv = new CustomEvent("prefs-step");
+        gAction.dispatchEvent(throwEv);
+      }
+    });
+  }
+}
+
+var gMap = {
+  gl: null,
+  glShaderProgram: null,
+  glVertexPositionAttr: null,
+  glTextureCoordAttr: null,
+  glResolutionAttr: null,
+  glMapTexture: null,
+  glTextures: {},
+  glTextureKeys: {},
+
+  activeMap: "osm_mapnik",
+  tileSize: 256,
+  maxZoom: 18, // The minimum is 0.
+  zoomFactor: null,
+  pos: {
+    x: 35630000.0, // Current position in the map in pixels at the maximum zoom level (18)
+    y: 23670000.0, // The range is 0-67108864 (2^gMap.maxZoom * gMap.tileSize)
+    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' +
+    'uniform vec2 uResolution;\n\n' +
+    'varying highp vec2 vTextureCoord;\n\n' +
+    'void main(void) {\n' +
+    // convert the rectangle from pixels to -1.0 to +1.0 (clipspace) 0.0 to 1.0
+    '  vec2 clipSpace = aVertexPosition * 2.0 / uResolution - 1.0;\n' +
+    '  gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n' +
+    '  vTextureCoord = aTextureCoord;\n' +
+    '}'; },
+  getFragShaderSource:function() {
+    return 'varying highp vec2 vTextureCoord;\n\n' +
+    'uniform sampler2D uImage;\n\n' +
+    'void main(void) {\n' +
+    '  gl_FragColor = texture2D(uImage, vTextureCoord);\n' +
+    '}'; },
+
+  initGL: function() {
+    // When called from the event listener, the "this" reference doesn't work, so use the object name.
+    if (gMap.gl) {
+      gMap.gl.viewport(0, 0, gMap.gl.drawingBufferWidth, gMap.gl.drawingBufferHeight);
+      gMap.gl.clearColor(0.0, 0.0, 0.0, 0.5);                          // Set clear color to black, fully opaque.
+      gMap.gl.clear(gMap.gl.COLOR_BUFFER_BIT|gMap.gl.DEPTH_BUFFER_BIT);  // Clear the color.
+
+      // Create and initialize the shaders.
+      var vertShader = gMap.gl.createShader(gMap.gl.VERTEX_SHADER);
+      var fragShader = gMap.gl.createShader(gMap.gl.FRAGMENT_SHADER);
+      gMap.gl.shaderSource(vertShader, gMap.getVertShaderSource());
+      // Compile the shader program.
+      gMap.gl.compileShader(vertShader);
+      // See if it compiled successfully.
+      if (!gMap.gl.getShaderParameter(vertShader, gMap.gl.COMPILE_STATUS)) {
+        console.log("An error occurred compiling the vertex shader: " + gMap.gl.getShaderInfoLog(vertShader));
+        return null;
+      }
+      gMap.gl.shaderSource(fragShader, gMap.getFragShaderSource());
+      // Compile the shader program.
+      gMap.gl.compileShader(fragShader);
+      // See if it compiled successfully.
+      if (!gMap.gl.getShaderParameter(fragShader, gMap.gl.COMPILE_STATUS)) {
+        console.log("An error occurred compiling the fragment shader: " + gMap.gl.getShaderInfoLog(fragShader));
+        return null;
+      }
+
+      gMap.glShaderProgram = gMap.gl.createProgram();
+      gMap.gl.attachShader(gMap.glShaderProgram, vertShader);
+      gMap.gl.attachShader(gMap.glShaderProgram, fragShader);
+      gMap.gl.linkProgram(gMap.glShaderProgram);
+      // If creating the shader program failed, alert
+      if (!gMap.gl.getProgramParameter(gMap.glShaderProgram, gMap.gl.LINK_STATUS)) {
+        alert("Unable to initialize the shader program.");
+      }
+      gMap.gl.useProgram(gMap.glShaderProgram);
+      // Get locations of the attributes.
+      gMap.glVertexPositionAttr = gMap.gl.getAttribLocation(gMap.glShaderProgram, "aVertexPosition");
+      gMap.glTextureCoordAttr = gMap.gl.getAttribLocation(gMap.glShaderProgram, "aTextureCoord");
+      gMap.glResolutionAttr = gMap.gl.getUniformLocation(gMap.glShaderProgram, "uResolution");
+
+      var tileVerticesBuffer = gMap.gl.createBuffer();
+      gMap.gl.bindBuffer(gMap.gl.ARRAY_BUFFER, tileVerticesBuffer);
+      // The vertices are the coordinates of the corner points of the square.
+      var vertices = [
+        0.0,  0.0,
+        1.0,  0.0,
+        0.0,  1.0,
+        0.0,  1.0,
+        1.0,  0.0,
+        1.0,  1.0,
+      ];
+      gMap.gl.bufferData(gMap.gl.ARRAY_BUFFER, new Float32Array(vertices), gMap.gl.STATIC_DRAW);
+      gMap.gl.enableVertexAttribArray(gMap.glTextureCoordAttr);
+      gMap.gl.vertexAttribPointer(gMap.glTextureCoordAttr, 2, gMap.gl.FLOAT, false, 0, 0);
+
+      gMap.loadImageToTexture(gLoadingTile, 0, "loading::0,0,0");
+
+      gMap.gl.uniform2f(gMap.glResolutionAttr, gGLMapCanvas.width, gGLMapCanvas.height);
+
+      // Create a buffer for the position of the rectangle corners.
+      var mapVerticesTextureCoordBuffer = gMap.gl.createBuffer();
+      gMap.gl.bindBuffer(gMap.gl.ARRAY_BUFFER, mapVerticesTextureCoordBuffer);
+      gMap.gl.enableVertexAttribArray(gMap.glVertexPositionAttr);
+      gMap.gl.vertexAttribPointer(gMap.glVertexPositionAttr, 2, gMap.gl.FLOAT, false, 0, 0);
     }
     }
-  };
-  getPersistentPrefs();
 
 
-  gTrackCanvas.addEventListener("mouseup", mapEvHandler, false);
-  gTrackCanvas.addEventListener("mousemove", mapEvHandler, false);
-  gTrackCanvas.addEventListener("mousedown", mapEvHandler, false);
-  gTrackCanvas.addEventListener("mouseout", mapEvHandler, false);
+    var throwEv = new CustomEvent("mapinit-done");
+    gAction.dispatchEvent(throwEv);
+  },
+
+  draw: function(aPixels, aOverdraw) {
+    gMap.assembleGL(aPixels);
+    drawTrack();
+  },
+
+  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.
+    if (!aPixels)
+      aPixels = {left: gMap.gl.drawingBufferWidth, right: gMap.gl.drawingBufferWidth,
+                 top: gMap.gl.drawingBufferHeight, bottom: gMap.gl.drawingBufferHeight};
+
+    document.getElementById("zoomLevel").textContent = gMap.pos.z;
+    gMap.zoomFactor = Math.pow(2, gMap.maxZoom - gMap.pos.z);
+    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;
+
+    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 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) {
+          // 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 load if this applies for the current view.
+            if ((aStyle == gMap.activeMap) && (aCoords.z == gMap.pos.z)) {
+              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);
+                }
+                imgObj.src = imgURL;
+              }
+            }
+          });
+        }
+      }
+    }
+    requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+  },
 
 
-  gTrackCanvas.addEventListener("touchstart", mapEvHandler, false);
-  gTrackCanvas.addEventListener("touchmove", mapEvHandler, false);
-  gTrackCanvas.addEventListener("touchend", mapEvHandler, false);
-  gTrackCanvas.addEventListener("touchcancel", mapEvHandler, false);
-  gTrackCanvas.addEventListener("touchleave", mapEvHandler, false);
+  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.
 
 
-  gTrackCanvas.addEventListener("wheel", mapEvHandler, false);
+    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;
 
 
-  document.getElementById("body").addEventListener("keydown", mapEvHandler, false);
+    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(","));
+  },
 
 
-  document.getElementById("copyright").innerHTML =
-      gMapStyles[gActiveMap].copyright;
+  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();
+    }
+  },
 
 
-  gLoadingTile = new Image();
-  gLoadingTile.src = "style/loading.png";
-  gWaitCounter++;
-  gLoadingTile.onload = function() { gWaitCounter--; };
-}
+  drawTileGL: function(aLeft, aRight, 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;
+    var i_height = gMap.tileSize;
+    var textureCoordinates = [
+      x_start, y_start,
+      x_start + i_width, y_start,
+      x_start, y_start + i_height,
+      x_start, y_start + i_height,
+      x_start + i_width, y_start,
+      x_start + i_width, y_start + i_height,
+    ];
+    gMap.gl.bufferData(gMap.gl.ARRAY_BUFFER, new Float32Array(textureCoordinates), gMap.gl.STATIC_DRAW);
+
+    // There are 6 indices in textureCoordinates.
+    gMap.gl.drawArrays(gMap.gl.TRIANGLES, 0, 6);
+  },
 
 
-function resizeAndDraw() {
-  var viewportWidth = Math.min(window.innerWidth, window.outerWidth);
-  var viewportHeight = Math.min(window.innerHeight, window.outerHeight);
-  if (gMapCanvas && gTrackCanvas) {
-    gMapCanvas.width = viewportWidth;
-    gMapCanvas.height = viewportHeight;
-    gTrackCanvas.width = viewportWidth;
-    gTrackCanvas.height = viewportHeight;
-    drawMap();
-    showUI();
-  }
+  loadImageToTexture: function(aImage, aTextureIndex, aTileKey) {
+    // TODO: Get rid of old textures.
+    gMap.glTextureKeys[aTileKey] = aTextureIndex;
+    // Create and bind texture.
+    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);
+    // Upload the image into the texture.
+    gMap.gl.texImage2D(gMap.gl.TEXTURE_2D, 0, gMap.gl.RGBA, gMap.gl.RGBA, gMap.gl.UNSIGNED_BYTE, aImage);
+  },
 }
 
 // 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() {
 }
 
 // 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 (gPos.z < gMaxZoom) {
-    gPos.z++;
-    drawMap();
+  if (gMap.pos.z < gMap.maxZoom) {
+    gMap.pos.z++;
+    gMap.draw();
   }
 }
 
 function zoomOut() {
   }
 }
 
 function zoomOut() {
-  if (gPos.z > 0) {
-    gPos.z--;
-    drawMap();
+  if (gMap.pos.z > 0) {
+    gMap.pos.z--;
+    gMap.draw();
   }
 }
 
 function zoomTo(aTargetLevel) {
   aTargetLevel = parseInt(aTargetLevel);
   }
 }
 
 function zoomTo(aTargetLevel) {
   aTargetLevel = parseInt(aTargetLevel);
-  if (aTargetLevel >= 0 && aTargetLevel <= gMaxZoom) {
-    gPos.z = aTargetLevel;
-    drawMap();
+  if (aTargetLevel >= 0 && aTargetLevel <= gMap.maxZoom) {
+    gMap.pos.z = aTargetLevel;
+    gMap.draw();
   }
 }
 
 function gps2xy(aLatitude, aLongitude) {
   }
 }
 
 function gps2xy(aLatitude, aLongitude) {
-  var maxZoomFactor = Math.pow(2, gMaxZoom) * gTileSize;
+  var maxZoomFactor = Math.pow(2, gMap.maxZoom) * gMap.tileSize;
   var convLat = aLatitude * Math.PI / 180;
   var rawY = (1 - Math.log(Math.tan(convLat) +
                            1 / Math.cos(convLat)) / Math.PI) / 2 * maxZoomFactor;
   var convLat = aLatitude * Math.PI / 180;
   var rawY = (1 - Math.log(Math.tan(convLat) +
                            1 / Math.cos(convLat)) / Math.PI) / 2 * maxZoomFactor;
@@ -208,7 +500,7 @@ function gps2xy(aLatitude, aLongitude) {
 }
 
 function xy2gps(aX, aY) {
 }
 
 function xy2gps(aX, aY) {
-  var maxZoomFactor = Math.pow(2, gMaxZoom) * gTileSize;
+  var maxZoomFactor = Math.pow(2, gMap.maxZoom) * gMap.tileSize;
   var n = Math.PI - 2 * Math.PI * aY / maxZoomFactor;
   return {latitude: 180 / Math.PI *
                     Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))),
   var n = Math.PI - 2 * Math.PI * aY / maxZoomFactor;
   return {latitude: 180 / Math.PI *
                     Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))),
@@ -217,12 +509,12 @@ function xy2gps(aX, aY) {
 
 function setMapStyle() {
   var mapSel = document.getElementById("mapSelector");
 
 function setMapStyle() {
   var mapSel = document.getElementById("mapSelector");
-  if (mapSel.selectedIndex >= 0 && gActiveMap != mapSel.value) {
-    gActiveMap = mapSel.value;
+  if (mapSel.selectedIndex >= 0 && gMap.activeMap != mapSel.value) {
+    gMap.activeMap = mapSel.value;
     document.getElementById("copyright").innerHTML =
     document.getElementById("copyright").innerHTML =
-        gMapStyles[gActiveMap].copyright;
+        gMapStyles[gMap.activeMap].copyright;
     showUI();
     showUI();
-    drawMap();
+    gMap.draw();
   }
 }
 
   }
 }
 
@@ -239,20 +531,27 @@ function normalizeCoords(aCoords) {
           z: aCoords.z};
 }
 
           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);
 
 // Returns true if the tile is outside the current view.
 function isOutsideWindow(t) {
   var pos = decodeIndex(t);
 
-  var zoomFactor = Math.pow(2, gMaxZoom - pos.z);
-  var wid = gMapCanvas.width * zoomFactor;
-  var ht = gMapCanvas.height * zoomFactor;
+  var zoomFactor = Math.pow(2, gMap.maxZoom - pos.z);
+  var wid = gMap.width * zoomFactor;
+  var ht = gMap.height * zoomFactor;
 
   pos.x *= zoomFactor;
   pos.y *= zoomFactor;
 
 
   pos.x *= zoomFactor;
   pos.y *= zoomFactor;
 
-  var sz = gTileSize * zoomFactor;
-  if (pos.x > gPos.x + wid / 2 || pos.y > gPos.y + ht / 2 ||
-      pos.x + sz < gPos.x - wid / 2 || pos.y - sz < gPos.y - ht / 2)
+  var sz = gMap.tileSize * zoomFactor;
+  if (pos.x > gMap.pos.x + wid / 2 || pos.y > gMap.pos.y + ht / 2 ||
+      pos.x + sz < gMap.pos.x - wid / 2 || pos.y - sz < gMap.pos.y - ht / 2)
     return true;
   return false;
 }
     return true;
   return false;
 }
@@ -267,78 +566,7 @@ function decodeIndex(encodedIdx) {
   return {x: ind[0], y: ind[1], z: ind[2]};
 }
 
   return {x: ind[0], y: ind[1], z: ind[2]};
 }
 
-function drawMap(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 = gPos.z;
-  gZoomFactor = Math.pow(2, gMaxZoom - gPos.z);
-  var wid = gMapCanvas.width * gZoomFactor; // Width in level 18 pixels.
-  var ht = gMapCanvas.height * gZoomFactor; // Height in level 18 pixels.
-  var size = gTileSize * gZoomFactor; // Tile size in level 18 pixels.
-
-  var xMin = gPos.x - wid / 2; // Corners of the window in level 18 pixels.
-  var yMin = gPos.y - ht / 2;
-  var xMax = gPos.x + wid / 2;
-  var yMax = gPos.y + ht / 2;
-
-  if (gMapPrefsLoaded && mainDB)
-    gPrefs.set("position", gPos);
-
-  var tiles = {left: Math.ceil((xMin + aPixels.left * gZoomFactor) / size) -
-                               (aPixels.left ? 0 : 1),
-               right: Math.floor((xMax - aPixels.right * gZoomFactor) / size) -
-                                 (aPixels.right ? 1 : 0),
-               top: Math.ceil((yMin + aPixels.top * gZoomFactor) / size) -
-                              (aPixels.top ? 0 : 1),
-               bottom: Math.floor((yMax - aPixels.bottom * gZoomFactor) / 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) / gZoomFactor);
-        var yoff = Math.round((y * size - yMin) / gZoomFactor);
-        // 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(gActiveMap, {x: x, y: y, z: gPos.z},
-                         function(aImage, aStyle, aCoords) {
-          // Only draw if this applies for the current view.
-          if ((aStyle == gActiveMap) && (aCoords.z == gPos.z)) {
-            var ixMin = gPos.x - wid / 2;
-            var iyMin = gPos.y - ht / 2;
-            var ixoff = Math.round((aCoords.x * size - ixMin) / gZoomFactor);
-            var iyoff = Math.round((aCoords.y * size - iyMin) / gZoomFactor);
-            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);
-            }
-          }
-        });
-      }
-    }
-  }
+function drawTrack() {
   gLastDrawnPoint = null;
   gCurPosMapCache = undefined;
   gTrackContext.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height);
   gLastDrawnPoint = null;
   gCurPosMapCache = undefined;
   gTrackContext.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height);
@@ -354,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 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 - gPos.x) / gZoomFactor + gMapCanvas.width / 2),
-                y: Math.round((trackpoint.y - gPos.y) / gZoomFactor + 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;
 
   if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
     gTrackContext.strokeStyle = gTrackColor;
@@ -377,8 +605,8 @@ function drawTrackPoint(aLatitude, aLongitude, lastPoint) {
   else {
     if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
       gTrackContext.beginPath();
   else {
     if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
       gTrackContext.beginPath();
-      gTrackContext.moveTo(Math.round((gLastDrawnPoint.x - gPos.x) / gZoomFactor + gMapCanvas.width / 2),
-                           Math.round((gLastDrawnPoint.y - gPos.y) / gZoomFactor + 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)
     }
     gTrackContext.lineTo(mappos.x, mappos.y);
     if (!trackpoint.optimized)
@@ -390,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);
 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 - gPos.x) / gZoomFactor + gMapCanvas.width / 2),
-                y: Math.round((locpoint.y - gPos.y) / gZoomFactor + 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();
 
 
   undrawCurrentLocation();
 
@@ -414,8 +642,8 @@ function drawCurrentLocation(trackPoint) {
 function undrawCurrentLocation() {
   if (gCurPosMapCache) {
     var oldpoint = gCurPosMapCache.point;
 function undrawCurrentLocation() {
   if (gCurPosMapCache) {
     var oldpoint = gCurPosMapCache.point;
-    var oldmp = {x: Math.round((oldpoint.x - gPos.x) / gZoomFactor + gMapCanvas.width / 2),
-                 y: Math.round((oldpoint.y - gPos.y) / gZoomFactor + 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);
     gTrackContext.putImageData(gCurPosMapCache.data,
                                oldmp.x - gCurPosMapCache.radius,
                                oldmp.y - gCurPosMapCache.radius);
@@ -427,6 +655,14 @@ var mapEvHandler = {
   handleEvent: function(aEvent) {
     var touchEvent = aEvent.type.indexOf('touch') != -1;
 
   handleEvent: function(aEvent) {
     var touchEvent = aEvent.type.indexOf('touch') != -1;
 
+    if (touchEvent) {
+      aEvent.stopPropagation();
+    }
+
+    // Bail out if the event is happening on an input.
+    if (aEvent.target.tagName.toLowerCase() == "input")
+      return;
+
     // Bail out on unwanted map moves, but not zoom or keyboard events.
     if (aEvent.type.indexOf("mouse") === 0 || aEvent.type.indexOf("touch") === 0) {
       // Bail out if this is neither a touch nor left-click.
     // Bail out on unwanted map moves, but not zoom or keyboard events.
     if (aEvent.type.indexOf("mouse") === 0 || aEvent.type.indexOf("touch") === 0) {
       // Bail out if this is neither a touch nor left-click.
@@ -447,11 +683,19 @@ var mapEvHandler = {
       case "mousedown":
       case "touchstart":
         if (touchEvent) {
       case "mousedown":
       case "touchstart":
         if (touchEvent) {
+          if (aEvent.targetTouches.length == 2) {
+            gPinchStartWidth = Math.sqrt(
+                Math.pow(aEvent.targetTouches.item(1).clientX -
+                         aEvent.targetTouches.item(0).clientX, 2) +
+                Math.pow(aEvent.targetTouches.item(1).clientY -
+                         aEvent.targetTouches.item(0).clientY, 2)
+            );
+          }
           gDragTouchID = aEvent.changedTouches.item(0).identifier;
           coordObj = aEvent.changedTouches.identifiedTouch(gDragTouchID);
         }
           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;
 
         if (touchEvent || aEvent.button === 0) {
           gDragging = true;
@@ -462,26 +706,69 @@ var mapEvHandler = {
         break;
       case "mousemove":
       case "touchmove":
         break;
       case "mousemove":
       case "touchmove":
-        var x = coordObj.clientX - gMapCanvas.offsetLeft;
-        var y = coordObj.clientY - gMapCanvas.offsetTop;
+        if (touchEvent && aEvent.targetTouches.length == 2) {
+          curPinchStartWidth = Math.sqrt(
+              Math.pow(aEvent.targetTouches.item(1).clientX -
+                       aEvent.targetTouches.item(0).clientX, 2) +
+              Math.pow(aEvent.targetTouches.item(1).clientY -
+                       aEvent.targetTouches.item(0).clientY, 2)
+          );
+          if (!gPinchStartWidth)
+            gPinchStartWidth = curPinchStartWidth;
+
+          if (gPinchStartWidth / curPinchStartWidth > 1.7 ||
+              gPinchStartWidth / curPinchStartWidth < 0.6) {
+            var newZoomLevel = gMap.pos.z + (gPinchStartWidth < curPinchStartWidth ? 1 : -1);
+            if ((newZoomLevel >= 0) && (newZoomLevel <= gMap.maxZoom)) {
+              // Calculate new center of the map - preserve middle of pinch.
+              // This means that pixel distance between old center and middle
+              // must equal pixel distance of new center and middle.
+              var x = (aEvent.targetTouches.item(1).clientX +
+                       aEvent.targetTouches.item(0).clientX) / 2 -
+                      gGLMapCanvas.offsetLeft;
+              var y = (aEvent.targetTouches.item(1).clientY +
+                       aEvent.targetTouches.item(0).clientY) / 2 -
+                      gGLMapCanvas.offsetTop;
+
+              // Zoom factor after this action.
+              var newZoomFactor = Math.pow(2, gMap.maxZoom - newZoomLevel);
+              gMap.pos.x -= (x - gMap.width / 2) * (newZoomFactor - gMap.zoomFactor);
+              gMap.pos.y -= (y - gMap.height / 2) * (newZoomFactor - gMap.zoomFactor);
+
+              if (gPinchStartWidth < curPinchStartWidth)
+                zoomIn();
+              else
+                zoomOut();
+
+              // Reset pinch start width and start another pinch gesture.
+              gPinchStartWidth = null;
+            }
+          }
+          // If we are in a pinch, do not drag.
+          break;
+        }
+        var x = coordObj.clientX - gGLMapCanvas.offsetLeft;
+        var y = coordObj.clientY - gGLMapCanvas.offsetTop;
         if (gDragging === true) {
           var dX = x - gLastMouseX;
           var dY = y - gLastMouseY;
         if (gDragging === true) {
           var dX = x - gLastMouseX;
           var dY = y - gLastMouseY;
-          gPos.x -= dX * gZoomFactor;
-          gPos.y -= dY * gZoomFactor;
-          if (true) { // use optimized path
+          gMap.pos.x -= dX * gMap.zoomFactor;
+          gMap.pos.y -= dY * gMap.zoomFactor;
+          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);
             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});
                      right: (dX < 0) ? -dX : 0,
                      top: (dY > 0) ? dY : 0,
                      bottom: (dY < 0) ? -dY : 0});
+            */
           }
           else {
           }
           else {
-            drawMap(false, true);
+            gMap.draw(false, true);
           }
           showUI();
         }
           }
           showUI();
         }
@@ -490,6 +777,7 @@ var mapEvHandler = {
         break;
       case "mouseup":
       case "touchend":
         break;
       case "mouseup":
       case "touchend":
+        gPinchStartWidth = null;
         gDragging = false;
         showUI();
         break;
         gDragging = false;
         showUI();
         break;
@@ -508,8 +796,8 @@ var mapEvHandler = {
 
         // Debug output: "coordinates" of the point the mouse was over.
         /*
 
         // Debug output: "coordinates" of the point the mouse was over.
         /*
-        var ptCoord = {x: gPos.x + (x - gMapCanvas.width / 2) * gZoomFactor,
-                       y: gPos.y + (x - gMapCanvas.height / 2) * gZoomFactor};
+        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 + " - " +
         var gpsCoord = xy2gps(ptCoord.x, ptCoord.y);
         var pt2Coord = gps2xy(gpsCoord.latitude, gpsCoord.longitude);
         console.log(ptCoord.x + "/" + ptCoord.y + " - " +
@@ -517,18 +805,18 @@ var mapEvHandler = {
                     pt2Coord.x + "/" + pt2Coord.y);
         */
 
                     pt2Coord.x + "/" + pt2Coord.y);
         */
 
-        var newZoomLevel = gPos.z + (aEvent.deltaY < 0 ? 1 : -1);
-        if ((newZoomLevel >= 0) && (newZoomLevel <= gMaxZoom)) {
+        var newZoomLevel = gMap.pos.z + (aEvent.deltaY < 0 ? 1 : -1);
+        if ((newZoomLevel >= 0) && (newZoomLevel <= gMap.maxZoom)) {
           // 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.
           // 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.
 
           // Zoom factor after this action.
-          var newZoomFactor = Math.pow(2, gMaxZoom - newZoomLevel);
-          gPos.x -= (x - gMapCanvas.width / 2) * (newZoomFactor - gZoomFactor);
-          gPos.y -= (y - gMapCanvas.height / 2) * (newZoomFactor - gZoomFactor);
+          var newZoomFactor = Math.pow(2, gMap.maxZoom - newZoomLevel);
+          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();
 
           if (aEvent.deltaY < 0)
             zoomIn();
@@ -544,16 +832,16 @@ var mapEvHandler = {
         var dY = 0;
         switch (aEvent.which) {
           case 39: // right
         var dY = 0;
         switch (aEvent.which) {
           case 39: // right
-            dX = -gTileSize / 2;
+            dX = -gMap.tileSize / 2;
           break;
           case 37: // left
           break;
           case 37: // left
-            dX = gTileSize / 2;
+            dX = gMap.tileSize / 2;
           break;
           case 38: // up
           break;
           case 38: // up
-            dY = gTileSize / 2;
+            dY = gMap.tileSize / 2;
           break;
           case 40: // down
           break;
           case 40: // down
-            dY = -gTileSize / 2;
+            dY = -gMap.tileSize / 2;
           break;
           case 87: // w
           case 107: // + (numpad)
           break;
           case 87: // w
           case 107: // + (numpad)
@@ -600,21 +888,23 @@ var mapEvHandler = {
 
         // Move if needed.
         if (dX || dY) {
 
         // Move if needed.
         if (dX || dY) {
-          gPos.x -= dX * gZoomFactor;
-          gPos.y -= dY * gZoomFactor;
-          if (true) { // use optimized path
+          gMap.pos.x -= dX * gMap.zoomFactor;
+          gMap.pos.y -= dY * gMap.zoomFactor;
+          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);
             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});
                      right: (dX < 0) ? -dX : 0,
                      top: (dY > 0) ? dY : 0,
                      bottom: (dY < 0) ? -dY : 0});
+            */
           }
           else {
           }
           else {
-            drawMap(false, true);
+            gMap.draw(false, true);
           }
         }
         break;
           }
         }
         break;
@@ -698,11 +988,11 @@ function startTracking() {
           if (gCenterPosition) {
             var posCoord = gps2xy(position.coords.latitude,
                                   position.coords.longitude);
           if (gCenterPosition) {
             var posCoord = gps2xy(position.coords.latitude,
                                   position.coords.longitude);
-            if (Math.abs(gPos.x - posCoord.x) > gMapCanvas.width * gZoomFactor / 4 ||
-                Math.abs(gPos.y - posCoord.y) > gMapCanvas.height * gZoomFactor / 4) {
-              gPos.x = posCoord.x;
-              gPos.y = posCoord.y;
-              drawMap(); // This draws the current point as well.
+            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;
+              gMap.draw(); // This draws the current point as well.
               redrawn = true;
             }
           }
               redrawn = true;
             }
           }
@@ -736,7 +1026,7 @@ function endTracking() {
 function clearTrack() {
   gTrack = [];
   gTrackStore.clear();
 function clearTrack() {
   gTrack = [];
   gTrackStore.clear();
-  drawMap({left: 0, right: 0, top: 0, bottom: 0});
+  drawTrack();
 }
 
 var gTileService = {
 }
 
 var gTileService = {
@@ -746,11 +1036,11 @@ var gTileService = {
 
   get: function(aStyle, aCoords, aCallback) {
     var norm = normalizeCoords(aCoords);
 
   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.
     this.getDBCache(dbkey, function(aResult, aEvent) {
       if (aResult) {
         // We did get a cached object.
-        aCallback(aResult.image, aStyle, aCoords);
+        aCallback(aResult.image, aStyle, aCoords, dbkey);
         // Look at the timestamp and return if it's not too old.
         if (aResult.timestamp + gTileService.ageLimit > Date.now())
           return;
         // Look at the timestamp and return if it's not too old.
         if (aResult.timestamp + gTileService.ageLimit > Date.now())
           return;
@@ -772,7 +1062,7 @@ var gTileService = {
       XHR.addEventListener("load", function () {
         if (XHR.status === 200) {
           var blob = XHR.response;
       XHR.addEventListener("load", function () {
         if (XHR.status === 200) {
           var blob = XHR.response;
-          aCallback(blob, aStyle, aCoords);
+          aCallback(blob, aStyle, aCoords, dbkey);
           gTileService.setDBCache(dbkey, {image: blob, timestamp: Date.now()});
         }
       }, false);
           gTileService.setDBCache(dbkey, {image: blob, timestamp: Date.now()});
         }
       }, false);