I've been meaning to fix this enough to upload it for a while.

Finally got it more or less working but I don't have time test it
properly. Still, it's a good start! PRs welcome :)

apps.json

@@ -1094,5 +1094,18 @@
       {"name":"minionclk.app.js","url":"app.js"},
       {"name":"minionclk.img","url":"app-icon.js","evaluate":true}
     ]
+  },
+  { "id": "openstmap",
+    "name": "OpenStreetMap",
+    "shortName":"OpenStMap",
+    "icon": "app.png",
+    "version":"0.01",
+    "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",
+    "storage": [
+      {"name":"openstmap.app.js","url":"app.js"},
+      {"name":"openstmap.img","url":"app-icon.js","evaluate":true}
+    ]
   }
 ]

apps/openstmap/ChangeLog

@@ -0,0 +1 @@
+0.01: New App!

apps/openstmap/app-icon.js

@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+AAOxAAIFCABmrwwRP/2yBJAvCAAYZJ2Wr1eHAAYSLAAQwP1YYHF4xEGCQovT2IYGFwIwDCIWAq1cwIABrtWwAaETZIuFCgIVDA4QvEBoNcq2s6/X2ezCQIDBwIKB2QBBF5ulAYQvI2IvBEQQAD1gACGQVXwKQPLwQwERwmrwFXLAJTDGAoACxFWF55VCGYSqCXYKOBrqHCAAXXAIQyExABBrjAOFQKSDMYQIBw9W2a7CFYiUGw4wBwTwPSQhmCGAJ7BAB4wDqwvIcwTnFYggFBrrjDRonX2ZnCSImHAQMrF5IAFLQQ3DrgtCRoYvDAQLJDF4ZgJOpAvBFgLtBXoIvHLgQCBF4QuCMAeIF5otCLwIuCw2B1mzEwQBB2etAAouEFoJgBSAwtE2IBCRYQvCwGIE4wACGQI0DGAwvGLopaBMIQvDwztBFQopBMQRkEF47AFRoy8Ga4KOBGAgpCSBoABF5mxRous1eBR4jmCSpAvHR4qJBAAYtCAYIvCAgWBEYZDDF4+yFwuyF4gmBGA4zD1gvCrovHE4JeFF4gNCLwgwBLQYvFAoOsw+rwQvDDwQwHBQ2y69dF4wnCGIelAga+B1bwBSAYkGLQQHF2fX2a+FSAoEB0oDCDwQvDlbxCKo4AGFwPXq4uFeAwuCF4RNBR4OswUslYvPFoPXxAuHF4ruEbAgvBq8rlgvN6wuB1iNGSAwrBMAitCcQOIq0rGBgtC2YTB1gvIQQLpDd4esAoIfCFwUrAYOBRZWzrtdVAIvISA+lFwIEBwGk1YuCF4IABEQIvG2eBq2I1eHF5RfCAAeIMIOxrgqBGIMrmNWrlcwAhBrmBAAdWwAWBxAMB1ZfLFoWsxBkCFwQABv9/qweBwAwDagQABAwIACwIgBLxLkCAAKSDFwiMCwWr2SACLYQ2BHIQACHIKRBF5CiBVIguIldcxGsJwIPCLAYsCwwABF4OswIvJc4QuLq2BfIIwDCYaRBRwiaCqwvILoIWB2IDBFxGAWoOIZgIUDa4YtEMQQuJCoYdBqwuIcoWrxJgBCwaVCFgQBCAALuJPQYuLAARDBSIJdBaoYuDAAdcF5QYB1guJLgOlFwKKCGAaUCXwxeJL4ZdJwLhCLoQAD1jDBF4ZeFF5mHFxGHRghdCGAg3C1YuGF5SbCFw1cFwexwFWCYJnBGAgvCFgmGXpIAD0mrFworB1YsDAAr4CGAQDBJoIsNAAfP1QuCg8AlcGC51cHxIAN1Wjg4wBDSoAUldVF1gA/AH4A5A"))

apps/openstmap/app.js

@@ -0,0 +1,68 @@
+var s = require("Storage");
+var map = s.readJSON("openstmap.json");
+
+map.center = Bangle.project({lat:map.lat,lon:map.lon});
+var lat = map.lat, lon = map.lon;
+var fix = {};
+
+
+function redraw() {
+  var cx = g.getWidth()/2;
+  var cy = g.getHeight()/2;
+  var p = Bangle.project({lat:lat,lon:lon});
+  var ix = (p.x-map.center.x)*4096/map.scale + (map.imgx/2) - cx;
+  var iy = (map.center.y-p.y)*4096/map.scale + (map.imgy/2) - cy;
+  //console.log(ix,iy);
+  var tx = 0|(ix/map.tilesize);
+  var ty = 0|(iy/map.tilesize);
+  var ox = (tx*map.tilesize)-ix;
+  var oy = (ty*map.tilesize)-iy;
+  for (var x=ox,ttx=tx;x<g.getWidth();x+=map.tilesize,ttx++) {
+    for (var y=oy,tty=ty;y<g.getHeight();y+=map.tilesize,tty++) {
+      var img = s.read("openstmap-"+ttx+"-"+tty+".img");
+      if (img) g.drawImage(img,x,y);
+      else {
+        g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1);
+        g.drawLine(x,y,x+map.tilesize-1,y+map.tilesize-1);
+        g.drawLine(x,y+map.tilesize-1,x+map.tilesize-1,y);
+      }
+    }
+  }
+  g.setColor(1,0,0);
+  /*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);
+}
+redraw();
+
+var fix;
+Bangle.on('GPS',function(f) {
+  fix=f;
+  g.clearRect(0,0,240,8);
+  g.setColor(1,1,1);
+  g.setFont("6x8");
+  g.setFontAlign(0,0);
+  var txt = fix.satellites+" satellites";
+  if (!fix.fix)
+    txt += " - NO FIX";
+  g.drawString(txt,120,4);
+  if (fix.fix) {
+    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();
+
+setWatch(function() {
+  if (!fix.fix) return;
+  lat = fix.lat;
+  lon = fix.lon;
+  redraw();
+}, BTN2, {repeat:true});

apps/openstmap/custom.html

@@ -0,0 +1,154 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
+    <link rel="stylesheet" href="../../css/spectre.min.css">
+  </head>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+      }
+      html, body, #map {
+        height: 100%;
+        width: 100%;
+      }
+      #map { z-index: 1; }
+      #controls {
+        padding: 10px;
+        margin: 10px;
+        border: 1px solid black;
+        position:absolute;
+        right:0px;top:0px;
+        background-color: rgb(255, 255, 255);
+        z-index: 100;
+      }
+      #maptiles {
+        width: 256px;
+        height: 256px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map">
+    </div>
+    <div id="controls">
+      <p>Zoom in to the area you want as a map</p>
+      <p>Click <button id="upload" class="btn btn-primary">Upload</button></p>
+      <canvas id="maptiles"></canvas>
+    </div>
+
+    <script src="../../lib/customize.js"></script>
+    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="https://espruino.github.io/EspruinoWebTools/heatshrink.js"></script>
+    <script src="https://espruino.github.io/EspruinoWebTools/imageconverter.js"></script>
+
+    <script>
+    /*
+
+TODO:
+
+* Could maybe use palettised output?
+* Could potentially use a custom 16 color palette?
+* Allow user to choose size of map area to be uploaded (small/med/large)
+* What is faster? Storing as a compressed image and decompressing, or storing decompressed?
+* Scaling for zoom levels
+
+    */
+      var TILESIZE = 64;
+      var OSMTILESIZE = 256;
+      var OSMSUBTILES = OSMTILESIZE / TILESIZE;
+      var map = L.map('map').locate({setView: true, maxZoom: 16});
+      var tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      //var tileLayer = L.tileLayer('http://a.tile.stamen.com/toner/{z}/{x}/{y}.png', { // black and white
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
+      });
+      tileLayer.addTo(map);
+
+      function tilesLoaded(ctx, width, height) {
+        var options = { compression:true, mode:"web", output:"string"};
+        var w = Math.round(width / TILESIZE);
+        var h = Math.round(height / TILESIZE);
+        var tiles = [];
+        for (var y=0;y<h;y++) {
+          for (var x=0;x<w;x++) {
+            var imageData = ctx.getImageData(x*TILESIZE, y*TILESIZE, TILESIZE, TILESIZE);
+            var rgba = imageData.data;
+            options.rgbaOut = rgba;
+            options.width = TILESIZE;
+            options.height = TILESIZE;
+            var imgstr = imageconverter.RGBAtoString(rgba, options);
+            ctx.putImageData(imageData,x*TILESIZE, y*TILESIZE);
+            /*var compress = 'require("heatshrink").decompress('
+            if (!imgstr.startsWith(compress)) throw "Data in wrong format";
+            imgstr = imgstr.slice(compress.length,-1);*/
+            tiles.push({
+              name:"openstmap-"+x+"-"+y+".img",
+              content:imgstr,
+              evaluate:true
+            });
+          }
+        }
+        return tiles;
+      }
+
+      document.getElementById("upload").addEventListener("click", function() {
+        var bounds = map.getBounds();
+        var zoom = map.getZoom();
+        var centerlatlon = bounds.getCenter();
+        var center = map.project(centerlatlon, zoom).divideBy(256);
+        var ox = Math.round((center.x - Math.floor(center.x)) * OSMTILESIZE);
+        var oy = Math.round((center.y - Math.floor(center.y)) * OSMTILESIZE);
+        center = center.floor();
+        var tileGetters = [];
+
+        // Render everything to a canvas - 512 x 512 px
+        var canvas = document.getElementById("maptiles");
+        var ctx = canvas.getContext('2d');
+        canvas.width = OSMTILESIZE*2;
+        canvas.height = OSMTILESIZE*2;
+        for (var i = 0; i < 3; i++) {
+            for (var j = 0; j < 3; j++) {
+              (function(i,j){
+                var coords = new L.Point(center.x+i-1, center.y+j-1);
+                coords.z = zoom;
+                var img = new Image();
+                img.crossOrigin = "Anonymous";
+                tileGetters.push(new Promise(function(resolve,reject) {
+                  img.onload = function(){
+                    ctx.drawImage(img,i*OSMTILESIZE - ox, j*OSMTILESIZE - oy);
+                    resolve();
+                  };
+                }));
+                img.src = tileLayer.getTileUrl(coords);
+              })(i,j);
+            }
+        }
+
+
+        Promise.all(tileGetters).then(() => {
+          var files = tilesLoaded(ctx, canvas.width, canvas.height);
+          files.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
+            lat : centerlatlon.lat,
+            lon : centerlatlon.lng
+          })});
+          files.unshift({"name":"openstmap.app.js","url":"app.js"});
+          files.unshift({"name":"openstmap.img","url":"app-icon.js","evaluate":true});
+
+          console.log(files);
+          sendCustomizedApp({
+            storage:files
+          });
+        });
+
+
+      });
+
+    </script>
+  </body>
+</html>