X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=blobdiff_plain;f=js%2Fmap.js;h=8b4ffbbd0aead264d492d60b0d9c8d5d1090b547;hp=cb659f9d2f6f81967557b57fca08fd39017d3de2;hb=6de10e15dd696eaa97a24f3af50e2b98c5bbe537;hpb=a6b11e47ed68cfa5e6ff26b8fe9d2bdacc39b8f0 diff --git a/js/map.js b/js/map.js index cb659f9..8b4ffbb 100644 --- a/js/map.js +++ b/js/map.js @@ -15,9 +15,13 @@ var gMapStyles = { {name: "OpenStreetMap (Mapnik)", url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png", copyright: 'Map data and imagery © OpenStreetMap contributors, CC-BY-SA'}, - osm_tilesathome: - {name: "OpenStreetMap (OSMarender)", - url: "http://tah.openstreetmap.org/Tiles/tile/{z}/{x}/{y}.png", + osm_cyclemap: + {name: "Cycle Map (OSM)", + url: "http://[a-c].tile.opencyclemap.org/cycle/{z}/{x}/{y}.png", + copyright: 'Map data and imagery © OpenStreetMap contributors, CC-BY-SA'}, + osm_transmap: + {name: "Transport Map (OSM)", + url: "http://[a-c].tile2.opencyclemap.org/transport/{z}/{x}/{y}.png", copyright: 'Map data and imagery © OpenStreetMap contributors, CC-BY-SA'}, mapquest_open: {name: "MapQuest OSM", @@ -54,7 +58,7 @@ var gDragTouchID; var gGeoWatchID; var gTrack = []; -var gLastTrackPoint; +var gLastTrackPoint, gLastDrawnPoint; var gCenterPosition = true; function initMap() { @@ -120,6 +124,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); @@ -131,11 +136,11 @@ function initMap() { } function resizeAndDraw() { - var viewportWidth = window.innerWidth; - var viewportHeight = window.innerHeight; + 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; @@ -198,9 +203,11 @@ 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))); } // Returns true if the tile is outside the current view. @@ -279,34 +286,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 = { @@ -475,16 +498,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 +522,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.