0.07: Move to 96px tiles - less files (64 -> 25) and speed up rendering

apps.json

@@ -1464,7 +1464,7 @@
     "name": "OpenStreetMap",
     "shortName":"OpenStMap",
     "icon": "app.png",
-    "version":"0.06",
+    "version":"0.07",
     "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",

apps/openstmap/ChangeLog

@@ -4,3 +4,4 @@
 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

apps/openstmap/custom.html

@@ -50,16 +50,16 @@
 
 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;
+      var TILESIZE = 96; // Size of our tiles
+      var OSMTILESIZE = 256; // Size of openstreetmap tiles
+      var MAPSIZE = TILESIZE*5; ///< 480 - Size of map we download
+      var OSMTILECOUNT = 3; // how many tiles do we download in each direction (Math.floor(MAPSIZE / OSMTILESIZE)+1)
       /* 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
@@ -76,13 +76,14 @@ TODO:
       tileLayer.addTo(map);
 
       function tilesLoaded(ctx, width, height) {
-        var options = { compression:true, mode:"web", output:"string"};
+        var options = {
+          compression:false, output:"raw",
+          mode:"web"
+        };
         if (document.getElementById("3bit").checked) {
           options = {
-            compression:true,
-            //mode:"web",
+            compression:false, output:"raw",
             mode:"3bit", brightness:-64,
-            output:"string"
           };
         }
         console.log("Compression options", options);
@@ -103,8 +104,7 @@ TODO:
             imgstr = imgstr.slice(compress.length,-1);*/
             tiles.push({
               name:"openstmap-"+x+"-"+y+".img",
-              content:imgstr,
-              evaluate:true
+              content:imgstr
             });
           }
         }
@@ -125,10 +125,10 @@ TODO:
         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++) {
+        canvas.width = MAPSIZE;
+        canvas.height = MAPSIZE;
+        for (var i = 0; i < OSMTILECOUNT; i++) {
+            for (var j = 0; j < OSMTILECOUNT; j++) {
               (function(i,j){
                 var coords = new L.Point(center.x+i-1, center.y+j-1);
                 coords.z = zoom;