Indexed vector sources

js/data/fill_bucket.js

@@ -13,7 +13,10 @@ FillBucket.prototype.addFeatures = function() {
     var features = this.features;
     for (var i = 0; i < features.length; i++) {
         var feature = features[i];
-        this.addFeature(feature.loadGeometry());
+        var geom = feature.loadGeometry();
+        if (geom) {
+            this.addFeature(geom);
+        }
     }
 };
 

js/data/line_bucket.js

@@ -18,7 +18,9 @@ LineBucket.prototype.addFeatures = function() {
     var features = this.features;
     for (var i = 0; i < features.length; i++) {
         var feature = features[i];
-        this.addFeature(feature.loadGeometry());
+        var geom = feature.loadGeometry();
+        if (geom)
+            this.addFeature(geom);
     }
 };
 

js/source/source.js

@@ -8,16 +8,10 @@ var TileCoord = require('./tile_coord');
 var normalizeURL = require('../util/mapbox').normalizeSourceURL;
 
 exports._loadTileJSON = function(options) {
-    var loaded = function(err, tileJSON) {
-        if (err) {
-            this.fire('error', {error: err});
-            return;
-        }
-
-        util.extend(this, util.pick(tileJSON,
-            ['tiles', 'minzoom', 'maxzoom', 'attribution']));
 
+    var buildPyramid = function (index) {
         this._pyramid = new TilePyramid({
+            index: index,
             tileSize: this.tileSize,
             cacheSize: 20,
             minzoom: this.minzoom,
@@ -31,8 +25,34 @@ exports._loadTileJSON = function(options) {
             remove: this._removeTile.bind(this),
             redoPlacement: this._redoTilePlacement ? this._redoTilePlacement.bind(this) : undefined
         });
+    }.bind(this);
+
+    var loaded = function(err, tileJSON) {
+        if (err) {
+            this.fire('error', {error: err});
+            return;
+        }
+
+        util.extend(this, util.pick(tileJSON,
+            ['tiles', 'minzoom', 'maxzoom', 'attribution']));
+
+        // if index is defined, fetch the index json, then extend the pyramid
+        if (tileJSON.index) {
+            ajax.getJSON(normalizeURL(tileJSON.index), function (err, index) {
+                if (err) {
+                  this.fire('error', {error: err});
+                  return;
+                }
+
+                buildPyramid(index.index);
+                this.fire('load');
+
+            }.bind(this));
+        } else {
+            buildPyramid();
+            this.fire('load');
+        }
 
-        this.fire('load');
     }.bind(this);
 
     if (options.url) {
@@ -61,6 +81,10 @@ exports._renderTiles = function(layers, painter) {
         // so calculate the matrix the maxzoom tile would use.
         z = Math.min(z, this.maxzoom);
 
+        // leaf tiles and clipped tiles always use 4096
+        if (tile.tileExtent > 4096 || tile.parentId)
+            tile.tileExtent = 4096;
+
         x += w * (1 << z);
         tile.calculateMatrices(z, x, y, painter.transform, painter);
 

js/source/tile_pyramid.js

@@ -25,6 +25,8 @@ function TilePyramid(options) {
     this.maxzoom = options.maxzoom;
     this.roundZoom = options.roundZoom;
     this.reparseOverscaled = options.reparseOverscaled;
+    // esri/chelm
+    this.index = options.index;
 
     this._load = options.load;
     this._abort = options.abort;
@@ -271,6 +273,10 @@ TilePyramid.prototype = {
             var zoom = coord.z;
             var overscaling = zoom > this.maxzoom ? Math.pow(2, zoom - this.maxzoom) : 1;
             tile = new Tile(wrapped, this.tileSize * overscaling);
+            // esri/chelm
+            if (this.index) {
+              tile.parentId = this.indexSearch(coord.id);
+            }
             this._load(tile);
         }
 
@@ -372,5 +378,54 @@ TilePyramid.prototype = {
         }
 
         return result;
+    },
+
+    /**
+     * For a given tile id find its parent tile from the index
+     * @param {string|number} id tile id
+     * @returns {Object} tile
+     * @private
+     */
+    indexSearch: function (id) {
+        var tile = TileCoord.fromID(id);
+
+        var ids = [id];
+
+        var parentTile = tile;
+        while (parentTile.z !== 0) {
+            parentTile = parentTile.parent();
+            ids.push(parentTile.id);
+        }
+
+        var cursor = this.index,
+            cursorId = ids.pop(),
+            index;
+
+        var pluckId = function (coord) {
+            return coord.id;
+        };
+
+        while (ids.length) {
+            id = ids.pop();
+            tile = TileCoord.fromID(cursorId);
+            index = tile.children(this.maxzoom).map(pluckId).indexOf(id);
+            if (cursor) {
+                if (cursor[index] === 0) {
+                    cursorId = id;
+                    break;
+                } else if (cursor[index] === 1) {
+                    cursorId = id;
+                    break;
+                } else {
+                    cursorId = id;
+                    cursor = cursor[index];
+                }
+            }
+        }
+
+        // don't return a parentId if we found the original tile
+        if (ids.length === 0) return null;
+
+        return cursorId;
     }
 };

js/source/vector_tile_source.js

@@ -3,6 +3,7 @@
 var util = require('../util/util');
 var Evented = require('../util/evented');
 var Source = require('./source');
+var TileCoord = require('./tile_coord');
 
 module.exports = VectorTileSource;
 
@@ -72,9 +73,15 @@ VectorTileSource.prototype = util.inherit(Evented, {
             overscaling: overscaling,
             angle: this.map.transform.angle,
             pitch: this.map.transform.pitch,
-            collisionDebug: this.map.collisionDebug
+            collisionDebug: this.map.collisionDebug,
+            parentId: tile.parentId
         };
 
+        // request the tile parentID if it exists
+        if (tile.parentId) {
+            params.url = TileCoord.fromID(tile.parentId).url(this.tiles, this.maxzoom);
+        }
+
         if (tile.workerID) {
             this.dispatcher.send('reload tile', params, this._tileLoaded.bind(this, tile), tile.workerID);
         } else {

js/source/worker.js

@@ -6,6 +6,7 @@ var util = require('../util/util');
 var ajax = require('../util/ajax');
 var vt = require('vector-tile');
 var Protobuf = require('pbf');
+var TileCoord = require('./tile_coord');
 
 var geojsonvt = require('geojson-vt');
 var GeoJSONWrapper = require('./geojson_wrapper');
@@ -47,7 +48,18 @@ util.extend(Worker.prototype, {
             if (err) return callback(err);
 
             tile.data = new vt.VectorTile(new Protobuf(new Uint8Array(data)));
-            tile.parse(tile.data, this.layers, this.actor, callback);
+
+            // if a parentTile is defined it means the index is missing a tile for this coord
+            // here the difference between the requested tile and its indexed parent is found
+            // we pass the dz, x/y pos of the tile's relationship to its parent
+            if (params.parentId && tile.data.layers)  {
+                var childPos = this.getChildPosition(params.coord.id, params.parentId);
+
+                // chelm - i'd prefer to not just tack on params here...
+                tile.parse(tile.data, this.layers, this.actor, callback, childPos.dz, childPos.xPos, childPos.yPos);
+            } else {
+                tile.parse(tile.data, this.layers, this.actor, callback);
+            }
 
             this.loaded[source] = this.loaded[source] || {};
             this.loaded[source][uid] = tile;
@@ -145,5 +157,18 @@ util.extend(Worker.prototype, {
         } else {
             callback(null, []);
         }
+    },
+
+    'getChildPosition': function(childId, parentId) {
+        var tilePos = TileCoord.fromID(childId);
+        var parentPos = TileCoord.fromID(parentId);
+        var dz = tilePos.z - parentPos.z;
+        var xPos = tilePos.x & ((1 << dz) - 1);
+        var yPos = tilePos.y & ((1 << dz) - 1);
+        return {
+            dz: dz,
+            xPos: xPos,
+            yPos: yPos
+        };
     }
 });

js/source/worker_tile.js

@@ -22,7 +22,7 @@ function WorkerTile(params) {
     this.stacks = {};
 }
 
-WorkerTile.prototype.parse = function(data, layers, actor, callback) {
+WorkerTile.prototype.parse = function(data, layers, actor, callback, dz, xPos, yPos) {
 
     this.status = 'parsing';
 
@@ -104,16 +104,22 @@ WorkerTile.prototype.parse = function(data, layers, actor, callback) {
             layer = data.layers[k];
             if (!layer) continue;
             if (layer.extent) extent = layer.extent;
-            sortLayerIntoBuckets(layer, bucketsBySourceLayer[k]);
+            sortLayerIntoBuckets(layer, bucketsBySourceLayer[k], dz, xPos, yPos);
         }
     } else {
         // geojson
         sortLayerIntoBuckets(data, bucketsBySourceLayer);
     }
 
-    function sortLayerIntoBuckets(layer, buckets) {
+    function sortLayerIntoBuckets(layer, buckets, dz, xPos, yPos) {
         for (var i = 0; i < layer.length; i++) {
-            var feature = layer.feature(i);
+          var feature = layer.feature(i);
+
+            // propagate clipped position in tile at the feature level
+            feature.dz = dz;
+            feature.xPos = xPos;
+            feature.yPos = yPos;
+
             for (var key in buckets) {
                 var bucket = buckets[key];
                 if (bucket.filter(feature)) {

js/symbol/mergelines.js

@@ -46,6 +46,9 @@ module.exports = function (features, textFeatures, geometries) {
         var geom = geometries[k],
             text = textFeatures[k];
 
+        if (!geom)
+            continue;
+
         if (!text) {
             add(k);
             continue;

test/js/source/tile_pyramid.test.js

@@ -7,6 +7,8 @@ var Transform = require('../../../js/geo/transform');
 var LngLat = require('../../../js/geo/lng_lat');
 var Coordinate = require('../../../js/geo/coordinate');
 var util = require('../../../js/util/util');
+var path = require('path');
+var fs = require('fs');
 
 test('TilePyramid#coveringTiles', function(t) {
     var pyramid = new TilePyramid({
@@ -373,6 +375,33 @@ test('TilePyramid#clearTiles', function(t) {
     });
 });
 
+test('TilePyramid#indexSearch', function(t) {
+    t.test('finds the covering tile for a missing tile in an index index', function(t) {
+        var coord1 = TileCoord.fromID(81830);
+        var coord2 = TileCoord.fromID(83878);
+
+        var pyramid = createPyramid({
+            index: JSON.parse(fs.readFileSync(path.join(__dirname, '../../fixtures/index.json')).toString()).index
+        });
+
+        var tile1 = pyramid.addTile(coord1);
+        t.equal(tile1.parentId, 20421);
+
+        var tile2 = pyramid.addTile(coord2);
+        t.equal(tile2.parentId, null);
+
+        t.end();
+    });
+
+    t.test('indexSearch not called if tile pyramid does not have an index', function(t) {
+        var coord1 = TileCoord.fromID(81830);
+        var pyramid = createPyramid();
+        var tile1 = pyramid.addTile(coord1);
+        t.equal(tile1.parentId, undefined);
+        t.end();
+    });
+});
+
 test('TilePyramid#tilesIn', function (t) {
     var transform = new Transform();
     transform.width = 511;

test/js/source/worker.test.js

@@ -77,6 +77,15 @@ test('remove tile', function(t) {
     });
 });
 
+test('overzoomed tile position', function(t) {
+    t.test('x, y pos calculated for overzoomed tile', function(t) {
+        var worker = new Worker(_self);
+        var ul = worker.getChildPosition(319335, 20421);
+        t.deepEqual(ul, { dz: 2, xPos: 3, yPos: 1 });
+        t.end();
+    });
+});
+
 test('after', function(t) {
     server.close(t.end);
 });