diff --git a/apps/seachart/ChangeLog b/apps/seachart/ChangeLog
new file mode 100644
index 000000000..6cb9d061e
--- /dev/null
+++ b/apps/seachart/ChangeLog
@@ -0,0 +1,12 @@
+0.01: New App!
+0.02: Fix marker position, color, and map scaling
+0.03: Show widgets (mainly so we can use the GPS recorder widget)
+0.04: Move map rendering to a module (fix #396)
+0.05: Show currently active gpsrec GPS trace (fix #395)
+0.06: Add support for scrolling, option for 3 bit maps
+0.07: Move to 96px tiles - less files (64 -> 25) and speed up rendering
+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
diff --git a/apps/seachart/app-48.png b/apps/seachart/app-48.png
new file mode 100644
index 000000000..b3e3c1047
Binary files /dev/null and b/apps/seachart/app-48.png differ
diff --git a/apps/seachart/app-icon.js b/apps/seachart/app-icon.js
new file mode 100644
index 000000000..be06afe32
--- /dev/null
+++ b/apps/seachart/app-icon.js
@@ -0,0 +1 @@
+require("heatshrink").decompress(atob("mEwxH+AAOxAAIFCABmrwwRP/2yBJAvCAAYZJ2Wr1eHAAYSLAAQwP1YYHF4xEGCQovT2IYGFwIwDCIWAq1cwIABrtWwAaETZIuFCgIVDA4QvEBoNcq2s6/X2ezCQIDBwIKB2QBBF5ulAYQvI2IvBEQQAD1gACGQVXwKQPLwQwERwmrwFXLAJTDGAoACxFWF55VCGYSqCXYKOBrqHCAAXXAIQyExABBrjAOFQKSDMYQIBw9W2a7CFYiUGw4wBwTwPSQhmCGAJ7BAB4wDqwvIcwTnFYggFBrrjDRonX2ZnCSImHAQMrF5IAFLQQ3DrgtCRoYvDAQLJDF4ZgJOpAvBFgLtBXoIvHLgQCBF4QuCMAeIF5otCLwIuCw2B1mzEwQBB2etAAouEFoJgBSAwtE2IBCRYQvCwGIE4wACGQI0DGAwvGLopaBMIQvDwztBFQopBMQRkEF47AFRoy8Ga4KOBGAgpCSBoABF5mxRous1eBR4jmCSpAvHR4qJBAAYtCAYIvCAgWBEYZDDF4+yFwuyF4gmBGA4zD1gvCrovHE4JeFF4gNCLwgwBLQYvFAoOsw+rwQvDDwQwHBQ2y69dF4wnCGIelAga+B1bwBSAYkGLQQHF2fX2a+FSAoEB0oDCDwQvDlbxCKo4AGFwPXq4uFeAwuCF4RNBR4OswUslYvPFoPXxAuHF4ruEbAgvBq8rlgvN6wuB1iNGSAwrBMAitCcQOIq0rGBgtC2YTB1gvIQQLpDd4esAoIfCFwUrAYOBRZWzrtdVAIvISA+lFwIEBwGk1YuCF4IABEQIvG2eBq2I1eHF5RfCAAeIMIOxrgqBGIMrmNWrlcwAhBrmBAAdWwAWBxAMB1ZfLFoWsxBkCFwQABv9/qweBwAwDagQABAwIACwIgBLxLkCAAKSDFwiMCwWr2SACLYQ2BHIQACHIKRBF5CiBVIguIldcxGsJwIPCLAYsCwwABF4OswIvJc4QuLq2BfIIwDCYaRBRwiaCqwvILoIWB2IDBFxGAWoOIZgIUDa4YtEMQQuJCoYdBqwuIcoWrxJgBCwaVCFgQBCAALuJPQYuLAARDBSIJdBaoYuDAAdcF5QYB1guJLgOlFwKKCGAaUCXwxeJL4ZdJwLhCLoQAD1jDBF4ZeFF5mHFxGHRghdCGAg3C1YuGF5SbCFw1cFwexwFWCYJnBGAgvCFgmGXpIAD0mrFworB1YsDAAr4CGAQDBJoIsNAAfP1QuCg8AlcGC51cHxIAN1Wjg4wBDSoAUldVF1gA/AH4A5A"))
diff --git a/apps/seachart/app.js b/apps/seachart/app.js
new file mode 100644
index 000000000..62597ca20
--- /dev/null
+++ b/apps/seachart/app.js
@@ -0,0 +1,71 @@
+var m = require("openstmap");
+var HASWIDGETS = true;
+var y1,y2;
+var fix = {};
+
+function redraw() {
+  g.setClipRect(0,y1,g.getWidth()-1,y2);
+  m.draw();
+  drawMarker();
+  if (WIDGETS["gpsrec"] && WIDGETS["gpsrec"].plotTrack) {
+    g.flip(); // force immediate draw on double-buffered screens - track will update later
+    g.setColor(0.75,0.2,0);
+    WIDGETS["gpsrec"].plotTrack(m);
+  }
+  g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
+}
+
+function drawMarker() {
+  if (!fix.fix) return;
+  var p = m.latLonToXY(fix.lat, fix.lon);
+  g.setColor(1,0,0);
+  g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
+}
+
+var fix;
+Bangle.on('GPS',function(f) {
+  fix=f;
+  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,g.getWidth()/2,y1 + 4);
+  drawMarker();
+});
+Bangle.setGPSPower(1, "app");
+
+if (HASWIDGETS) {
+  Bangle.loadWidgets();
+  Bangle.drawWidgets();
+  y1 = 24;
+  var hasBottomRow = Object.keys(WIDGETS).some(w=>WIDGETS[w].area[0]=="b");
+  y2 = g.getHeight() - (hasBottomRow ? 24 : 1);
+} else {
+  y1=0;
+  y2=g.getHeight()-1;
+}
+
+redraw();
+
+function recenter() {
+  if (!fix.fix) return;
+  m.lat = fix.lat;
+  m.lon = fix.lon;
+  redraw();
+}
+
+setWatch(recenter, global.BTN2?BTN2:BTN1, {repeat:true});
+
+var hasScrolled = false;
+Bangle.on('drag',e=>{
+  if (e.b) {
+    g.setClipRect(0,y1,g.getWidth()-1,y2);
+    g.scroll(e.dx,e.dy);
+    m.scroll(e.dx,e.dy);
+    g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
+    hasScrolled = true;
+  } else if (hasScrolled) {
+    hasScrolled = false;
+    redraw();
+  }
+});
diff --git a/apps/seachart/app.png b/apps/seachart/app.png
new file mode 100644
index 000000000..9047fce33
Binary files /dev/null and b/apps/seachart/app.png differ
diff --git a/apps/seachart/custom.html b/apps/seachart/custom.html
new file mode 100644
index 000000000..aba93542b
--- /dev/null
+++ b/apps/seachart/custom.html
@@ -0,0 +1,244 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
+    <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch@3.6.0/dist/geosearch.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">
+      <div style="display:inline-block;text-align:center;vertical-align: top;"> <input type="checkbox" id="3bit"></input><br/><span>3 bit</span></div>
+      <button id="getmap" class="btn btn-primary">Get Map</button><br/>
+      <canvas id="maptiles" style="display:none"></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="../../core/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="../../core/lib/heatshrink.js"></script>
+    <script src="../../core/lib/imageconverter.js"></script>
+    <script src="https://unpkg.com/leaflet-geosearch@3.6.0/dist/bundle.min.js"></script>
+
+    <script>
+    /*
+
+TODO:
+
+* Allow a larger tilesize. Currently we use 'evaluate:true' which means we can only send 64x64x8 bit, but with some tweaking we could send 128x128 which would reduce the number of files and make things a bit snappier
+* 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?
+
+    */
+      var TILESIZE = 64;
+      var OSMTILESIZE = 256;
+      var OSMSUBTILES = OSMTILESIZE / TILESIZE;
+      /* Can see possible tiles on http://leaflet-extras.github.io/leaflet-providers/preview/
+      However some don't allow cross-origin use */
+      var TILELAYER = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'; // simple, high contrast
+      var PREVIEWTILELAYER = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+      //var TILELAYER = 'http://a.tile.stamen.com/toner/{z}/{x}/{y}.png'; // black and white
+
+      // Create map and try and set the location to where the browser thinks we are
+      var map = L.map('map').locate({setView: true, maxZoom: 16, enableHighAccuracy:true});
+      // Tiles used for Bangle.js itself
+      var bangleTileLayer = L.tileLayer(TILELAYER, {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
+      });
+      // Tiles used for the may the user sees (faster)
+      var previewTileLayer = L.tileLayer(PREVIEWTILELAYER, {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
+      });
+      // Could optionally overlay trails: https://wiki.openstreetmap.org/wiki/Tiles
+
+      var mapFiles = [];
+      previewTileLayer.addTo(map);
+
+      function tilesLoaded(ctx, width, height) {
+        var options = { compression:true, mode:"web", output:"string"};
+        if (document.getElementById("3bit").checked) {
+          options = {
+            compression:false, output:"raw",
+            mode:"3bit",
+          };
+          /* If in 3 bit mode, go through all the data beforehand and
+          turn the saturation up to maximum, so when thresholded it
+          works a lot better */
+          var imageData = ctx.getImageData(0,0,width,height);
+          var rgba = imageData.data;
+          var l = width*height*4;
+          for (var i=0;i<l;i+=4) {
+             var min = Math.min(rgba[i+0],rgba[i+1],rgba[i+2]);
+             var max = Math.max(rgba[i+0],rgba[i+1],rgba[i+2]);
+             var d = max-min;
+             if (max<120) { // black
+               rgba[i+0]=0;
+               rgba[i+1]=0;
+               rgba[i+2]=0;
+             } else if (min>240 || d<8) { // white or grey
+               rgba[i+0]=255;
+               rgba[i+1]=255;
+               rgba[i+2]=255;
+             } else { // another colour - use max saturation
+               rgba[i+0] = (rgba[i+0]-min) * 255 / d;
+               rgba[i+1] = (rgba[i+1]-min) * 255 / d;
+               rgba[i+2] = (rgba[i+2]-min) * 255 / d;
+             }
+          }
+          ctx.putImageData(imageData,0,0);
+        }
+        console.log("Compression options", options);
+        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); // write preview
+            /*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("getmap").addEventListener("click", function() {
+        var zoom = map.getZoom();
+        var centerlatlon = map.getBounds().getCenter();
+        var center = map.project(centerlatlon, zoom).divideBy(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) {
+          const degToRad = Math.PI / 180; // degree to radian conversion
+          const latMax = 85.0511287798; // clip latitude to sane values
+          const R = 6378137; // earth radius in m
+          if (lat > latMax) lat=latMax;
+          if (lat < -latMax) lat=-latMax;
+          var s = Math.sin(lat * degToRad);
+          return new L.Point(
+            (R * lon * degToRad),
+            (R * Math.log((1 + s) / (1 - s)) / 2)
+          );
+        }
+        // Work out scale factors (how much from Bangle.project does one pixel equate to?)
+        var pc = map.unproject(center.multiplyBy(OSMTILESIZE), zoom);
+        var pd = map.unproject(center.multiplyBy(OSMTILESIZE).add({x:1,y:0}), zoom);
+        var bc = bproject(pc.lat, pc.lng)
+        var bd = bproject(pd.lat, pd.lng)
+        var scale = bc.distanceTo(bd);
+
+        // 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="";
+        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);
+                    /*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();
+                  };
+                }));
+                bangleTileLayer._tileZoom = previewTileLayer._tileZoom;
+                img.src = bangleTileLayer.getTileUrl(coords);
+              })(i,j);
+            }
+        }
+
+
+        Promise.all(tileGetters).then(() => {
+          document.getElementById("uploadbuttons").style.display="";
+          mapFiles = tilesLoaded(ctx, canvas.width, canvas.height);
+          mapFiles.unshift({name:"seachart.json",content:JSON.stringify({
+            imgx : canvas.width,
+            imgy : canvas.height,
+            tilesize : TILESIZE,
+            scale : scale, // how much of Bangle.project(latlon) does one pixel equate to?
+            lat : centerlatlon.lat,
+            lon : centerlatlon.lng
+          })});
+          console.log(mapFiles);
+        });
+      });
+
+      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>
+  </body>
+</html>
diff --git a/apps/seachart/metadata.json b/apps/seachart/metadata.json
new file mode 100644
index 000000000..130f33e31
--- /dev/null
+++ b/apps/seachart/metadata.json
@@ -0,0 +1,18 @@
+{
+  "id": "openseachart",
+  "name": "OpenSeaChart",
+  "shortName": "Openseachart",
+  "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,osm",
+  "supports": ["BANGLEJS","BANGLEJS2"],
+  "screenshots": [{"url":"screenshot.png"}],
+  "custom": "custom.html",
+  "customConnect": true,
+  "storage": [
+    {"name":"openseachart","url":"openseachart.js"},
+    {"name":"openseachart.app.js","url":"app.js"},
+    {"name":"openseachart.img","url":"app-icon.js","evaluate":true}
+  ]
+}
diff --git a/apps/seachart/openseachart.js b/apps/seachart/openseachart.js
new file mode 100644
index 000000000..db1f3524b
--- /dev/null
+++ b/apps/seachart/openseachart.js
@@ -0,0 +1,71 @@
+/* OpenStreetMap plotting module.
+
+Usage:
+
+var m = require("openseachart");
+// m.lat/lon are now the center of the loaded map
+m.draw(); // draw centered on the middle of the loaded map
+
+// plot gps position on map
+Bangle.on('GPS',function(f) {
+  if (!f.fix) return;
+  var p = m.latLonToXY(fix.lat, fix.lon);
+  g.fillRect(p.x-2, p.y-2, p.x+2, p.y+2);
+});
+
+// recenter and redraw map!
+function center() {
+  m.lat = fix.lat;
+  m.lon = fix.lon;
+  m.draw();
+}
+
+*/
+
+var map = require("Storage").readJSON("openseachart.json");
+map.center = Bangle.project({lat:map.lat,lon:map.lon});
+exports.map = map;
+exports.lat = map.lat; // actual position of middle of screen
+exports.lon = map.lon;  // actual position of middle of screen
+var m = exports;
+
+exports.draw = function() {
+  var s = require("Storage");
+  var cx = g.getWidth()/2;
+  var cy = g.getHeight()/2;
+  var p = Bangle.project({lat:m.lat,lon:m.lon});
+  var ix = (p.x-map.center.x)/map.scale + (map.imgx/2) - cx;
+  var iy = (map.center.y-p.y)/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("openseachart-"+ttx+"-"+tty+".img");
+      if (img) g.drawImage(img,x,y);
+      else g.clearRect(x,y,x+map.tilesize-1,y+map.tilesize-1).drawLine(x,y,x+map.tilesize-1,y+map.tilesize-1).drawLine(x,y+map.tilesize-1,x+map.tilesize-1,y);
+    }
+  }
+};
+
+/// Convert lat/lon to pixels on the screen
+exports.latLonToXY = function(lat, lon) {
+  var p = Bangle.project({lat:m.lat,lon:m.lon});
+  var q = Bangle.project({lat:lat, lon:lon});
+  var cx = g.getWidth()/2;
+  var cy = g.getHeight()/2;
+  return {
+    x : (q.x-p.x)/map.scale + cx,
+    y : cy - (q.y-p.y)/map.scale
+  };
+};
+
+/// Given an amount to scroll in pixels on the screen, adjust the lat/lon of the map to match
+exports.scroll = function(x,y) {
+  var a = Bangle.project({lat:this.lat,lon:this.lon});
+  var b = Bangle.project({lat:this.lat+1,lon:this.lon+1});
+  this.lon += x * this.map.scale / (a.x-b.x);
+  this.lat -= y * this.map.scale / (a.y-b.y);
+};
diff --git a/apps/seachart/screenshot.png b/apps/seachart/screenshot.png
new file mode 100644
index 000000000..2895b562e
Binary files /dev/null and b/apps/seachart/screenshot.png differ