X-Git-Url: https://git-public.kairo.at/?p=lantea.git;a=blobdiff_plain;f=js%2Fmap.js;h=c23d46827eab5d696893fbb195002f74d2680589;hp=4cd4ea7b809ea786d1ca1dbdbd1ee8be86ab6e24;hb=8e901dce32e1d203d8400a0be806dc0c36b67665;hpb=99631a7543656fb58fe3c7f7913773d49630db03 diff --git a/js/map.js b/js/map.js index 4cd4ea7..c23d468 100644 --- a/js/map.js +++ b/js/map.js @@ -1,64 +1,46 @@ -/* ***** BEGIN LICENSE BLOCK ***** - * Version: MPL 1.1/GPL 2.0/LGPL 2.1 - * - * The contents of this file are subject to the Mozilla Public License Version - * 1.1 (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * http://www.mozilla.org/MPL/ - * - * Software distributed under the License is distributed on an "AS IS" basis, - * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License - * for the specific language governing rights and limitations under the - * License. - * - * The Original Code is Lantea mapping/tracking web app. - * - * The Initial Developer of the Original Code is - * Robert Kaiser . - * Portions created by the Initial Developer are Copyright (C) 2011 - * the Initial Developer. All Rights Reserved. - * - * Contributor(s): - * Robert Kaiser - * - * Alternatively, the contents of this file may be used under the terms of - * either the GNU General Public License Version 2 or later (the "GPL"), or - * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), - * in which case the provisions of the GPL or the LGPL are applicable instead - * of those above. If you wish to allow use of your version of this file only - * under the terms of either the GPL or the LGPL, and not to allow others to - * use your version of this file under the terms of the MPL, indicate your - * decision by deleting the provisions above and replace them with the notice - * and other provisions required by the GPL or the LGPL. If you do not delete - * the provisions above, a recipient may use your version of this file under - * the terms of any one of the MPL, the GPL or the LGPL. - * - * ***** END LICENSE BLOCK ***** */ - -var gCanvas, gContext; +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this file, + * You can obtain one at http://mozilla.org/MPL/2.0/. */ + +var gCanvas, gContext, gGeolocation; +var gDebug = false; var gTileSize = 256; var gMaxZoom = 18; // The minimum is 0. +var gMinTrackAccuracy = 1000; // meters +var gTrackWidth = 2; // pixels +var gTrackColor = "#FF0000"; +var gCurLocSize = 5; // pixels +var gCurLocColor = "#800000"; + 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 osm_mapnik: {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", - copyright: 'Map data and imagery © OpenStreetMap contributors, CC-BY-SA'}, + 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", + 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", + copyright: 'Map data and imagery © OpenStreetMap contributors, ODbL/CC-BY-SA'}, 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, OpenStreetMap and contributors, CC-BY-SA.'}, + 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.'}, 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, OpenStreetMap and contributors, CC-BY-SA.'}, + url: "http://oatile[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}", @@ -74,24 +56,75 @@ var gLastMouseX = 0; var gLastMouseY = 0; var gZoomFactor; -// Used as an associative array. They keys have to be strings, ours will be "xindex,yindex,zindex" e.g. "13,245,12". +// Used as an associative array. +// The keys have to be strings, ours will be "xindex,yindex,zindex" e.g. "13,245,12". var gTiles = {}; var gLoadingTile; +var gMapPrefsLoaded = false; + var gDragging = false; -var gZoomTouchID; +var gDragTouchID; var gGeoWatchID; var gTrack = []; -var gLastTrackPoint; +var gLastTrackPoint, gLastDrawnPoint; var gCenterPosition = true; +var gCurPosMapCache; + function initMap() { + gGeolocation = navigator.geolocation; gCanvas = document.getElementById("map"); gContext = gCanvas.getContext("2d"); if (!gActiveMap) gActiveMap = "osm_mapnik"; + //gDebug = true; + if (gDebug) { + gGeolocation = geofake; + var hiddenList = document.getElementsByClassName("debugHide"); + // last to first - list of elements with that class is changing! + for (var i = hiddenList.length - 1; i >= 0; i--) { + hiddenList[i].classList.remove("debugHide"); + } + } + + var loopCnt = 0; + var getPersistentPrefs = function() { + if (mainDB) { + gPrefs.get("position", function(aValue) { + if (aValue) { + gPos = aValue; + drawMap(); + } + }); + gPrefs.get("center_map", function(aValue) { + if (aValue === undefined) + document.getElementById("centerCheckbox").checked = true; + else + document.getElementById("centerCheckbox").checked = aValue; + setCentering(document.getElementById("centerCheckbox")); + }); + gPrefs.get("tracking_enabled", function(aValue) { + if (aValue === undefined) + document.getElementById("trackCheckbox").checked = true; + else + document.getElementById("trackCheckbox").checked = aValue; + setTracking(document.getElementById("trackCheckbox")); + }); + gMapPrefsLoaded = true; + } + else + setTimeout(getPersistentPrefs, 100); + loopCnt++; + if (loopCnt > 20) { + gMapPrefsLoaded = true; + return; + } + }; + getPersistentPrefs(); + gCanvas.addEventListener("mouseup", mapEvHandler, false); gCanvas.addEventListener("mousemove", mapEvHandler, false); gCanvas.addEventListener("mousedown", mapEvHandler, false); @@ -103,6 +136,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); @@ -114,15 +148,16 @@ 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; drawMap(); + showUI(); } function zoomIn() { @@ -162,6 +197,9 @@ function setMapStyle() { if (mapSel.selectedIndex >= 0 && gActiveMap != mapSel.value) { gActiveMap = mapSel.value; gTiles = {}; + document.getElementById("copyright").innerHTML = + gMapStyles[gActiveMap].copyright; + showUI(); drawMap(); } } @@ -181,9 +219,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. @@ -233,14 +274,19 @@ function drawMap() { var xMax = gPos.x + wid / 2; var yMax = gPos.y + ht / 2; - // Go through all the tiles we want. If any of them aren't loaded or being loaded, do so. + if (gMapPrefsLoaded && mainDB) + gPrefs.set("position", gPos); + + // 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); if (gTiles[tileKey] && gTiles[tileKey].complete) { - // Round here is **CRUICIAL** otherwise the images are filtered and the performance sucks (more than expected). + // Round here is **CRUCIAL** otherwise the images are filtered + // and the performance sucks (more than expected). gContext.drawImage(gTiles[tileKey], Math.round(xoff), Math.round(yoff)); } else { @@ -257,34 +303,77 @@ 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); + var mappos = {x: Math.round((trackpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2), + y: Math.round((trackpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2)}; + + if (!gLastDrawnPoint || !gLastDrawnPoint.optimized) { + gContext.strokeStyle = gTrackColor; + gContext.fillStyle = gContext.strokeStyle; + gContext.lineWidth = gTrackWidth; + 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(mappos.x, mappos.y, 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(mappos.x, mappos.y); + if (!trackpoint.optimized) + gContext.stroke(); } - gLastTrackPoint = trackpoint; + gLastDrawnPoint = trackpoint; +} + +function drawCurrentLocation(trackPoint) { + var locpoint = gps2xy(trackPoint.coords.latitude, trackPoint.ccords.longitude); + var circleSize = gCurLocSize; + var mappos = {x: Math.round((locpoint.x - gPos.x) / gZoomFactor + gCanvas.width / 2), + y: Math.round((locpoint.y - gPos.y) / gZoomFactor + gCanvas.height / 2)}; + + // Initialize or draw cache. + if (!gCurPosMapCache) + gCurPosMapCache = {point: locpoint, + data: context.createImageData(circleSize, circleSize)}; + else + gContext.putImageData(gCurPosMapCache, mappos.x - circleSize / 2, + mappos.y - circleSize / 2); + + // Cache overdrawn area. + gCurPosMapCache = gContext.getImageData(mappos.x - circleSize / 2, + mappos.y - circleSize / 2, + circleSize, circleSize); + + gContext.strokeStyle = gCurLocColor; + gContext.fillStyle = gContext.strokeStyle; + gContext.beginPath(); + gContext.arc(mappos.x, mappos.y, + circleSize, 0, Math.PI * 2, false); + gContext.fill(); } var mapEvHandler = { @@ -298,21 +387,21 @@ var mapEvHandler = { return; // Bail out if the started touch can't be found. - if (touchEvent && zoomstart && - !aEvent.changedTouches.identifiedTouch(gZoomTouchID)) + if (touchEvent && gDragging && + !aEvent.changedTouches.identifiedTouch(gDragTouchID)) return; } var coordObj = touchEvent ? - aEvent.changedTouches.identifiedTouch(gZoomTouchID) : + aEvent.changedTouches.identifiedTouch(gDragTouchID) : aEvent; switch (aEvent.type) { case "mousedown": case "touchstart": if (touchEvent) { - zoomTouchID = aEvent.changedTouches.item(0).identifier; - coordObj = aEvent.changedTouches.identifiedTouch(gZoomTouchID); + gDragTouchID = aEvent.changedTouches.item(0).identifier; + coordObj = aEvent.changedTouches.identifiedTouch(gDragTouchID); } var x = coordObj.clientX - gCanvas.offsetLeft; var y = coordObj.clientY - gCanvas.offsetTop; @@ -322,6 +411,7 @@ var mapEvHandler = { } gLastMouseX = x; gLastMouseY = y; + showUI(); break; case "mousemove": case "touchmove": @@ -333,6 +423,7 @@ var mapEvHandler = { gPos.x -= dX * gZoomFactor; gPos.y -= dY * gZoomFactor; drawMap(); + showUI(); } gLastMouseX = x; gLastMouseY = y; @@ -340,6 +431,7 @@ var mapEvHandler = { case "mouseup": case "touchend": gDragging = false; + showUI(); break; case "mouseout": case "touchcancel": @@ -388,14 +480,26 @@ var mapEvHandler = { } }; -geofake = { +var geofake = { tracking: false, + lastPos: {x: undefined, y: undefined}, watchPosition: function(aSuccessCallback, aErrorCallback, aPrefObject) { this.tracking = true; var watchCall = function() { + // calc new position in lat/lon degrees + // 90° on Earth surface are ~10,000 km at the equator, + // so try moving at most 10m at a time + if (geofake.lastPos.x) + geofake.lastPos.x += (Math.random() - .5) * 90 / 1000000 + else + geofake.lastPos.x = 48.208174 + if (geofake.lastPos.y) + geofake.lastPos.y += (Math.random() - .5) * 90 / 1000000 + else + geofake.lastPos.y = 16.373819 aSuccessCallback({timestamp: Date.now(), - coords: {latitude: 48.208174, // + Math.random() - .5, - longitude: 16.373819, // + Math.random() - .5, + coords: {latitude: geofake.lastPos.x, + longitude: geofake.lastPos.y, accuracy: 20}}); if (geofake.tracking) setTimeout(watchCall, 1000); @@ -408,23 +512,73 @@ geofake = { } } +function setCentering(aCheckbox) { + if (gMapPrefsLoaded && mainDB) + gPrefs.set("center_map", aCheckbox.checked); + gCenterPosition = aCheckbox.checked; +} + +function setTracking(aCheckbox) { + if (gMapPrefsLoaded && mainDB) + gPrefs.set("tracking_enabled", aCheckbox.checked); + if (aCheckbox.checked) + startTracking(); + else + endTracking(); +} + function startTracking() { - if (navigator.geolocation) { - //gGeoWatchID = geofake.watchPosition( - gGeoWatchID = navigator.geolocation.watchPosition( + var loopCnt = 0; + var getStoredTrack = function() { + if (mainDB) + gTrackStore.getList(function(aTPoints) { + if (gDebug) + document.getElementById("debug").textContent = aTPoints.length + " points loaded."; + if (aTPoints.length) { + gTrack = aTPoints; + } + }); + else + setTimeout(getStoredTrack, 100); + loopCnt++; + if (loopCnt > 20) + return; + }; + getStoredTrack(); + if (gGeolocation) { + gGeoWatchID = gGeolocation.watchPosition( function(position) { // Coords spec: https://developer.mozilla.org/en/XPCOM_Interface_Reference/NsIDOMGeoPositionCoords - gTrack.push({time: position.timestamp, coords: position.coords}); - drawTrackPoint(position.coords.latitude, position.coords.longitude); - if (gCenterPosition) { - var posCoord = gps2xy(position.coords.latitude, position.coords.longitude); - if (Math.abs(gPos.x - posCoord.x) > gCanvas.width * gZoomFactor / 4 || - Math.abs(gPos.y - posCoord.y) > gCanvas.height * gZoomFactor / 4) { - gPos.x = posCoord.x; - gPos.y = posCoord.y; - drawMap(); + var tPoint = {time: position.timestamp, + 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}; + // Only add point to track is accuracy is good enough. + if (tPoint.coords.accuracy < gMinTrackAccuracy) { + gLastTrackPoint = tPoint; + gTrack.push(tPoint); + try { gTrackStore.push(tPoint); } catch(e) {} + var redrawn = false; + if (gCenterPosition) { + var posCoord = gps2xy(position.coords.latitude, + position.coords.longitude); + if (Math.abs(gPos.x - posCoord.x) > gCanvas.width * gZoomFactor / 4 || + Math.abs(gPos.y - posCoord.y) > gCanvas.height * gZoomFactor / 4) { + gPos.x = posCoord.x; + gPos.y = posCoord.y; + drawMap(); // This draws the current point as well. + redrawn = true; + } } + if (!redrawn) + drawTrackPoint(position.coords.latitude, position.coords.longitude, true); } + drawCurrentLocation(tPoint); }, function(error) { // Ignore erros for the moment, but this is good for debugging. @@ -438,6 +592,12 @@ function startTracking() { function endTracking() { if (gGeoWatchID) { - navigator.geolocation.clearWatch(gGeoWatchID); + gGeolocation.clearWatch(gGeoWatchID); } } + +function clearTrack() { + gTrack = []; + gTrackStore.clear(); + drawMap(); +}