Merge pull request #517 from mapbox/style-zoom-range

Implement min/max-zoom render property

debug/style-v3.json

@@ -611,7 +611,8 @@
       "text-path": "horizontal",
       "text-max-width": 7,
       "text-optional": true,
-      "text-field": "{{name}}"
+      "text-field": "{{name}}",
+      "min-zoom": 15
     },
     "style": {
       "text-size": 10,
@@ -629,7 +630,8 @@
       "symbol-placement": "line",
       "symbol-min-distance": 150,
       "icon-image": "triangle-stroked-12",
-      "icon-rotate": 90
+      "icon-rotate": 90,
+      "min-zoom": 16
     },
     "style": {}
   }]

js/render/painter.js

@@ -319,6 +319,9 @@ GLPainter.prototype.applyStyle = function(layer, style, buckets, params) {
 
         var info = bucket.info;
 
+        if (info['min-zoom'] && this.transform.zoom <= info['min-zoom']) return;
+        if (info['max-zoom'] && this.transform.zoom > info['max-zoom']) return;
+
         var translate = info.type === 'text' ? layerStyle['text-translate'] :
                         info.type === 'fill' ? layerStyle['fill-translate'] :
                         info.type === 'line' ? layerStyle['line-translate'] :

js/ui/vectortile.js

@@ -35,6 +35,7 @@ VectorTile.prototype._load = function() {
         url: this.url,
         id: this.id,
         zoom: this.zoom,
+        maxZoom: this.source.tileJSON.maxzoom,
         tileSize: this.options.tileSize,
         glyphs: this.options.glyphs,
         source: this.source.id

js/worker/glyphtile.js

@@ -13,7 +13,6 @@ var actor = require('./worker.js');
 module.exports = GlyphTile;
 function GlyphTile(url, callback) {
     var tile = this;
-    this.url = url;
     var id = this.id = -1;
 
     GlyphTile.loading[id] = getArrayBuffer(url, function(err, data) {

js/worker/parsegeojson.js

@@ -9,15 +9,17 @@ module.exports = parseGeoJSON;
 function parseGeoJSON(params) {
     var data = params.data;
 
-    var zooms = params.zooms;
+    var zooms = params.zooms,
+        len = zooms.length;
 
-    for (var i = 0; i < zooms.length; i++) {
+    for (var i = 0; i < len; i++) {
         var zoom = zooms[i];
         var tiles = tileGeoJSON(data, zoom);
 
         for (var id in tiles) {
             var tile = tiles[id];
-            new WorkerTile(undefined, new Wrapper(tile), id, zoom, params.tileSize, params.glyphs, params.source, sendFromWorker(id, params.source));
+            new WorkerTile(undefined, new Wrapper(tile), id, zoom, zooms[len - 1],
+                    params.tileSize, params.glyphs, params.source, sendFromWorker(id, params.source));
         }
     }
 }

js/worker/worker.js

@@ -35,7 +35,7 @@ self['set glyphs'] = function(data) {
  * @param {function} callback
  */
 self['load tile'] = function(params, callback) {
-    new WorkerTile(params.url, undefined, params.id, params.zoom, params.tileSize, params.source, callback);
+    new WorkerTile(params.url, undefined, params.id, params.zoom, params.maxZoom, params.tileSize, params.source, callback);
 };
 
 /*

js/worker/workertile.js

@@ -19,11 +19,11 @@ var IconVertexBuffer = require('../geometry/iconvertexbuffer.js');
 var createBucket = require('../geometry/createbucket.js');
 
 module.exports = WorkerTile;
-function WorkerTile(url, data, id, zoom, tileSize, source, callback) {
+function WorkerTile(url, data, id, zoom, maxZoom, tileSize, source, callback) {
     var tile = this;
-    this.url = url;
     this.id = id;
     this.zoom = zoom;
+    this.maxZoom = maxZoom;
     this.tileSize = tileSize;
     this.source = source;
 
@@ -112,7 +112,7 @@ WorkerTile.prototype.parse = function(data, callback) {
         }
 
         var filter = bucket.info.filter;
-        if (filter && filter.source !== tile.source) continue;
+        if (filter && filter.source !== this.source) continue;
 
         // Link buckets that need to be parsed in order
         if (bucket.collision) {
@@ -200,11 +200,19 @@ function sortTileIntoBuckets(tile, data, bucketInfo) {
         buckets = {},
         layerName;
 
+    var zoomOffset = Math.log(256 / tile.tileSize) / Math.LN2;
+
     // For each source layer, find a list of buckets that use data from it
     for (var i = 0; i < bucketInfo.length; i++) {
         var info = bucketInfo[i];
         var bucketName = info.id;
+
+        var minZoom = info.render['min-zoom'] - zoomOffset;
+        var maxZoom = info.render['max-zoom'] - zoomOffset;
+
         if (info.source !== tile.source) continue;
+        if (minZoom && tile.zoom < minZoom && minZoom < tile.maxZoom) continue;
+        if (maxZoom && tile.zoom > maxZoom) continue;
 
         var bucket = createBucket(info.render, tile.collision, undefined, tile.buffers);
         if (!bucket) continue;

test/worker.test.js

@@ -22,7 +22,7 @@ test('basic', function(t) {
         properties: {}
     }];
 
-    new WorkerTile(null, new Wrapper(features), '', 0, 512, 'source', function(err, result) {
+    new WorkerTile(null, new Wrapper(features), '', 0, 20, 512, 'source', function(err, result) {
         t.ok(result.buffers, 'buffers');
         t.ok(result.elementGroups, 'element groups');
         t.end();