Fix HiDPI tiles

src/app.js

@@ -28,7 +28,9 @@ var getScale = function(scale) {
 };
 
 mbgl.on('message', function(e) {
+  if (e.severity == 'WARNING' || e.severity == 'ERROR') {
     console.log('mbgl:', e);
+  }
 });
 
 module.exports = function(maps, options, prefix) {
@@ -46,16 +48,17 @@ module.exports = function(maps, options, prefix) {
 
   var styleUrl = options.style;
   var map = {
-    renderer: null,
+    renderers: [],
     sources: {},
     tileJSON: {}
   };
   if (!maps[prefix]) {
-    map.renderer = new mbgl.Map({
+    var createRenderer = function(ratio) {
-      ratio: 0.5,
+      return new mbgl.Map({
+        ratio: ratio,
         request: function(req, callback) {
           var protocol = req.url.split(':')[0];
-        console.log('Handling request:', req);
+          //console.log('Handling request:', req);
           if (protocol == req.url) {
             fs.readFile(path.join(rootPath, unescape(req.url)), function(err, data) {
               callback(err, { data: data });
@@ -68,7 +71,7 @@ module.exports = function(maps, options, prefix) {
                 y = parts[5].split('.')[0] | 0;
             source.getTile(z, x, y, function(err, data, headers) {
               if (err) {
-              console.log('MBTiles error, serving empty');
+                //console.log('MBTiles error, serving empty');
                 callback(null, { data: new Buffer(0) });
               } else {
                 var response = {};
@@ -116,6 +119,10 @@ module.exports = function(maps, options, prefix) {
           }
         }
       });
+    };
+    map.renderers[1] = createRenderer(1);
+    map.renderers[2] = createRenderer(2);
+    map.renderers[3] = createRenderer(3);
 
     var styleJSON = require(path.join(rootPath, styleUrl));
 
@@ -157,7 +164,9 @@ module.exports = function(maps, options, prefix) {
     });
 
     async.parallel(queue, function(err, results) {
-      map.renderer.load(styleJSON);
+      map.renderers.forEach(function(renderer) {
+        renderer.load(styleJSON);
+      });
     });
 
     maps[prefix] = map;
@@ -175,33 +184,62 @@ module.exports = function(maps, options, prefix) {
 
   var getTile = function(z, x, y, scale, format, callback) {
 
+    var mbglZ = Math.max(0, z - 1);
+
+    var tileSize = 256;
     var tileCenter = mercator.ll([
       ((x + 0.5) / (1 << z)) * (256 << z),
       ((y + 0.5) / (1 << z)) * (256 << z)
     ], z);
 
-    var tileSize = 256 * scale;
+    var renderer = map.renderers[scale];
 
-    lock.acquire(map.renderer, function(done) {
+    var params = {
-      map.renderer.render({
+      /*
-        zoom: z,
-        center: tileCenter,
-        width: 2 * tileSize,
-        height: 2 * tileSize/*,
       debug: {
         tileBorders: true,
         parseStatus: true,
         timestamps: true,
         collision: true
-        }*/
+      },
-      }, function(err, data) {
+      */
+      zoom: mbglZ,
+      center: tileCenter,
+      width: tileSize,
+      height: tileSize
+    };
+    if (z == 0) {
+      params.width *= 2;
+      params.height *= 2;
+    }
+    lock.acquire(renderer, function(done) {
+      renderer.render(params, function(err, data) {
         done();
         if (err) console.log(err);
 
         var png = new PNG({
-          width: tileSize,
+          width: tileSize * scale,
-          height: tileSize
+          height: tileSize * scale
         });
+        if (z == 0) {
+          // HACK: when serving zoom 0, resize the 0 tile from 512 to 256
+          var data_ = clone(data);
+          var dataSize_ = 2 * tileSize * scale;
+          var newSize_ = dataSize_ / 2;
+          data = new Buffer(4 * newSize_ * newSize_);
+          for (var x = 0; x < newSize_; x++) {
+            for (var y = 0; y < newSize_; y++) {
+              for (var b = 0; b < 4; b++) {
+                data[4 * (x * newSize_ + y) + b] = (
+                    data_[4 * (2 * x * dataSize_ + 2 * y) + b] +
+                    data_[4 * (2 * x * dataSize_ + (2 * y + 1)) + b] +
+                    data_[4 * ((2 * x + 1) * dataSize_ + 2 * y) + b] +
+                    data_[4 * ((2 * x + 1) * dataSize_ + (2 * y + 1)) + b]
+                  ) / 4;
+              }
+            }
+          }
+        }
         png.data = data;
 
         var concatStream = concat(function(buffer) {