add arcgis world imagery
[lantea.git] / js / map.js
index 6d1a6ce2c868584d2785d908a0db1fa946795f3c..cddd395bf7c69f0a53dd427327387858260d4fc7 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -2,14 +2,11 @@
  * 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 gGLMapCanvas, gTrackCanvas, gTrackContext, gGeolocation;
+var gGLMapCanvas, gTrackCanvas, gGeolocation;
 var gDebug = false;
 
 var gMinTrackAccuracy = 1000; // meters
-var gTrackWidth = 2; // pixels
-var gTrackColor = "#FF0000";
-var gCurLocSize = 6; // pixels
-var gCurLocColor = "#A00000";
+var gCenterDelayAfterMove = 3000; // milliseconds
 
 var gMapStyles = {
   // OSM tile usage policy: http://wiki.openstreetmap.org/wiki/Tile_usage_policy
@@ -47,11 +44,20 @@ var gMapStyles = {
      url: "https://tilecache[1-4].kairo.at/mapqsat/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
      //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.'},
+  arcgis_world_imagery:
+    {name: "ArcGIS World Imagery", // see https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer
+     url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+     copyright: 'Source: Esri, Maxar, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community.'},
   osm_hot:
     {name: "OSM HOT style",
      url: "https://tilecache[1-4].kairo.at/osmhot/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
      //url: "http://[a-c].tile.openstreetmap.fr/hot/{z}/{x}/{y}.png", // https has CAcert which doesn't work in browsers
      copyright: 'Map data and imagery &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
+  opentopomap:
+    {name: "OpenTopoMap",
+     //url: "https://tilecache[1-4].kairo.at/opentopomap/{z}/{x}/{y}.png", // route through tilecache @ kairo.at
+     url: "https://[a-c].tile.opentopomap.org/{z}/{x}/{y}.png",
+     copyright: 'Map data: © <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'},
   hikebike:
     {name: "Hike and Bike (OSM)",
      url: "https://tilecache[1-4].kairo.at/hikebike/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
@@ -90,10 +96,9 @@ var gDragTouchID, gPinchStartWidth;
 
 var gGeoWatchID, gGPSWakeLock;
 var gTrack = [];
-var gLastTrackPoint, gLastDrawnPoint;
+var gLastTrackPoint;
 var gCenterPosition = true;
-
-var gCurPosMapCache;
+var gLastMoveAction = null;
 
 function initMap() {
   gGeolocation = navigator.geolocation;
@@ -120,7 +125,7 @@ function initMap() {
                                   gMap.handleContextRestored, false);
   }
   gTrackCanvas = document.getElementById("track");
-  gTrackContext = gTrackCanvas.getContext("2d");
+  gTrackLayer.context = gTrackCanvas.getContext("2d");
 
   //gDebug = true;
   if (gDebug) {
@@ -240,7 +245,7 @@ function loadPrefs(aEvent) {
         // (but clamped to the first value over a certain limit).
         // Initial paint will do initial track drawing.
         if (tracklen % redrawBase == 0) {
-          drawTrack();
+          gTrackLayer.drawTrack(); // TODO: we could draw incremmentally if we would support reverse-direction drawing...
           if (redrawBase < 1000) {
             redrawBase = tracklen;
           }
@@ -248,7 +253,7 @@ function loadPrefs(aEvent) {
       }
       else {
         // Last point received.
-        drawTrack();
+        gTrackLayer.drawTrack(); // TODO: we could draw incremmentally if we would support reverse-direction drawing...
       }
       if (!trackLoadStarted) {
         // We have the most recent point, if present, rest will load async.
@@ -286,6 +291,7 @@ var gMap = {
     ht: null,
     tsize: null,
   },
+  glDrawRequested: false, // To avoid parallel calls to drawGL().
 
   get width() { return gMap.gl ? gMap.gl.drawingBufferWidth : gGLMapCanvas.width; },
   get height() { return gMap.gl ? gMap.gl.drawingBufferHeight : gGLMapCanvas.height; },
@@ -394,7 +400,7 @@ var gMap = {
 
   draw: function() {
     gMap.assembleGL();
-    drawTrack();
+    gTrackLayer.drawTrack();
   },
 
   assembleGL: function() {
@@ -431,9 +437,7 @@ var gMap = {
               var imgObj = new Image();
               imgObj.onload = function() {
                 gMap.loadImageToTexture(imgObj, aTileKey);
-                if (document.hidden != true) { // Only draw if we're actually visible.
-                  window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
-                }
+                gMap.requestDrawGL();
                 URL.revokeObjectURL(imgURL);
               }
               imgObj.src = imgURL;
@@ -442,12 +446,19 @@ var gMap = {
         }
       }
     }
-    if (document.hidden != true) { // Only draw if we're actually visible.
-      window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+    gMap.requestDrawGL();
+  },
+
+  requestDrawGL: function() {
+    // Only draw if we're actually visible.
+    // Also, avoid running this multiple times when it could not complete yet.
+    if (document.hidden != true && !gMap.glDrawRequested) {
+      gMap.glDrawRequested = true;
+      window.requestAnimationFrame(gMap.drawGL);
     }
   },
 
-  drawGL: function() {
+  drawGL: function(aTimestamp) {
     var xMin = gMap.pos.x - gMap.baseDim.wid / 2; // Corners of the window in level 18 pixels.
     var yMin = gMap.pos.y - gMap.baseDim.ht / 2;
     var xMax = gMap.pos.x + gMap.baseDim.wid / 2;
@@ -468,6 +479,7 @@ var gMap = {
         gMap.drawTileGL(xoff, yoff, tileKey);
       }
     }
+    gMap.glDrawRequested = false;
   },
 
   resizeAndDraw: function() {
@@ -586,6 +598,42 @@ var gMap = {
     }
   },
 
+  // 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
+
+  zoomIn: function() {
+    if (gMap.pos.z < gMap.maxZoom) {
+      gMap.pos.z++;
+      gMap.draw();
+    }
+  },
+
+  zoomOut: function() {
+    if (gMap.pos.z > 0) {
+      gMap.pos.z--;
+      gMap.draw();
+    }
+  },
+
+  zoomTo: function(aTargetLevel) {
+    aTargetLevel = parseInt(aTargetLevel);
+    if (aTargetLevel >= 0 && aTargetLevel <= gMap.maxZoom) {
+      gMap.pos.z = aTargetLevel;
+      gMap.draw();
+    }
+  },
+
+  setActiveMap: function(aStyle) {
+    gMap.activeMap = aStyle;
+    gPrefs.set("active_map_style", gMap.activeMap);
+    document.getElementById("copyright").innerHTML =
+        gMapStyles[gMap.activeMap].copyright;
+    if (!gWaitCounter) { // Only do this when prefs are loaded already.
+      showUI();
+      gMap.draw();
+    }
+  },
+
   handleContextLost: function(event) {
     event.preventDefault();
     // GL context is gone, let's reset everything that depends on it.
@@ -600,28 +648,175 @@ var gMap = {
   },
 }
 
-// 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
+var gTrackLayer = {
+  context: null,
+  curPosMapCache: undefined,
+  lastDrawnPoint: null,
+  lastRequestedIndex: null, // may not have been actually drawn...
+  drawRequested: false,
+  restartDrawing: true,
+
+  maxDrawTime: 10, // max time allowed for drawing a section, in ms - 10 means we can do 100 fps smoothly
+  trackWidth: 2, // pixels
+  trackColor: "#FF0000",
+  curLocSize: 6, // pixels
+  curLocColor: "#A00000",
+
+  drawTrack: function(needRestart = true) {
+    // TODO: figure out if we can support reverse drawing while initially loading the track.
+    // Only draw if we're actually visible.
+    // Also, avoid running this multiple times when it could not complete yet.
+    if (needRestart) { gTrackLayer.restartDrawing = true; }
+    if (gTrackLayer.context && document.hidden != true && !gTrackLayer.drawRequested) {
+      gTrackLayer.drawRequested = true;
+      window.requestAnimationFrame(gTrackLayer.drawTrackSection);
+    }
+  },
 
-function zoomIn() {
-  if (gMap.pos.z < gMap.maxZoom) {
-    gMap.pos.z++;
-    gMap.draw();
-  }
-}
+  drawTrackSection: function(aTimestamp) {
+    var start = performance.now();
+    if (gTrackLayer.restartDrawing) {
+      gTrackLayer.lastRequestedIndex = 0;
+      gTrackLayer.lastDrawnPoint = null;
+      gTrackLayer.restartDrawing = false;
+      gTrackLayer.curPosMapCache = undefined;
+      gTrackLayer.context.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height);
+    }
+    if (gTrack.length && (performance.now() < start + gTrackLayer.maxDrawTime)) {
+      for (; gTrackLayer.lastRequestedIndex < gTrack.length; gTrackLayer.lastRequestedIndex++) {
+        gTrackLayer.drawTrackPoint(gTrackLayer.lastRequestedIndex);
+        if (performance.now() >= start + gTrackLayer.maxDrawTime) {
+          // Break out of the loop if we are over the max allowed time, we'll continue in the next rAF (see below).
+          gTrackLayer.drawTrackPoint(null);
+          break;
+        }
+      }
+    }
+    // If we still have work to do and we're still visible, continue drawing.
+    if ((gTrackLayer.lastRequestedIndex + 1 < gTrack.length) && gTrackLayer.context && (document.hidden != true)) {
+      window.requestAnimationFrame(gTrackLayer.drawTrackSection);
+    }
+    gTrackLayer.drawRequested = false;
+  },
 
-function zoomOut() {
-  if (gMap.pos.z > 0) {
-    gMap.pos.z--;
-    gMap.draw();
-  }
-}
+  drawTrackPoint: function(aIndex) {
+    gTrackLayer.running = true;
+    if (!aIndex && aIndex !== 0) {
+      // We can be called this way to make sure we draw an actual line up to where we are right now.
+      if (gTrackLayer.lastDrawnPoint && gTrackLayer.lastDrawnPoint.optimized) {
+        gTrackLayer.context.stroke();
+        gTrackLayer.lastDrawnPoint.optimized = false;
+      }
+      return;
+    }
+    var trackpoint = {"worldpos": gps2xy(gTrack[aIndex].coords.latitude, gTrack[aIndex].coords.longitude)};
+    var isLastPoint = (aIndex + 1 >= gTrack.length || gTrack[aIndex+1].beginSegment);
+    var update_drawnpoint = true;
+    // lastPoint is for optimizing (not actually executing the draw until the last)
+    trackpoint.segmentEnd = (isLastPoint === true);
+    trackpoint.optimized = (isLastPoint === false);
+    trackpoint.mappos = {x: Math.round((trackpoint.worldpos.x - gMap.pos.x) / gMap.zoomFactor + gMap.width / 2),
+                         y: Math.round((trackpoint.worldpos.y - gMap.pos.y) / gMap.zoomFactor + gMap.height / 2)};
+    trackpoint.skip_drawing = false;
+    if (gTrackLayer.lastDrawnPoint) {
+      // Lines completely outside the current display should not be drawn.
+      if ((trackpoint.mappos.x < 0 && gTrackLayer.lastDrawnPoint.mappos.x < 0) ||
+          (trackpoint.mappos.x > gMap.width && gTrackLayer.lastDrawnPoint.mappos.x > gMap.width) ||
+          (trackpoint.mappos.y < 0 && gTrackLayer.lastDrawnPoint.mappos.y < 0) ||
+          (trackpoint.mappos.y > gMap.height && gTrackLayer.lastDrawnPoint.mappos.y > gMap.height)) {
+        trackpoint.skip_drawing = true;
+      }
+    }
+    if (!gTrackLayer.lastDrawnPoint || !gTrackLayer.lastDrawnPoint.optimized) {
+      gTrackLayer.context.strokeStyle = gTrackLayer.trackColor;
+      gTrackLayer.context.fillStyle = gTrackLayer.context.strokeStyle;
+      gTrackLayer.context.lineWidth = gTrackLayer.trackWidth;
+      gTrackLayer.context.lineCap = "round";
+      gTrackLayer.context.lineJoin = "round";
+    }
+    // This breaks optimiziation, so make sure to reset optimization.
+    if (trackpoint.skip_drawing || !gTrackLayer.lastDrawnPoint) {
+      trackpoint.optimized = false;
+      // Close path if one was open.
+      if (gTrackLayer.lastDrawnPoint && gTrackLayer.lastDrawnPoint.optimized) {
+        gTrackLayer.context.stroke();
+      }
+    }
+    if (!trackpoint.skip_drawing) {
+      if (gTrackLayer.lastDrawnPoint && gTrackLayer.lastDrawnPoint.skip_drawing && !gTrackLayer.lastDrawnPoint.segmentEnd) {
+        // If the last point was skipped but the current one isn't, draw a segment start
+        // for the off-screen previous one as well as a connection line.
+        gTrackLayer.context.beginPath();
+        gTrackLayer.context.arc(gTrackLayer.lastDrawnPoint.mappos.x, gTrackLayer.lastDrawnPoint.mappos.y,
+                                gTrackLayer.context.lineWidth, 0, Math.PI * 2, false);
+        gTrackLayer.context.fill();
+        gTrackLayer.context.lineTo(trackpoint.mappos.x, trackpoint.mappos.y);
+      }
+      else if (!gTrackLayer.lastDrawnPoint || !gTrackLayer.lastDrawnPoint.optimized) {
+        // Start drawing a segment with the current point.
+        gTrackLayer.context.beginPath();
+        gTrackLayer.context.arc(trackpoint.mappos.x, trackpoint.mappos.y,
+                                gTrackLayer.context.lineWidth, 0, Math.PI * 2, false);
+        gTrackLayer.context.fill();
+      }
+      else if (!trackpoint.segmentEnd && gTrackLayer.lastDrawnPoint &&
+              (Math.abs(gTrackLayer.lastDrawnPoint.mappos.x - trackpoint.mappos.x) <= 1) &&
+              (Math.abs(gTrackLayer.lastDrawnPoint.mappos.y - trackpoint.mappos.y) <= 1)) {
+        // We would draw the same or almost the same point, don't do any actual drawing.
+        update_drawnpoint = false;
+      }
+      else {
+        // Continue drawing segment, close if needed.
+        gTrackLayer.context.lineTo(trackpoint.mappos.x, trackpoint.mappos.y);
+        if (!trackpoint.optimized)
+          gTrackLayer.context.stroke();
+      }
+    }
+    if (update_drawnpoint) {
+      gTrackLayer.lastDrawnPoint = trackpoint;
+    }
+  },
 
-function zoomTo(aTargetLevel) {
-  aTargetLevel = parseInt(aTargetLevel);
-  if (aTargetLevel >= 0 && aTargetLevel <= gMap.maxZoom) {
-    gMap.pos.z = aTargetLevel;
-    gMap.draw();
+  drawCurrentLocation: function(trackPoint) {
+    // Only run this when visible and we are not drawing a track right now.
+    if (gTrackLayer.context && document.hidden != true && !gTrackLayer.drawRequested) {
+      var locpoint = gps2xy(trackPoint.coords.latitude, trackPoint.coords.longitude);
+      var circleRadius = Math.round(gTrackLayer.curLocSize / 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)};
+
+      gTrackLayer.undrawCurrentLocation();
+
+      // Cache overdrawn area.
+      gTrackLayer.curPosMapCache =
+          {point: locpoint,
+          radius: circleRadius,
+          data: gTrackLayer.context.getImageData(mappos.x - circleRadius,
+                                                mappos.y - circleRadius,
+                                                circleRadius * 2, circleRadius * 2)};
+
+      gTrackLayer.context.strokeStyle = gTrackLayer.curLocColor;
+      gTrackLayer.context.fillStyle = gTrackLayer.context.strokeStyle;
+      gTrackLayer.context.beginPath();
+      gTrackLayer.context.arc(mappos.x, mappos.y,
+                              circleRadius, 0, Math.PI * 2, false);
+      gTrackLayer.context.fill();
+    }
+  },
+
+  undrawCurrentLocation: function() {
+    // Only run this when visible and we are not drawing a track right now.
+    if (gTrackLayer.context && document.hidden != true && !gTrackLayer.drawRequested) {
+      if (gTrackLayer.curPosMapCache) {
+        var oldpoint = gTrackLayer.curPosMapCache.point;
+        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)};
+        gTrackLayer.context.putImageData(gTrackLayer.curPosMapCache.data,
+                                        oldmp.x - gTrackLayer.curPosMapCache.radius,
+                                        oldmp.y - gTrackLayer.curPosMapCache.radius);
+        gTrackLayer.curPosMapCache = undefined;
+      }
+    }
   }
 }
 
@@ -643,20 +838,6 @@ function xy2gps(aX, aY) {
           longitude: aX / maxZoomFactor * 360 - 180};
 }
 
-function setMapStyle() {
-  var mapSel = document.getElementById("mapSelector");
-  if (mapSel.selectedIndex >= 0 && gMap.activeMap != mapSel.value) {
-    gMap.activeMap = mapSel.value;
-    gPrefs.set("active_map_style", gMap.activeMap);
-    document.getElementById("copyright").innerHTML =
-        gMapStyles[gMap.activeMap].copyright;
-    if (!gWaitCounter) { // Only do this when prefs are loaded already.
-      showUI();
-      gMap.draw();
-    }
-  }
-}
-
 // A sane mod function that works for negative numbers.
 // Returns a % b.
 function mod(a, b) {
@@ -705,120 +886,6 @@ function decodeIndex(encodedIdx) {
   return {x: ind[0], y: ind[1], z: ind[2]};
 }
 
-function drawTrack() {
-  if (gTrackContext && (document.hidden != true)) { // Only draw if we're actually visible.
-    gLastDrawnPoint = null;
-    gCurPosMapCache = undefined;
-    gTrackContext.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height);
-    if (gTrack.length) {
-      for (var i = 0; i < gTrack.length; i++) {
-        drawTrackPoint(gTrack[i].coords.latitude, gTrack[i].coords.longitude,
-                      (i + 1 >= gTrack.length || gTrack[i+1].beginSegment));
-      }
-    }
-  }
-}
-
-function drawTrackPoint(aLatitude, aLongitude, lastPoint) {
-  var trackpoint = gps2xy(aLatitude, aLongitude);
-  // lastPoint is for optimizing (not actually executing the draw until the last)
-  trackpoint.segmentEnd = (lastPoint === true);
-  trackpoint.optimized = (lastPoint === false);
-  trackpoint.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) {
-    // Lines completely outside the current display should not be drawn.
-    trackpoint.skip_drawing = false;
-    if ((trackpoint.mappos.x < 0 && gLastDrawnPoint.mappos.x < 0) ||
-        (trackpoint.mappos.x > gMap.width && gLastDrawnPoint.mappos.x > gMap.width) ||
-        (trackpoint.mappos.y < 0 && gLastDrawnPoint.mappos.y < 0) ||
-        (trackpoint.mappos.y > gMap.height && gLastDrawnPoint.mappos.y > gMap.height)) {
-      trackpoint.skip_drawing = true;
-    }
-  }
-  if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
-    gTrackContext.strokeStyle = gTrackColor;
-    gTrackContext.fillStyle = gTrackContext.strokeStyle;
-    gTrackContext.lineWidth = gTrackWidth;
-    gTrackContext.lineCap = "round";
-    gTrackContext.lineJoin = "round";
-  }
-  // This breaks optimiziation, so make sure to reset optimization.
-  if (trackpoint.skip_drawing || !gLastDrawnPoint) {
-    trackpoint.optimized = false;
-    // Close path if one was open.
-    if (gLastDrawnPoint && gLastDrawnPoint.optimized) {
-      gTrackContext.stroke();
-    }
-  }
-  if (!trackpoint.skip_drawing) {
-    if (gLastDrawnPoint && gLastDrawnPoint.skip_drawing && !gLastDrawnPoint.segmentEnd) {
-      // If the last point was skipped but the current one isn't, draw a segment start
-      // for the off-screen previous one as well as a connection line.
-      gTrackContext.beginPath();
-      gTrackContext.arc(gLastDrawnPoint.mappos.x, gLastDrawnPoint.mappos.y,
-                        gTrackContext.lineWidth, 0, Math.PI * 2, false);
-      gTrackContext.fill();
-      gTrackContext.lineTo(trackpoint.mappos.x, trackpoint.mappos.y);
-    }
-    else if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
-      // Start drawing a segment with the current point.
-      gTrackContext.beginPath();
-      gTrackContext.arc(trackpoint.mappos.x, trackpoint.mappos.y,
-                        gTrackContext.lineWidth, 0, Math.PI * 2, false);
-      gTrackContext.fill();
-    }
-    else if (gLastDrawnPoint &&
-             Math.abs(gLastDrawnPoint.mappos.x - trackpoint.mappos.x) <= 1 &&
-             Math.abs(gLastDrawnPoint.mappos.y - trackpoint.mappos.y) <= 1) {
-      // We would draw the same or almost the same point, don't do any actual drawing.
-    }
-    else {
-      // Continue drawing segment, close if needed.
-      gTrackContext.lineTo(trackpoint.mappos.x, trackpoint.mappos.y);
-      if (!trackpoint.optimized)
-        gTrackContext.stroke();
-    }
-  }
-  gLastDrawnPoint = trackpoint;
-}
-
-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 + gMap.width / 2),
-                y: Math.round((locpoint.y - gMap.pos.y) / gMap.zoomFactor + gMap.height / 2)};
-
-  undrawCurrentLocation();
-
-  // Cache overdrawn area.
-  gCurPosMapCache =
-      {point: locpoint,
-       radius: circleRadius,
-       data: gTrackContext.getImageData(mappos.x - circleRadius,
-                                        mappos.y - circleRadius,
-                                        circleRadius * 2, circleRadius * 2)};
-
-  gTrackContext.strokeStyle = gCurLocColor;
-  gTrackContext.fillStyle = gTrackContext.strokeStyle;
-  gTrackContext.beginPath();
-  gTrackContext.arc(mappos.x, mappos.y,
-                    circleRadius, 0, Math.PI * 2, false);
-  gTrackContext.fill();
-}
-
-function undrawCurrentLocation() {
-  if (gCurPosMapCache) {
-    var oldpoint = gCurPosMapCache.point;
-    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);
-    gCurPosMapCache = undefined;
-  }
-}
-
 function calcTrackDuration() {
   // Get the duration of the track in s.
   var tDuration = 0;
@@ -918,6 +985,7 @@ var mapEvHandler = {
         gLastMouseX = x;
         gLastMouseY = y;
         showUI();
+        gLastMoveAction = performance.now();
         break;
       case "mousemove":
       case "touchmove":
@@ -951,9 +1019,9 @@ var mapEvHandler = {
               gMap.pos.y -= (y - gMap.height / 2) * (newZoomFactor - gMap.zoomFactor);
 
               if (gPinchStartWidth < curPinchStartWidth)
-                zoomIn();
+                gMap.zoomIn();
               else
-                zoomOut();
+                gMap.zoomOut();
 
               // Reset pinch start width and start another pinch gesture.
               gPinchStartWidth = null;
@@ -974,6 +1042,7 @@ var mapEvHandler = {
         }
         gLastMouseX = x;
         gLastMouseY = y;
+        gLastMoveAction = performance.now();
         break;
       case "mouseup":
       case "touchend":
@@ -1019,9 +1088,9 @@ var mapEvHandler = {
           gMap.pos.y -= (y - gMap.height / 2) * (newZoomFactor - gMap.zoomFactor);
 
           if (aEvent.deltaY < 0)
-            zoomIn();
+            gMap.zoomIn();
           else
-            zoomOut();
+            gMap.zoomOut();
         }
         break;
       case "keydown":
@@ -1046,12 +1115,12 @@ var mapEvHandler = {
           case 87: // w
           case 107: // + (numpad)
           case 171: // + (normal key)
-            zoomIn();
+            gMap.zoomIn();
           break;
           case 83: // s
           case 109: // - (numpad)
           case 173: // - (normal key)
-            zoomOut();
+            gMap.zoomOut();
           break;
           case 48: // 0
           case 49: // 1
@@ -1062,10 +1131,10 @@ var mapEvHandler = {
           case 54: // 6
           case 55: // 7
           case 56: // 8
-            zoomTo(aEvent.which - 38);
+            gMap.zoomTo(aEvent.which - 38);
           break;
           case 57: // 9
-            zoomTo(9);
+            gMap.zoomTo(9);
           break;
           case 96: // 0 (numpad)
           case 97: // 1 (numpad)
@@ -1076,10 +1145,10 @@ var mapEvHandler = {
           case 102: // 6 (numpad)
           case 103: // 7 (numpad)
           case 104: // 8 (numpad)
-            zoomTo(aEvent.which - 86);
+            gMap.zoomTo(aEvent.which - 86);
           break;
           case 105: // 9 (numpad)
-            zoomTo(9);
+            gMap.zoomTo(9);
           break;
           default: // not supported
             console.log("key not supported: " + aEvent.which);
@@ -1091,6 +1160,7 @@ var mapEvHandler = {
           gMap.pos.x -= dX * gMap.zoomFactor;
           gMap.pos.y -= dY * gMap.zoomFactor;
           gMap.draw();
+          gLastMoveAction = performance.now();
         }
         break;
     }
@@ -1182,7 +1252,7 @@ function startTracking() {
           gTrack.push(tPoint);
           try { gTrackStore.push(tPoint); } catch(e) {}
           var redrawn = false;
-          if (gCenterPosition) {
+          if (gCenterPosition && (!gLastMoveAction || performance.now() > gLastMoveAction + gCenterDelayAfterMove)) {
             var posCoord = gps2xy(position.coords.latitude,
                                   position.coords.longitude);
             if (Math.abs(gMap.pos.x - posCoord.x) > gMap.width * gMap.zoomFactor / 4 ||
@@ -1194,10 +1264,10 @@ function startTracking() {
             }
           }
           if (!redrawn)
-            undrawCurrentLocation();
-            drawTrackPoint(position.coords.latitude, position.coords.longitude, true);
+            gTrackLayer.undrawCurrentLocation();
+            gTrackLayer.drawTrackPoint(gTrack.length-1);
         }
-        drawCurrentLocation(tPoint);
+        gTrackLayer.drawCurrentLocation(tPoint);
       },
       function(error) {
         // Ignore erros for the moment, but this is good for debugging.
@@ -1227,27 +1297,56 @@ function endTracking() {
 function clearTrack() {
   gTrack = [];
   gTrackStore.clear();
-  drawTrack();
+  gTrackLayer.drawTrack();
 }
 
-function loadTrack(aTrackId) {
+function loadTrackFromBackend(aTrackId, aFeedbackElement, aSuccessCallback) {
+  if (aFeedbackElement) {
+    aFeedbackElement.textContent = "Loading...";
+    // If someone loads without pointing to UI (e.g. for debugging), we just overwrite whatever's loaded.
+    if (calcTrackLength() > 1) {
+      aFeedbackElement.textContent = "Track >1km loaded, please save/clear.";
+      aFeedbackElement.classList.add("error");
+      return;
+    }
+  }
   fetchBackend("track_json?id=" + encodeURIComponent(aTrackId), "GET", null,
     function(aResult, aStatusCode) {
-      if (aStatusCode >= 400 || !aResult) {
+      if (aStatusCode >= 400) {
         console.log("loading track failed: " + aStatusCode + ", result: " + aResult.message);
+        if (aFeedbackElement) {
+          aFeedbackElement.textContent = "Error: " + aResult;
+          aFeedbackElement.classList.add("error");
+        }
       }
-      else {
-        console.log("loading track with " + aResult.length + " points.");
-        gTrack = aResult;
-        for (var i = 0; i < gTrack.length; i++) {
-          try { gTrackStore.push(gTrack[i]); } catch(e) {}
+      else if (aResult) {
+        loadTrack(aResult);
+        if (aSuccessCallback) {
+          aSuccessCallback();
+        }
+      }
+      else { // If no result is returned, we assume a general error.
+        console.log("Error getting track with ID " + aTrackId + " from backend.");
+        if (aFeedbackElement) {
+          aFeedbackElement.textContent = "Error fetching track from backend.";
+          aFeedbackElement.classList.add("error");
         }
-        drawTrack();
       }
     }
   );
 }
 
+function loadTrack(aTrack) {
+  console.log("Loading track with " + aTrack.length + " points.");
+  gTrack = aTrack;
+  gTrackStore.clear(function(aSuccess, aEvent) {
+    for (var i = 0; i < gTrack.length; i++) {
+      try { gTrackStore.push(gTrack[i]); } catch(e) {}
+    }
+  });
+  gTrackLayer.drawTrack(); // Draws from gTrack, so not problem that gTrackStore is filled async.
+}
+
 var gTileService = {
   objStore: "tilecache",