also give fullscreen button a new design
[lantea.git] / js / map.js
index b3ddc11cc6343346db25cf5df3edc83b7d17d081..490bfac9eb002836449a825af930d37dbb1522e2 100644 (file)
--- 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 &copy; <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 &copy; <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 &copy; <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: "http://[a-d].tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png", // https is not supported at all
+     copyright: 'Map data and imagery &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
+//  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 &copy; <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 &copy; <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: "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 &copy; <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",
      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 &copy; <a href="http://maps.google.com/">Google</a>'},
+  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 &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
+//  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 &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL/CC-BY-SA</a>'},
+  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 &copy; <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)", // 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 &copy; <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)", // 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 &copy; <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;
@@ -129,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;
@@ -185,11 +208,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 +403,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 +414,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() {
@@ -645,13 +675,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 +702,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 +762,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;
@@ -960,6 +1041,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},
@@ -1104,6 +1194,7 @@ 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";