OpenStreetMap: Fix marker position, color, and map scaling

apps.json

@@ -1099,7 +1099,7 @@
     "name": "OpenStreetMap",
     "shortName":"OpenStMap",
     "icon": "app.png",
-    "version":"0.01",
+    "version":"0.02",
     "description": "[BETA] Loads map tiles from OpenStreetMap onto your Bangle.js and displays a map of where you are",
     "tags": "outdoors,gps",
     "custom": "custom.html",
@@ -1118,7 +1118,7 @@
     "storage": [
       {"name":"tabata.app.js","url":"tabata.js"},
       {"name":"tabata.img","url":"tabata-icon.js","evaluate":true}
-    ]  
+    ]
   },
   { "id": "custom",
     "name": "Custom Boot Code ",

apps/openstmap/ChangeLog

@@ -1 +1,2 @@
 0.01: New App!
+0.02: Fix marker position, color, and map scaling

apps/openstmap/app.js

@@ -28,14 +28,24 @@ function redraw() {
       }
     }
   }
-  g.setColor(1,0,0);
+  drawMarker();
-  /*g.fillRect(cx-10,cy-1,cx+10,cy+1);
-  g.fillRect(cx-1,cy-10,cx+1,cy+10);*/
-  if (fix.fix)
-    g.fillRect(cx-2,cy-2,cx+2,cy+2);
 }
+
+function drawMarker() {
+  if (!fix.fix) return;
+  var p = Bangle.project({lat:lat,lon:lon});
+  var q = Bangle.project(fix);
+  var cx = g.getWidth()/2;
+  var cy = g.getHeight()/2;
+  var ix = (q.x-p.x)*4096/map.scale + cx;
+  var iy = cy - (q.y-p.y)*4096/map.scale;
+  g.setColor(1,0,0);
+  g.fillRect(ix-2,iy-2,ix+2,iy+2);
+}
+
 redraw();
 
+
 var fix;
 Bangle.on('GPS',function(f) {
   fix=f;
@@ -47,15 +57,7 @@ Bangle.on('GPS',function(f) {
   if (!fix.fix)
     txt += " - NO FIX";
   g.drawString(txt,120,4);
-  if (fix.fix) {
+  drawMarker();
-    var p = Bangle.project({lat:lat,lon:lon});
-    var q = Bangle.project(fix);
-    var cx = g.getWidth()/2;
-    var cy = g.getHeight()/2;
-    var ix = (q.x-p.x)*4096/map.scale + cx;
-    var iy = (q.y-p.y)*4096/map.scale + cy;
-    g.fillRect(ix-2,iy-2,ix+2,iy+2);
-  }
 });
 Bangle.setGPSPower(1);
 redraw();

apps/openstmap/custom.html

@@ -32,9 +32,10 @@
     <div id="map">
     </div>
     <div id="controls">
-      <p>Zoom in to the area you want as a map</p>
+      <button id="getmap" class="btn btn-primary">Get Map</button><br/>
-      <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
+      <canvas id="maptiles" style="display:none"></canvas>
-      <canvas id="maptiles"></canvas>
+      <div id="uploadbuttons" style="display:none"><button id="upload" class="btn btn-primary">Upload</button>
+      <button id="cancel" class="btn">Cancel</button></div>
     </div>
 
     <script src="../../lib/customize.js"></script>
@@ -64,6 +65,7 @@ TODO:
         maxZoom: 18,
         attribution: 'Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
       });
+      var mapFiles = [];
       tileLayer.addTo(map);
 
       function tilesLoaded(ctx, width, height) {
@@ -93,7 +95,7 @@ TODO:
         return tiles;
       }
 
-      document.getElementById("upload").addEventListener("click", function() {
+      document.getElementById("getmap").addEventListener("click", function() {
         var bounds = map.getBounds();
         var zoom = map.getZoom();
         var centerlatlon = bounds.getCenter();
@@ -105,6 +107,7 @@ TODO:
 
         // Render everything to a canvas - 512 x 512 px
         var canvas = document.getElementById("maptiles");
+        canvas.style.display="";
         var ctx = canvas.getContext('2d');
         canvas.width = OSMTILESIZE*2;
         canvas.height = OSMTILESIZE*2;
@@ -128,25 +131,32 @@ TODO:
 
 
         Promise.all(tileGetters).then(() => {
-          var files = tilesLoaded(ctx, canvas.width, canvas.height);
+          document.getElementById("uploadbuttons").style.display="";
-          files.unshift({name:"openstmap.json",content:JSON.stringify({
+          mapFiles = tilesLoaded(ctx, canvas.width, canvas.height);
+          mapFiles.unshift({name:"openstmap.json",content:JSON.stringify({
             imgx : canvas.width,
             imgy : canvas.height,
             tilesize : TILESIZE,
-            scale : 10000*Math.pow(2,zoom-16), // FIXME - this is probably wrong
+            scale : 10000*Math.pow(2,16-zoom), // FIXME - this is probably wrong
             lat : centerlatlon.lat,
             lon : centerlatlon.lng
           })});
-          files.unshift({"name":"openstmap.app.js","url":"app.js"});
+          mapFiles.unshift({"name":"openstmap.app.js","url":"app.js"});
-          files.unshift({"name":"openstmap.img","url":"app-icon.js","evaluate":true});
+          mapFiles.unshift({"name":"openstmap.img","url":"app-icon.js","evaluate":true});
 
-          console.log(files);
+          console.log(mapFiles);
-          sendCustomizedApp({
-            storage:files
-          });
         });
+      });
 
+      document.getElementById("upload").addEventListener("click", function() {
+        sendCustomizedApp({
+          storage:mapFiles
+        });
+      });
 
+      document.getElementById("cancel").addEventListener("click", function() {
+        document.getElementById("maptiles").style.display="none";
+        document.getElementById("uploadbuttons").style.display="none";
       });
 
     </script>