* 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
// Find some more OSM ones at http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#Tile_servers
+ // and http://wiki.openstreetmap.org/wiki/Tiles or http://wiki.openstreetmap.org/wiki/TMS
osm_mapnik:
{name: "OpenStreetMap (Mapnik)",
- url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png",
+ url: "https://[a-c].tile.openstreetmap.org/{z}/{x}/{y}.png",
copyright: 'Map data and imagery © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
+ osm_germany:
+ {name: "OSM German Style",
+ 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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
+ 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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>, tiles by <a href="http://memomaps.de">MeMoMaps</a> under <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.'},
mapquest_open:
{name: "MapQuest OSM",
- url: "http://otile[1-4].mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",
- copyright: 'Map data © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors (<a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>), tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a>.'},
+ 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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors (<a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>), tiles courtesy of <a href="http://www.mapquest.com/">MapQuest</a>.'},
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 <a href="http://www.mapquest.com/">MapQuest</a>, portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency.'},
- opengeoserver_arial:
- {name: "OpenGeoServer Aerial",
- url: "http://services.opengeoserver.org/tiles/1.0.0/globe.aerial_EPSG3857/{z}/{x}/{y}.png?origin=nw",
- copyright: 'Tiles by <a href="http://www.opengeoserver.org/">OpenGeoServer.org</a>, <a href="https://creativecommons.org/licenses/by/3.0/at/">CC-BY 3.0 AT</a>.'},
- google_map:
- {name: "Google Maps",
- url: " http://mt1.google.com/vt/x={x}&y={y}&z={z}",
- copyright: 'Map data and imagery © <a href="http://maps.google.com/">Google</a>'},
+ 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 © <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
+ //url: "http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png", // toolserver.org does not support CORS at this time :(
+ copyright: 'Map data and imagery © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
+ 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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors (<a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>), tiles by <a href="http://www.thunderforest.com/">Thunderforest</a>.'},
+ stamen_toner:
+ {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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>, tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>.'},
+ stamen_terrain:
+ {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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>, tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>.'},
+ stamen_watercolor:
+ {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 © <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>, tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>.'},
};
var gLastMouseX = 0;
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;
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) {
document.getElementById("body").addEventListener("keydown", mapEvHandler, false);
- document.getElementById("copyright").innerHTML =
- gMapStyles[gMap.activeMap].copyright;
+ document.addEventListener("visibilitychange", visibilityEvHandler, false);
+ console.log("Events added.");
+
+ console.log("Init loading tile...");
gLoadingTile = new Image();
- gLoadingTile.src = "style/loading.png";
gLoadingTile.onload = function() {
+ console.log("Loading tile loaded.");
var throwEv = new CustomEvent("prefload-done");
gAction.dispatchEvent(throwEv);
};
+ console.log("Set loading tile...");
+ gLoadingTile.src = "style/loading.png";
}
}
else {
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;
});
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");
});
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);
if (aTPoint) {
// Add in front and return new length.
var tracklen = gTrack.unshift(aTPoint);
- // Redraw track periodically, larger distance the longer it gets.
+ // Redraw track periodically, larger distance the longer it gets
+ // (but clamped to the first value over a certain limit).
// Initial paint will do initial track drawing.
if (tracklen % redrawBase == 0) {
- drawTrack();
- redrawBase = tracklen;
+ gTrackLayer.drawTrack(); // TODO: we could draw incremmentally if we would support reverse-direction drawing...
+ if (redrawBase < 1000) {
+ redrawBase = tracklen;
+ }
}
}
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.
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; },
initGL: function() {
// When called from the event listener, the "this" reference doesn't work, so use the object name.
+ console.log("Initializing WebGL...");
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.
+ console.log("Create and compile 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());
return null;
}
+ console.log("Create and link shader program...");
gMap.glShaderProgram = gMap.gl.createProgram();
gMap.gl.attachShader(gMap.glShaderProgram, vertShader);
gMap.gl.attachShader(gMap.glShaderProgram, fragShader);
gMap.glTextureCoordAttr = gMap.gl.getAttribLocation(gMap.glShaderProgram, "aTextureCoord");
gMap.glResolutionAttr = gMap.gl.getUniformLocation(gMap.glShaderProgram, "uResolution");
+ console.log("Set up vertex buffer...");
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.
gMap.gl.uniform2f(gMap.glResolutionAttr, gGLMapCanvas.width, gGLMapCanvas.height);
// Create a buffer for the position of the rectangle corners.
+ console.log("Set up coord buffer...");
var mapVerticesTextureCoordBuffer = gMap.gl.createBuffer();
gMap.gl.bindBuffer(gMap.gl.ARRAY_BUFFER, mapVerticesTextureCoordBuffer);
gMap.gl.enableVertexAttribArray(gMap.glVertexPositionAttr);
draw: function() {
gMap.assembleGL();
- drawTrack();
+ gTrackLayer.drawTrack();
},
assembleGL: function() {
var imgObj = new Image();
imgObj.onload = function() {
gMap.loadImageToTexture(imgObj, aTileKey);
- window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+ gMap.requestDrawGL();
URL.revokeObjectURL(imgURL);
}
imgObj.src = imgURL;
}
}
}
- 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;
gMap.drawTileGL(xoff, yoff, tileKey);
}
}
+ gMap.glDrawRequested = false;
},
resizeAndDraw: function() {
y: Math.ceil((gMap.pos.y + gMap.baseDim.ht / 2) / gMap.baseDim.tsize) + 1,
z: gMap.pos.z});
console.log("In range: " + tMin.x + "," + tMin.y + "," + tMin.z + " - " + tMax.x + "," + tMax.y + "," + tMax.z);
- for (aTileKey in gMap.glTextures) {
- var keyMatches = aTileKey.match(/([^:]+)::(\d+),(\d+),(\d+)/);
+ for (var tileKey in gMap.glTextures) {
+ var keyMatches = tileKey.match(/([^:]+)::(\d+),(\d+),(\d+)/);
if (keyMatches && keyMatches[1] != "loading") {
var txData = {
style: keyMatches[1],
}
if (delTx) {
// Delete texture from GL and from the array we are holding.
- gMap.gl.deleteTexture(gMap.glTextures[aTileKey]);
- delete gMap.glTextures[aTileKey];
+ gMap.gl.deleteTexture(gMap.glTextures[tileKey]);
+ delete gMap.glTextures[tileKey];
}
}
}
- 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();
}
},
},
}
-// 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;
+ }
+ }
}
}
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) {
return {x: ind[0], y: ind[1], z: ind[2]};
}
-function drawTrack() {
- 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));
+function calcTrackDuration() {
+ // Get the duration of the track in s.
+ var tDuration = 0;
+ if (gTrack.length > 1) {
+ for (var i = 1; i < gTrack.length; i++) {
+ if (!gTrack[i].beginSegment) {
+ tDuration += (gTrack[i].time - gTrack[i-1].time);
+ }
}
}
+ return Math.round(tDuration / 1000); // The timestamps are in ms but we return seconds.
}
-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";
- }
- if (!gLastDrawnPoint || gLastDrawnPoint == trackpoint) {
- // This breaks optimiziation, so make sure to close path and reset optimization.
- if (gLastDrawnPoint && gLastDrawnPoint.optimized)
- gTrackContext.stroke();
- gTrackContext.beginPath();
- trackpoint.optimized = false;
- gTrackContext.arc(mappos.x, mappos.y,
- gTrackContext.lineWidth, 0, Math.PI * 2, false);
- gTrackContext.fill();
- }
- else {
- if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
- gTrackContext.beginPath();
- 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));
+function calcTrackLength() {
+ // Get the length of the track in km.
+ var tLength = 0;
+ if (gTrack.length > 1) {
+ for (var i = 1; i < gTrack.length; i++) {
+ if (!gTrack[i].beginSegment) {
+ tLength += getPointDistance(gTrack[i-1].coords, gTrack[i].coords);
+ }
}
- gTrackContext.lineTo(mappos.x, mappos.y);
- if (!trackpoint.optimized)
- gTrackContext.stroke();
}
- gLastDrawnPoint = trackpoint;
+ return tLength;
}
-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 getPointDistance(aGPSPoint1, aGPSPoint2) {
+ // Get the distance in km between the two given GPS points.
+ // See http://stackoverflow.com/questions/365826/calculate-distance-between-2-gps-coordinates
+ // Earth is almost exactly a sphere and we calculate small distances on the surface, so we can do spherical great-circle math.
+ // Also see http://en.wikipedia.org/wiki/Great-circle_distance
+ var R = 6371; // km
+ var dLat = deg2rad(aGPSPoint2.latitude - aGPSPoint1.latitude);
+ var dLon = deg2rad(aGPSPoint2.longitude - aGPSPoint1.longitude);
+ var lat1 = deg2rad(aGPSPoint1.latitude);
+ var lat2 = deg2rad(aGPSPoint2.latitude);
+
+ var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
+ Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) * Math.cos(lat2);
+ var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+ return R * c;
}
-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 deg2rad(aDegreeValue) {
+ // Convert an angle in degrees to radiants.
+ return aDegreeValue * (Math.PI / 180);
}
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) {
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;
gLastMouseX = x;
gLastMouseY = y;
showUI();
+ gLastMoveAction = performance.now();
break;
case "mousemove":
case "touchmove":
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;
}
gLastMouseX = x;
gLastMouseY = y;
+ gLastMoveAction = performance.now();
break;
case "mouseup":
case "touchend":
gMap.pos.y -= (y - gMap.height / 2) * (newZoomFactor - gMap.zoomFactor);
if (aEvent.deltaY < 0)
- zoomIn();
+ gMap.zoomIn();
else
- zoomOut();
+ gMap.zoomOut();
}
break;
case "keydown":
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
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)
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);
gMap.pos.x -= dX * gMap.zoomFactor;
gMap.pos.y -= dY * gMap.zoomFactor;
gMap.draw();
+ gLastMoveAction = performance.now();
}
break;
}
}
};
+function visibilityEvHandler() {
+ // Immediately draw if we just got visible.
+ if (document.hidden != true) {
+ gMap.draw();
+ }
+ // No need to handle the event where we become invisible as we care only draw
+ // when we are visible anyhow.
+}
+
var geofake = {
tracking: false,
lastPos: {x: undefined, y: undefined},
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) {
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 ||
}
}
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.
gActionLabel.textContent = "";
gAction.style.display = "none";
}
+ if (navigator.requestWakeLock && gGPSWakeLock) {
+ console.log("releasing WakeLock");
+ gGPSWakeLock.unlock();
+ }
if (gGeoWatchID) {
gGeolocation.clearWatch(gGeoWatchID);
}
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 = {
.replace("{y}", norm.y)
.replace("{z}", norm.z)
.replace("[a-c]", String.fromCharCode(97 + Math.floor(Math.random() * 3)))
+ .replace("[a-d]", String.fromCharCode(97 + Math.floor(Math.random() * 4)))
.replace("[1-4]", 1 + Math.floor(Math.random() * 4)),
true);
XHR.responseType = "blob";
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);
}
projects / lantea.git / blobdiff