X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=blobdiff_plain;f=js%2Fmap.js;h=b63aea5fe1272ffd773cc4464cc02781765b6e4b;hp=ff5112a6ed0d02e63397db6a259c1db55e846e87;hb=867ee0afc0f4af36dc5ec5ca769ee088042c4ebc;hpb=64dac5e1fc28b6084393c7e413b271c10cf21cfb
diff --git a/js/map.js b/js/map.js
index ff5112a..b63aea5 100644
--- a/js/map.js
+++ b/js/map.js
@@ -14,34 +14,68 @@ 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: "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:
+ {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",
- copyright: 'Map data © OpenStreetMap and contributors (ODbL/CC-BY-SA), tiles Courtesy of MapQuest.'},
+ 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.'},
- 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: "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:
+ {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)",
+ 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)",
+ 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)",
+ 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.'},
};
var gLastMouseX = 0;
@@ -54,7 +88,7 @@ var gMapPrefsLoaded = false;
var gDragging = false;
var gDragTouchID, gPinchStartWidth;
-var gGeoWatchID;
+var gGeoWatchID, gGPSWakeLock;
var gTrack = [];
var gLastTrackPoint, gLastDrawnPoint;
var gCenterPosition = true;
@@ -87,8 +121,6 @@ function initMap() {
}
gTrackCanvas = document.getElementById("track");
gTrackContext = gTrackCanvas.getContext("2d");
- if (!gMap.activeMap)
- gMap.activeMap = "osm_mapnik";
//gDebug = true;
if (gDebug) {
@@ -129,9 +161,9 @@ 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;
console.log("Init loading tile...");
gLoadingTile = new Image();
@@ -149,6 +181,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;
@@ -159,10 +206,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");
@@ -170,10 +219,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);
@@ -185,11 +236,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 {
@@ -377,7 +431,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;
@@ -386,7 +442,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() {
@@ -524,7 +582,7 @@ var gMap = {
}
}
}
- console.log("Cleaning complete, " + Object.keys(gMap.glTextures).length + " textures left)");
+ console.log("Cleaning complete, " + Object.keys(gMap.glTextures).length + " textures left");
}
},
@@ -589,10 +647,13 @@ 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;
- showUI();
- gMap.draw();
+ if (!gWaitCounter) { // Only do this when prefs are loaded already.
+ showUI();
+ gMap.draw();
+ }
}
}
@@ -645,13 +706,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));
+ }
}
}
}
@@ -670,22 +733,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();
@@ -729,6 +793,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;
@@ -749,12 +861,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) {
@@ -769,8 +881,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;
@@ -960,6 +1071,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},
@@ -1011,6 +1131,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) {
@@ -1066,6 +1189,10 @@ function endTracking() {
gActionLabel.textContent = "";
gAction.style.display = "none";
}
+ if (navigator.requestWakeLock && gGPSWakeLock) {
+ console.log("releasing WakeLock");
+ gGPSWakeLock.unlock();
+ }
if (gGeoWatchID) {
gGeolocation.clearWatch(gGeoWatchID);
}
@@ -1103,8 +1230,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 () {
@@ -1177,11 +1305,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);
}