map/labels: show less labels on lower zoom levels

lib/map/labelslayer.js

@@ -48,21 +48,26 @@ define(["leaflet", "rbush"],
               -offset * Math.sin(loc[2] * 2 * Math.PI)]
     }
 
-    function labelRect(p, offset, anchor, label) {
+    function labelRect(p, offset, anchor, label, minZoom, maxZoom, z) {
+      var margin = 1 + 1.41 * (1 - (z - minZoom) / (maxZoom - minZoom))
+
+      var width = label.width * margin
+      var height = label.height * margin
+
       var dx = { left: 0,
-                 right: -label.width,
-                 center: -label.width /  2
+                 right: -width,
+                 center: -width /  2
                }
 
       var dy = { top: 0,
-                 ideographic: -label.height,
-                 middle: -label.height / 2
+                 ideographic: -height,
+                 middle: -height / 2
                }
 
       var x = p.x + offset[0] + dx[anchor[0]]
       var y = p.y + offset[1] + dy[anchor[1]]
 
-      return [x, y, x + label.width, y + label.height]
+      return [x, y, x + width, y + height]
     }
 
     var c = L.TileLayer.Canvas.extend({
@@ -125,7 +130,7 @@ define(["leaflet", "rbush"],
 
             for (z = maxZoom; z >= d.minZoom; z--) {
               var p = map.project(d.position, z)
-              var rect = labelRect(p, offset, loc, d)
+              var rect = labelRect(p, offset, loc, d, minZoom, maxZoom, z)
               var candidates = trees[z].search(rect)
 
               if (candidates.length > 0)
@@ -146,7 +151,7 @@ define(["leaflet", "rbush"],
 
             for (var z = maxZoom; z >= best.z; z--) {
               var p = map.project(d.position, z)
-              var rect = labelRect(p, d.offset, best.loc, d)
+              var rect = labelRect(p, d.offset, best.loc, d, minZoom, maxZoom, z)
               trees[z].insert(rect)
             }