X-Git-Url: https://git-public.kairo.at//?a=blobdiff_plain;f=js%2Fmap.js;h=10e7d465d18c50ddc50320bc1912e0bebec34c67;hb=b636ae8a09f01c3497b95fc0a0ff51bbde76eea4;hp=926177646f9a2f525f293d423fc3cf521eeef1a4;hpb=bb752fc4f4a183177fe8ac6ea3e5bf6e061a9bb4;p=lantea.git
diff --git a/js/map.js b/js/map.js
index 9261776..10e7d46 100644
--- a/js/map.js
+++ b/js/map.js
@@ -14,34 +14,55 @@ var gCurLocColor = "#A00000";
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 © 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", // 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.'},
mapquest_open:
{name: "MapQuest OSM",
- url: "http://otile[1-4].mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",
- copyright: 'Map data © OpenStreetMap and contributors (ODbL/CC-BY-SA), tiles Courtesy of MapQuest.'},
+ 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",
copyright: 'Tiles Courtesy of MapQuest, 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 OpenGeoServer.org, CC-BY 3.0 AT.'},
- google_map:
- {name: "Google Maps",
- url: " http://mt1.google.com/vt/x={x}&y={y}&z={z}",
- copyright: 'Map data and imagery © Google'},
+ osm_hot:
+ {name: "OSM HOT style",
+ 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'},
+ stamen_toner:
+ {name: "Stamen Toner (B+W)", // https has wrong cert, .ssl.fastly.net instead of .tile.stamen.com
+ url: "http://[a-c].tile.stamen.com/toner/{z}/{x}/{y}.jpg",
+ 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)", // https has wrong cert, .ssl.fastly.net instead of .tile.stamen.com
+ url: "http://[a-c].tile.stamen.com/terrain/{z}/{x}/{y}.jpg",
+ copyright: 'Map data © OpenStreetMap contributors, ODbL/CC-BY-SA, tiles by Stamen Design, under CC BY 3.0.'},
+ stamen_watercolor:
+ {name: "Stamen Watercolor (artistic)", // https has wrong cert, .ssl.fastly.net instead of .tile.stamen.com
+ url: "http://[a-c].tile.stamen.com/watercolor/{z}/{x}/{y}.jpg",
+ copyright: 'Map data © OpenStreetMap contributors, ODbL/CC-BY-SA, tiles by Stamen Design, under CC BY 3.0.'},
};
var gLastMouseX = 0;
@@ -72,11 +93,19 @@ function initMap() {
gGLMapCanvas.getContext("experimental-webgl", {depth: false});
}
catch(e) {}
- // If we don't have a GL context, give up now
if (!gMap.gl) {
+ // If we don't have a GL context, give up now
showGLWarningDialog();
gMap.gl = null;
}
+ else {
+ // GL context can be lost at any time, handle that.
+ // See http://www.khronos.org/webgl/wiki/HandlingContextLost
+ gGLMapCanvas.addEventListener("webglcontextlost",
+ gMap.handleContextLost, false);
+ gGLMapCanvas.addEventListener("webglcontextrestored",
+ gMap.handleContextRestored, false);
+ }
gTrackCanvas = document.getElementById("track");
gTrackContext = gTrackCanvas.getContext("2d");
if (!gMap.activeMap)
@@ -121,6 +150,8 @@ function loadPrefs(aEvent) {
document.getElementById("body").addEventListener("keydown", mapEvHandler, false);
+ document.addEventListener("visibilitychange", visibilityEvHandler, false);
+
console.log("Events added.");
document.getElementById("copyright").innerHTML =
gMapStyles[gMap.activeMap].copyright;
@@ -141,6 +172,15 @@ 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;
+ }
+ 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;
@@ -151,10 +191,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");
@@ -162,10 +204,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);
@@ -177,11 +221,14 @@ function loadPrefs(aEvent) {
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;
+ if (redrawBase < 1000) {
+ redrawBase = tracklen;
+ }
}
}
else {
@@ -321,8 +368,13 @@ var gMap = {
gMap.glTxCleanIntervalID = window.setInterval(gMap.cleanTextures, 30 * 1000);
}
- var throwEv = new CustomEvent("mapinit-done");
- gAction.dispatchEvent(throwEv);
+ if (!gAppInitDone) {
+ // We may be called when context was lost and destroyed,
+ // only send event when we are in app startup
+ // (gAppInitDone is set to true right after we return this event).
+ var throwEv = new CustomEvent("mapinit-done");
+ gAction.dispatchEvent(throwEv);
+ }
},
draw: function() {
@@ -364,7 +416,9 @@ var gMap = {
var imgObj = new Image();
imgObj.onload = function() {
gMap.loadImageToTexture(imgObj, aTileKey);
- window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+ if (document.hidden != true) { // Only draw if we're actually visible.
+ window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+ }
URL.revokeObjectURL(imgURL);
}
imgObj.src = imgURL;
@@ -373,7 +427,9 @@ var gMap = {
}
}
}
- window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+ if (document.hidden != true) { // Only draw if we're actually visible.
+ window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+ }
},
drawGL: function() {
@@ -512,9 +568,21 @@ var gMap = {
}
}
console.log("Cleaning complete, " + Object.keys(gMap.glTextures).length + " textures left)");
- //clearInterval(gMap.glTxCleanIntervalID);
}
},
+
+ handleContextLost: function(event) {
+ event.preventDefault();
+ // GL context is gone, let's reset everything that depends on it.
+ clearInterval(gMap.glTxCleanIntervalID);
+ gMap.glTextures = {};
+ },
+
+ handleContextRestored: function(event) {
+ // When GL context is back, init GL again and draw.
+ gMap.initGL();
+ gMap.draw();
+ },
}
// Using scale(x, y) together with drawing old data on scaled canvas would be an improvement for zooming.
@@ -562,8 +630,9 @@ function xy2gps(aX, aY) {
function setMapStyle() {
var mapSel = document.getElementById("mapSelector");
- if (mapSel.selectedIndex >= 0 && gMap.activeMap != mapSel.value) {
+ if (!gWaitCounter && 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;
showUI();
@@ -620,13 +689,15 @@ function decodeIndex(encodedIdx) {
}
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));
+ 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));
+ }
}
}
}
@@ -645,22 +716,23 @@ function drawTrackPoint(aLatitude, aLongitude, lastPoint) {
gTrackContext.lineCap = "round";
gTrackContext.lineJoin = "round";
}
+ // This breaks optimiziation, so make sure to reset optimization.
if (!gLastDrawnPoint || gLastDrawnPoint == trackpoint) {
- // This breaks optimiziation, so make sure to close path and reset optimization.
- if (gLastDrawnPoint && gLastDrawnPoint.optimized)
+ 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();
- 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));
- }
+ // Continue drawing segment, close if needed.
gTrackContext.lineTo(mappos.x, mappos.y);
if (!trackpoint.optimized)
gTrackContext.stroke();
@@ -704,6 +776,54 @@ function undrawCurrentLocation() {
}
}
+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 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);
+ }
+ }
+ }
+ return tLength;
+}
+
+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 deg2rad(aDegreeValue) {
+ // Convert an angle in degrees to radiants.
+ return aDegreeValue * (Math.PI / 180);
+}
+
var mapEvHandler = {
handleEvent: function(aEvent) {
var touchEvent = aEvent.type.indexOf('touch') != -1;
@@ -935,6 +1055,15 @@ var mapEvHandler = {
}
};
+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},
@@ -1078,8 +1207,9 @@ var gTileService = {
.replace("{x}", norm.x)
.replace("{y}", norm.y)
.replace("{z}", norm.z)
- .replace("[a-c]", String.fromCharCode(97 + Math.floor(Math.random() * 2)))
- .replace("[1-4]", 1 + Math.floor(Math.random() * 3)),
+ .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";
XHR.addEventListener("load", function () {