From: Robert Kaiser <kairo@kairo.at>
Date: Sun, 16 Dec 2012 14:48:29 +0000 (+0100)
Subject: display actions, adjust mapquest open arial URLs, don't overwrite real tiles with...
X-Git-Tag: legacy-preGL~42
X-Git-Url: https://git-public.kairo.at//?a=commitdiff_plain;h=68afcd960381dcd51be0161c69cad4161313c6d0;p=lantea.git
display actions, adjust mapquest open arial URLs, don't overwrite real tiles with the loading tile
---
diff --git a/TODO b/TODO
index 166303d..bc104a0 100644
--- a/TODO
+++ b/TODO
@@ -6,7 +6,7 @@ Required:
** Use an intelligent algorithm to automatically try (async) updating tiles if they have a certain age
*** If they have changed, possibly also try (async) updates of other cached zoom levels covering this area
** Clear cached tiles option
-* Find the bug that messes up the display when panning on not fully loaded tiles (web connection down)
+** Pre-cache tiles in adjecent areas and possibly zoom levels
* Show a notification when we are loading tiles or saved data
* Display length and duration of track
* Display movement speed
diff --git a/index.html b/index.html
index a3cb130..2a73e5a 100644
--- a/index.html
+++ b/index.html
@@ -6,9 +6,9 @@
<html manifest="manifest.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <!-- try to counts default scaling on mobile, see
+ <!-- try to force a 1:1 scaling on mobile, see
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=.6667, maximum-scale=.6667">
+ <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
<title>Lantea Maps</title>
<script src="js/map.js" type="application/javascript;version=1.8"></script>
<script src="js/ui.js" type="application/javascript;version=1.8"></script>
@@ -59,7 +59,10 @@ Map style:
onclick="toggleFullscreen();">
</div>
-<p id="debug" class="debugHide"></p>
+<p id="action">
+ <img id="actionimg" src="style/loading_action.png">
+ <span id="actionlabel">Loading</span>…
+</p>
<p id="copyright" class="overlayArea"></p>
<canvas id="map" width="500" height="500">
diff --git a/js/map.js b/js/map.js
index a8105ae..b5fe9e2 100644
--- a/js/map.js
+++ b/js/map.js
@@ -35,7 +35,7 @@ var gMapStyles = {
copyright: 'Map data © <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://oatile[1-4].mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg",
+ 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",
@@ -297,13 +297,16 @@ function drawMap(aPixels, aOverdraw) {
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++) { // slow script warnings on the tablet appear here!
// Only go to the drawing step if we need to draw this tile.
- if (x < tiles.left || x > tiles.right || y < tiles.top || y > tiles.bottom) {
+ if (x < tiles.left || x > tiles.right ||
+ y < tiles.top || y > tiles.bottom) {
// Round here is **CRUCIAL** otherwise the images are filtered
// and the performance sucks (more than expected).
var xoff = Math.round((x * size - xMin) / gZoomFactor);
var yoff = Math.round((y * size - yMin) / gZoomFactor);
// Draw placeholder tile unless we overdraw.
- if (!aOverdraw)
+ if (!aOverdraw &&
+ (x < tiles.left -1 || x > tiles.right + 1 ||
+ y < tiles.top -1 || y > tiles.bottom + 1))
gMapContext.drawImage(gLoadingTile, xoff, yoff);
// Initiate loading/drawing of the actual tile.
@@ -575,8 +578,14 @@ function setTracking(aCheckbox) {
function startTracking() {
if (gGeolocation) {
+ gActionLabel.textContent = "Establishing Position";
+ gAction.style.display = "block";
gGeoWatchID = gGeolocation.watchPosition(
function(position) {
+ if (gActionLabel.textContent) {
+ gActionLabel.textContent = "";
+ gAction.style.display = "none";
+ }
// Coords spec: https://developer.mozilla.org/en/XPCOM_Interface_Reference/NsIDOMGeoPositionCoords
var tPoint = {time: position.timestamp,
coords: {latitude: position.coords.latitude,
@@ -622,6 +631,10 @@ function startTracking() {
}
function endTracking() {
+ if (gActionLabel.textContent) {
+ gActionLabel.textContent = "";
+ gAction.style.display = "none";
+ }
if (gGeoWatchID) {
gGeolocation.clearWatch(gGeoWatchID);
}
diff --git a/js/ui.js b/js/ui.js
index bc3303d..2ff241f 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -8,8 +8,12 @@ var mainDB;
var gUIHideCountdown = 0;
var gWaitCounter = 0;
+var gAction, gActionLabel;
window.onload = function() {
+ gAction = document.getElementById("action");
+ gActionLabel = document.getElementById("actionlabel");
+
var mSel = document.getElementById("mapSelector");
for (var mapStyle in gMapStyles) {
var opt = document.createElement("option");
@@ -51,6 +55,8 @@ window.onload = function() {
gMapPrefsLoaded = true;
resizeAndDraw();
+ gActionLabel.textContent = "";
+ gAction.style.display = "none";
setTracking(document.getElementById("trackCheckbox"));
}
else
diff --git a/style/lantea.css b/style/lantea.css
index 03af2d1..3d2aa8c 100644
--- a/style/lantea.css
+++ b/style/lantea.css
@@ -5,6 +5,7 @@
body {
font-family: sans-serif;
margin: 0;
+ background: url("loading.png") repeat;
}
h1 {
@@ -85,11 +86,7 @@ h1 {
z-index: 1;
}
-#map {
- background: url("style/loading.png") repeat;
-}
-
-#debug {
+#action {
position: absolute;
bottom: 5px;
left: .5em;
@@ -100,6 +97,10 @@ h1 {
padding: 0 3px;
}
+#actionimg {
+ vertical-align: text-bottom;
+}
+
.debugHide {
display: none;
}