X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=blobdiff_plain;f=js%2Fmap.js;h=cddd395bf7c69f0a53dd427327387858260d4fc7;hp=6d1a6ce2c868584d2785d908a0db1fa946795f3c;hb=HEAD;hpb=57ee3e06c1c005f34297f9b9d1f7e6211ca30607
diff --git a/js/map.js b/js/map.js
index 6d1a6ce..cddd395 100644
--- 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 MapQuest, 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 © OpenStreetMap contributors, ODbL/CC-BY-SA'},
+ 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: © OpenStreetMap contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)'},
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",