add OpenGeoServer Aerial, correct annotations for other sources
[lantea.git] / js / map.js
index d59d06020c758d13c321fc7496dbdf676672d714..c146ad7b8940a26ea14c099cd3ab2fc2f4e024c5 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -14,19 +14,27 @@ var gMapStyles = {
   osm_mapnik:
     {name: "OpenStreetMap (Mapnik)",
      url: "http://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://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'},
-  osm_tilesathome:
-    {name: "OpenStreetMap (OSMarender)",
-     url: "http://tah.openstreetmap.org/Tiles/tile/{z}/{x}/{y}.png",
-     copyright: 'Map data and imagery &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'},
+     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",
+     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",
+     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>'},
   mapquest_open:
     {name: "MapQuest OSM",
-     url: "http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",
-     copyright: 'Data, imagery and map information provided by MapQuest, <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.'},
+     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>.'},
   mapquest_aerial:
     {name: "MapQuest Open Aerial",
-     url: "http://oatile1.mqcdn.com/naip/{z}/{x}/{y}.png",
-     copyright: 'Data, imagery and map information provided by MapQuest, <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.'},
+     url: "http://oatile[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}",
@@ -54,7 +62,7 @@ var gDragTouchID;
 
 var gGeoWatchID;
 var gTrack = [];
-var gLastTrackPoint;
+var gLastTrackPoint, gLastDrawnPoint;
 var gCenterPosition = true;
 
 function initMap() {
@@ -120,6 +128,7 @@ function initMap() {
   gCanvas.addEventListener("touchcancel", mapEvHandler, false);
   gCanvas.addEventListener("touchleave", mapEvHandler, false);
 
+  // XXX deprecated? see https://groups.google.com/forum/?fromgroups#!topic/mozilla.dev.planning/kuhrORubaRY[1-25]
   gCanvas.addEventListener("DOMMouseScroll", mapEvHandler, false);
   gCanvas.addEventListener("mousewheel", mapEvHandler, false);
 
@@ -134,12 +143,13 @@ function resizeAndDraw() {
   var viewportWidth = Math.min(window.innerWidth, window.outerWidth);
   var viewportHeight = Math.min(window.innerHeight, window.outerHeight);
 
-  var canvasWidth = viewportWidth * 0.98;
-  var canvasHeight = (viewportHeight - 100) * 0.98;
+  var canvasWidth = viewportWidth - 2;
+  var canvasHeight = viewportHeight - 2;
   gCanvas.style.position = "fixed";
   gCanvas.width = canvasWidth;
   gCanvas.height = canvasHeight;
   drawMap();
+  showUI();
 }
 
 function zoomIn() {
@@ -179,6 +189,9 @@ function setMapStyle() {
   if (mapSel.selectedIndex >= 0 && gActiveMap != mapSel.value) {
     gActiveMap = mapSel.value;
     gTiles = {};
+    document.getElementById("copyright").innerHTML =
+        gMapStyles[gActiveMap].copyright;
+    showUI();
     drawMap();
   }
 }
@@ -198,9 +211,12 @@ function normaliseIndices(x, y, z) {
 
 function tileURL(x, y, z) {
   var norm = normaliseIndices(x, y, z);
-  return gMapStyles[gActiveMap].url.replace("{x}", norm.x)
-                                   .replace("{y}", norm.y)
-                                   .replace("{z}", norm.z);
+  return gMapStyles[gActiveMap].url
+         .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));
 }
 
 // Returns true if the tile is outside the current view.
@@ -256,7 +272,7 @@ function drawMap() {
   // Go through all the tiles we want.
   // If any of them aren't loaded or being loaded, do so.
   for (var x = Math.floor(xMin / size); x < Math.ceil(xMax / size); x++) {
-    for (var y = Math.floor(yMin / size); y < Math.ceil(yMax / size); y++) {
+    for (var y = Math.floor(yMin / size); y < Math.ceil(yMax / size); y++) { // slow script warnings on the tablet appear here!
       var xoff = (x * size - xMin) / gZoomFactor;
       var yoff = (y * size - yMin) / gZoomFactor;
       var tileKey = encodeIndex(x, y, gPos.z);
@@ -279,34 +295,50 @@ function drawMap() {
       }
     }
   }
-  if (gTrack.length)
+  if (gTrack.length) {
+    gLastDrawnPoint = null;
     for (var i = 0; i < gTrack.length; i++) {
-      drawTrackPoint(gTrack[i].coords.latitude, gTrack[i].coords.longitude);
+      drawTrackPoint(gTrack[i].coords.latitude, gTrack[i].coords.longitude,
+                     (i + 1 >= gTrack.length));
     }
+  }
 }
 
-function drawTrackPoint(aLatitude, aLongitude) {
+function drawTrackPoint(aLatitude, aLongitude, lastPoint) {
   var trackpoint = gps2xy(aLatitude, aLongitude);
-  gContext.strokeStyle = "#FF0000";
-  gContext.fillStyle = gContext.strokeStyle;
-  gContext.lineWidth = 2;
-  gContext.lineCap = "round";
-  gContext.lineJoin = "round";
-  gContext.beginPath();
-  if (!gLastTrackPoint || gLastTrackPoint == trackpoint) {
-    gContext.arc((trackpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2,
-                 (trackpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2,
+  // lastPoint is for optimizing (not actually executing the draw until the last)
+  trackpoint.optimized = (lastPoint === false);
+
+  if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
+    gContext.strokeStyle = "#FF0000";
+    gContext.fillStyle = gContext.strokeStyle;
+    gContext.lineWidth = 2;
+    gContext.lineCap = "round";
+    gContext.lineJoin = "round";
+  }
+  if (!gLastDrawnPoint || gLastDrawnPoint == trackpoint) {
+    // This breaks optimiziation, so make sure to close path and reset optimization.
+    if (gLastDrawnPoint && gLastDrawnPoint.optimized)
+      gContext.stroke();
+    gContext.beginPath();
+    trackpoint.optimized = false;
+    gContext.arc(Math.round((trackpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2),
+                 Math.round((trackpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2),
                  gContext.lineWidth, 0, Math.PI * 2, false);
     gContext.fill();
   }
   else {
-    gContext.moveTo((gLastTrackPoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2,
-                    (gLastTrackPoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2);
-    gContext.lineTo((trackpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2,
-                    (trackpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2);
-    gContext.stroke();
+    if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) {
+      gContext.beginPath();
+      gContext.moveTo(Math.round((gLastDrawnPoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2),
+                      Math.round((gLastDrawnPoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2));
+    }
+    gContext.lineTo(Math.round((trackpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2),
+                    Math.round((trackpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2));
+    if (!trackpoint.optimized)
+      gContext.stroke();
   }
-  gLastTrackPoint = trackpoint;
+  gLastDrawnPoint = trackpoint;
 }
 
 var mapEvHandler = {
@@ -344,6 +376,7 @@ var mapEvHandler = {
         }
         gLastMouseX = x;
         gLastMouseY = y;
+        showUI();
         break;
       case "mousemove":
       case "touchmove":
@@ -355,6 +388,7 @@ var mapEvHandler = {
           gPos.x -= dX * gZoomFactor;
           gPos.y -= dY * gZoomFactor;
           drawMap();
+          showUI();
         }
         gLastMouseX = x;
         gLastMouseY = y;
@@ -362,6 +396,7 @@ var mapEvHandler = {
       case "mouseup":
       case "touchend":
         gDragging = false;
+        showUI();
         break;
       case "mouseout":
       case "touchcancel":
@@ -475,16 +510,23 @@ function startTracking() {
       return;
   };
   getStoredTrack();
-  if (navigator.geolocation) {
+  if (gGeolocation) {
     gGeoWatchID = gGeolocation.watchPosition(
       function(position) {
         // Coords spec: https://developer.mozilla.org/en/XPCOM_Interface_Reference/NsIDOMGeoPositionCoords
         var tPoint = {time: position.timestamp,
-                      coords: position.coords,
+                      coords: {latitude: position.coords.latitude,
+                               longitude: position.coords.longitude,
+                               altitude: position.coords.altitude,
+                               accuracy: position.coords.accuracy,
+                               altitudeAccuracy: position.coords.altitudeAccuracy,
+                               heading: position.coords.heading,
+                               speed: position.coords.speed},
                       beginSegment: !gLastTrackPoint};
+        gLastTrackPoint = tPoint;
         gTrack.push(tPoint);
-        gTrackStore.push(tPoint);
-        drawTrackPoint(position.coords.latitude, position.coords.longitude);
+        try { gTrackStore.push(tPoint); } catch(e) {}
+        var redrawn = false;
         if (gCenterPosition) {
           var posCoord = gps2xy(position.coords.latitude,
                                 position.coords.longitude);
@@ -492,9 +534,12 @@ function startTracking() {
               Math.abs(gPos.y - posCoord.y) > gCanvas.height * gZoomFactor / 4) {
             gPos.x = posCoord.x;
             gPos.y = posCoord.y;
-            drawMap();
+            drawMap(); // This draws the current point as well.
+            redrawn = true;
           }
         }
+        if (!redrawn)
+          drawTrackPoint(position.coords.latitude, position.coords.longitude, true);
       },
       function(error) {
         // Ignore erros for the moment, but this is good for debugging.