openstreetmap 0.11: Add slight offset to OSM data to align it properly

+      Fix alignment of satellite info text (fix #984)

apps.json

@@ -1955,11 +1955,12 @@
     "id": "openstmap",
     "name": "OpenStreetMap",
     "shortName": "OpenStMap",
-    "version": "0.10",
-    "description": "[BETA] Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are",
+    "version": "0.11",
+    "description": "Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are. Once installed this also adds map functionality to `GPS Recorder` and `Recorder` apps",
     "icon": "app.png",
-    "tags": "outdoors,gps",
+    "tags": "outdoors,gps,osm",
     "supports": ["BANGLEJS","BANGLEJS2"],
+    "screenshots": [{"url":"screenshot.png"}],
     "custom": "custom.html",
     "customConnect": true,
     "storage": [

apps/openstmap/ChangeLog

@@ -8,3 +8,5 @@
 0.08: Update for drag event refactor
 0.09: Use current theme cols when drawing GPS info
 0.10: Improve scale factor calculation to fix scaling issues (#984)
+0.11: Add slight offset to OSM data to align it properly (fix #984)
+      Fix alignment of satellite info text

apps/openstmap/app.js

@@ -25,11 +25,11 @@ function drawMarker() {
 var fix;
 Bangle.on('GPS',function(f) {
   fix=f;
-  g.reset().clearRect(0,y1,240,y1+8).setFont("6x8").setFontAlign(0,0);
+  g.reset().clearRect(0,y1,g.getWidth()-1,y1+8).setFont("6x8").setFontAlign(0,0);
   var txt = fix.satellites+" satellites";
   if (!fix.fix)
     txt += " - NO FIX";
-  g.drawString(txt,120,y1 + 4);
+  g.drawString(txt,g.getWidth()/2,y1 + 4);
   drawMarker();
 });
 Bangle.setGPSPower(1, "app");

apps/openstmap/custom.html

@@ -132,8 +132,10 @@ TODO:
         var zoom = map.getZoom();
         var centerlatlon = map.getBounds().getCenter();
         var center = map.project(centerlatlon, zoom).divideBy(OSMTILESIZE);
-        var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE);
-        var oy = Math.round((center.y - Math.floor(center.y)) * OSMTILESIZE);
+        // Reason for 16px adjustment below not 100% known, but it seems to
+        // align everything perfectly: https://github.com/espruino/BangleApps/issues/984
+        var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE) + 16;
+        var oy = Math.round((center.y - Math.floor(center.y)) * OSMTILESIZE) + 16;
         center = center.floor(); // make sure we're in the middle of a tile
         // JS version of Bangle.js's projection
         function bproject(lat, lon) {
@@ -155,8 +157,15 @@ TODO:
         var bd = bproject(pd.lat, pd.lng)
         var scale = bc.distanceTo(bd);
 
-        var tileGetters = [];
+        // test
+        /*var p = bproject(centerlatlon.lat, centerlatlon.lng);
+        var q = bproject(mylat, mylon);
+        var testPt = {
+          x : (q.x-p.x)/scale + (MAPSIZE/2),
+          y : (MAPSIZE/2) - (q.y-p.y)/scale
+        };*/
 
+        var tileGetters = [];
         // Render everything to a canvas...
         var canvas = document.getElementById("maptiles");
         canvas.style.display="";
@@ -173,6 +182,11 @@ TODO:
                 tileGetters.push(new Promise(function(resolve,reject) {
                   img.onload = function(){
                     ctx.drawImage(img,i*OSMTILESIZE - ox, j*OSMTILESIZE - oy);
+                    /*if (testPt) {
+                      ctx.fillStyle="green";
+                      ctx.fillRect(testPt.x-1, testPt.y-5, 3,10);
+                      ctx.fillRect(testPt.x-5, testPt.y-1, 10,3);
+                    }*/
                     resolve();
                   };
                 }));