X-Git-Url: https://git-public.kairo.at//?a=blobdiff_plain;ds=sidebyside;f=js%2Fmap.js;h=cddd395bf7c69f0a53dd427327387858260d4fc7;hb=4565aed86972b40bcd65e55453bb16afc628db55;hp=10137f343ca6312728e13947e8e77a5c5f077712;hpb=ca77d52db7f64fe5269e79dc62eb41560c333fa4;p=lantea.git
diff --git a/js/map.js b/js/map.js
index 10137f3..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
@@ -17,51 +14,73 @@ var gMapStyles = {
// and http://wiki.openstreetmap.org/wiki/Tiles or http://wiki.openstreetmap.org/wiki/TMS
osm_mapnik:
{name: "OpenStreetMap (Mapnik)",
- url: "http://[a-c].tile.openstreetmap.org/{z}/{x}/{y}.png",
+ url: "https://[a-c].tile.openstreetmap.org/{z}/{x}/{y}.png",
copyright: 'Map data and imagery © OpenStreetMap contributors, ODbL/CC-BY-SA'},
osm_cyclemap:
{name: "Cycle Map (OSM)",
- url: "http://[a-c].tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
+ url: "https://[a-c].tile.thunderforest.com/cycle/{z}/{x}/{y}.png", // "http://[a-c].tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
copyright: 'Map data and imagery © OpenStreetMap contributors, ODbL/CC-BY-SA'},
osm_transmap:
{name: "Transport Map (OSM)",
- url: "http://[a-c].tile2.opencyclemap.org/transport/{z}/{x}/{y}.png",
+ url: "https://[a-c].tile.thunderforest.com/transport/{z}/{x}/{y}.png", // "http://[a-c].tile2.opencyclemap.org/transport/{z}/{x}/{y}.png",
copyright: 'Map data and imagery © OpenStreetMap contributors, ODbL/CC-BY-SA'},
osm_germany:
{name: "OSM German Style",
- url: "http://[a-d].tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png",
+ url: "https://tilecache[1-4].kairo.at/osmde/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
+ //url: "http://[a-d].tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png", // https is not supported at all
copyright: 'Map data and imagery © OpenStreetMap contributors, ODbL/CC-BY-SA'},
-// oepnvkarte: // XXX: toolserver.org does not support CORS at this time :(
-// {name: "ÃPNV-Karte (OSM)",
-// url: "http://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png",
-// copyright: 'Map data © OpenStreetMap contributors, ODbL/CC-BY-SA, tiles by MeMoMaps under CC-BY-SA.'},
+ oepnvkarte:
+ {name: "ÃPNV-Karte (OSM)",
+ url: "https://tilecache[1-4].kairo.at/oepnv/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
+ //url: "http://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png", // memomaps.de does not support CORS or https at this time :(
+ copyright: 'Map data © OpenStreetMap contributors, ODbL/CC-BY-SA, tiles by MeMoMaps under CC-BY-SA.'},
mapquest_open:
{name: "MapQuest OSM",
- url: "http://otile[1-4].mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",
+ url: "https://tilecache[1-4].kairo.at/mapqosm/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
+ //url: "http://otile[1-4].mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", // https has wrong cert, akamai instead of mqcdn
copyright: 'Map data © OpenStreetMap and contributors (ODbL/CC-BY-SA), tiles courtesy of MapQuest.'},
mapquest_aerial:
{name: "MapQuest Open Aerial",
- url: "http://otile[1-4].mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg",
+ 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: "http://[a-c].tile.openstreetmap.fr/hot/{z}/{x}/{y}.png",
+ 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'},
-// hikebike: // XXX: toolserver.org does not support CORS at this time :(
-// {name: "Hike and Bike (OSM)",
-// url: "http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png",
-// 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
+ //url: "http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png", // toolserver.org does not support CORS at this time :(
+ copyright: 'Map data and imagery © OpenStreetMap contributors, ODbL/CC-BY-SA'},
+ outdoors:
+ {name: "Outdoors (OSM)",
+ url: "https://[a-c].tile.thunderforest.com/outdoors/{z}/{x}/{y}.png", // url: "http://[a-c].tile.opencyclemap.org/outdoors/{z}/{x}/{y}.png",
+ copyright: 'Map data © OpenStreetMap and contributors (ODbL/CC-BY-SA), tiles by Thunderforest.'},
stamen_toner:
- {name: "Stamen Toner (B+W, OSM)",
- url: "http://[a-c].tile.stamen.com/toner/{z}/{x}/{y}.jpg",
+ {name: "Stamen Toner (B+W)",
+ url: "https://tilecache[1-4].kairo.at/toner/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
+ //url: "http://[a-c].tile.stamen.com/toner/{z}/{x}/{y}.jpg", // https has wrong cert, .ssl.fastly.net instead of .tile.stamen.com
copyright: 'Map data © OpenStreetMap contributors, ODbL/CC-BY-SA, tiles by Stamen Design, under CC BY 3.0.'},
stamen_terrain:
- {name: "Stamen Terrain (USA only, OSM)",
- url: "http://[a-c].tile.stamen.com/terrain/{z}/{x}/{y}.jpg",
+ {name: "Stamen Terrain (USA only)",
+ url: "https://tilecache[1-4].kairo.at/terrain/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
+ //url: "http://[a-c].tile.stamen.com/terrain/{z}/{x}/{y}.jpg", // https has wrong cert, .ssl.fastly.net instead of .tile.stamen.com
copyright: 'Map data © OpenStreetMap contributors, ODbL/CC-BY-SA, tiles by Stamen Design, under CC BY 3.0.'},
stamen_watercolor:
- {name: "Stamen Watercolor (artistic, OSM)",
- url: "http://[a-c].tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",
+ {name: "Stamen Watercolor (artistic)",
+ url: "https://tilecache[1-4].kairo.at/watercolor/{z}/{x}/{y}.png", // route through CORS+SSL tilecache @ kairo.at
+ //url: "http://[a-c].tile.stamen.com/watercolor/{z}/{x}/{y}.jpg", // https has wrong cert, .ssl.fastly.net instead of .tile.stamen.com
copyright: 'Map data © OpenStreetMap contributors, ODbL/CC-BY-SA, tiles by Stamen Design, under CC BY 3.0.'},
};
@@ -75,12 +94,11 @@ var gMapPrefsLoaded = false;
var gDragging = false;
var gDragTouchID, gPinchStartWidth;
-var gGeoWatchID;
+var gGeoWatchID, gGPSWakeLock;
var gTrack = [];
-var gLastTrackPoint, gLastDrawnPoint;
+var gLastTrackPoint;
var gCenterPosition = true;
-
-var gCurPosMapCache;
+var gLastMoveAction = null;
function initMap() {
gGeolocation = navigator.geolocation;
@@ -107,9 +125,7 @@ function initMap() {
gMap.handleContextRestored, false);
}
gTrackCanvas = document.getElementById("track");
- gTrackContext = gTrackCanvas.getContext("2d");
- if (!gMap.activeMap)
- gMap.activeMap = "osm_mapnik";
+ gTrackLayer.context = gTrackCanvas.getContext("2d");
//gDebug = true;
if (gDebug) {
@@ -153,8 +169,6 @@ function loadPrefs(aEvent) {
document.addEventListener("visibilitychange", visibilityEvHandler, false);
console.log("Events added.");
- document.getElementById("copyright").innerHTML =
- gMapStyles[gMap.activeMap].copyright;
console.log("Init loading tile...");
gLoadingTile = new Image();
@@ -172,6 +186,21 @@ function loadPrefs(aEvent) {
gAction.removeEventListener(aEvent.type, loadPrefs, false);
gAction.addEventListener("prefs-step", loadPrefs, false);
gWaitCounter++;
+ gPrefs.get("active_map_style", function(aValue) {
+ if (aValue && gMapStyles[aValue]) {
+ gMap.activeMap = aValue;
+ }
+ else {
+ gMap.activeMap = "osm_mapnik";
+ }
+ document.getElementById("mapSelector").value = gMap.activeMap;
+ document.getElementById("copyright").innerHTML =
+ gMapStyles[gMap.activeMap].copyright;
+ gWaitCounter--;
+ var throwEv = new CustomEvent("prefs-step");
+ gAction.dispatchEvent(throwEv);
+ });
+ gWaitCounter++;
gPrefs.get("position", function(aValue) {
if (aValue && aValue.x && aValue.y && aValue.z) {
gMap.pos = aValue;
@@ -182,10 +211,12 @@ function loadPrefs(aEvent) {
});
gWaitCounter++;
gPrefs.get("center_map", function(aValue) {
- if (aValue === undefined)
+ if (aValue === undefined) {
document.getElementById("centerCheckbox").checked = true;
- else
+ }
+ else {
document.getElementById("centerCheckbox").checked = aValue;
+ }
setCentering(document.getElementById("centerCheckbox"));
gWaitCounter--;
var throwEv = new CustomEvent("prefs-step");
@@ -193,10 +224,12 @@ function loadPrefs(aEvent) {
});
gWaitCounter++;
gPrefs.get("tracking_enabled", function(aValue) {
- if (aValue === undefined)
+ if (aValue === undefined) {
document.getElementById("trackCheckbox").checked = true;
- else
+ }
+ else {
document.getElementById("trackCheckbox").checked = aValue;
+ }
gWaitCounter--;
var throwEv = new CustomEvent("prefs-step");
gAction.dispatchEvent(throwEv);
@@ -212,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;
}
@@ -220,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.
@@ -258,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; },
@@ -366,7 +400,7 @@ var gMap = {
draw: function() {
gMap.assembleGL();
- drawTrack();
+ gTrackLayer.drawTrack();
},
assembleGL: function() {
@@ -403,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;
@@ -414,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;
@@ -440,6 +479,7 @@ var gMap = {
gMap.drawTileGL(xoff, yoff, tileKey);
}
}
+ gMap.glDrawRequested = false;
},
resizeAndDraw: function() {
@@ -554,7 +594,43 @@ var gMap = {
}
}
}
- console.log("Cleaning complete, " + Object.keys(gMap.glTextures).length + " textures left)");
+ console.log("Cleaning complete, " + Object.keys(gMap.glTextures).length + " textures left");
+ }
+ },
+
+ // 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();
}
},
@@ -572,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;
+ }
+ }
}
}
@@ -615,17 +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;
- document.getElementById("copyright").innerHTML =
- gMapStyles[gMap.activeMap].copyright;
- showUI();
- gMap.draw();
- }
-}
-
// A sane mod function that works for negative numbers.
// Returns a % b.
function mod(a, b) {
@@ -674,94 +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.optimized = (lastPoint === false);
- 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;
- gTrackContext.fillStyle = gTrackContext.strokeStyle;
- gTrackContext.lineWidth = gTrackWidth;
- gTrackContext.lineCap = "round";
- gTrackContext.lineJoin = "round";
- }
- // This breaks optimiziation, so make sure to reset optimization.
- if (!gLastDrawnPoint || gLastDrawnPoint == trackpoint) {
- trackpoint.optimized = false;
- // Close path if one was open.
- if (gLastDrawnPoint && gLastDrawnPoint.optimized) {
- gTrackContext.stroke();
- }
- }
- if (!gLastDrawnPoint || (gLastDrawnPoint == trackpoint) || !gLastDrawnPoint.optimized) {
- // Start drawing a segment.
- gTrackContext.beginPath();
- gTrackContext.arc(mappos.x, mappos.y,
- gTrackContext.lineWidth, 0, Math.PI * 2, false);
- gTrackContext.fill();
- }
- else {
- // Continue drawing segment, close if needed.
- gTrackContext.lineTo(mappos.x, 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;
@@ -830,12 +954,12 @@ var mapEvHandler = {
// Bail out if the started touch can't be found.
if (touchEvent && gDragging &&
- !aEvent.changedTouches.identifiedTouch(gDragTouchID))
+ !aEvent.targetTouches.item(0))
return;
}
var coordObj = touchEvent ?
- aEvent.changedTouches.identifiedTouch(gDragTouchID) :
+ aEvent.targetTouches.item(0) :
aEvent;
switch (aEvent.type) {
@@ -850,8 +974,7 @@ var mapEvHandler = {
aEvent.targetTouches.item(0).clientY, 2)
);
}
- gDragTouchID = aEvent.changedTouches.item(0).identifier;
- coordObj = aEvent.changedTouches.identifiedTouch(gDragTouchID);
+ coordObj = aEvent.targetTouches.item(0);
}
var x = coordObj.clientX - gGLMapCanvas.offsetLeft;
var y = coordObj.clientY - gGLMapCanvas.offsetTop;
@@ -862,6 +985,7 @@ var mapEvHandler = {
gLastMouseX = x;
gLastMouseY = y;
showUI();
+ gLastMoveAction = performance.now();
break;
case "mousemove":
case "touchmove":
@@ -895,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;
@@ -918,6 +1042,7 @@ var mapEvHandler = {
}
gLastMouseX = x;
gLastMouseY = y;
+ gLastMoveAction = performance.now();
break;
case "mouseup":
case "touchend":
@@ -963,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":
@@ -990,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
@@ -1006,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)
@@ -1020,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);
@@ -1035,6 +1160,7 @@ var mapEvHandler = {
gMap.pos.x -= dX * gMap.zoomFactor;
gMap.pos.y -= dY * gMap.zoomFactor;
gMap.draw();
+ gLastMoveAction = performance.now();
}
break;
}
@@ -1101,6 +1227,9 @@ function startTracking() {
if (gGeolocation) {
gActionLabel.textContent = "Establishing Position";
gAction.style.display = "block";
+ if (navigator.requestWakeLock) {
+ gGPSWakeLock = navigator.requestWakeLock("gps");
+ }
gGeoWatchID = gGeolocation.watchPosition(
function(position) {
if (gActionLabel.textContent) {
@@ -1123,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 ||
@@ -1135,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.
@@ -1156,6 +1285,10 @@ function endTracking() {
gActionLabel.textContent = "";
gAction.style.display = "none";
}
+ if (navigator.requestWakeLock && gGPSWakeLock) {
+ console.log("releasing WakeLock");
+ gGPSWakeLock.unlock();
+ }
if (gGeoWatchID) {
gGeolocation.clearWatch(gGeoWatchID);
}
@@ -1164,7 +1297,54 @@ function endTracking() {
function clearTrack() {
gTrack = [];
gTrackStore.clear();
- drawTrack();
+ gTrackLayer.drawTrack();
+}
+
+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) {
+ console.log("loading track failed: " + aStatusCode + ", result: " + aResult.message);
+ if (aFeedbackElement) {
+ aFeedbackElement.textContent = "Error: " + aResult;
+ aFeedbackElement.classList.add("error");
+ }
+ }
+ 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");
+ }
+ }
+ }
+ );
+}
+
+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 = {
@@ -1268,11 +1448,13 @@ var gTileService = {
var request = transaction.objectStore(this.objStore).clear();
request.onsuccess = function(event) {
success = true;
+ console.log("Cache cleared.");
if (aCallback)
aCallback(success, event);
};
request.onerror = function(event) {
// Errors can be handled here.
+ console.log("Error clearing cache!");
if (aCallback)
aCallback(success, event);
}