mapbox / vector-tile-js

Parses vector tiles with JavaScript

vector-tile

This library reads Mapbox Vector Tiles and allows access to the layers and features.

Example

var VectorTile = require('@mapbox/vector-tile').VectorTile;
var Protobuf = require('pbf');

var tile = new VectorTile(new Protobuf(data));

// Contains a map of all layers
tile.layers;

var landuse = tile.layers.landuse;

// Amount of features in this layer
landuse.length;

// Returns the first feature
landuse.feature(0);

Vector tiles contained in serialtiles-spec are gzip-encoded, so a complete example of parsing them with the native zlib module would be:

var VectorTile = require('vector-tile').VectorTile;
var Protobuf = require('pbf');
var zlib = require('zlib');

zlib.gunzip(data, function(err, buffer) {
    var tile = new VectorTile(new Protobuf(buffer));
});

Depends

• Node.js v0.10.x or v0.8.x

Install

To install:

npm install @mapbox/vector-tile

API Reference

VectorTile

An object that parses vector tile data and makes it readable.

Constructor

• new VectorTile(protobuf[, end]) — parses the vector tile data contained in the given Protobuf object, saving resulting layers in the created object as a layers property. Optionally accepts end index.

Properties

• layers (Object) — an object containing parsed layers in the form of {<name>: <layer>, ...}, where each layer is a VectorTileLayer object.

VectorTileLayer

An object that contains the data for a single vector tile layer.

Properties

• version (Number, default: 1)
• name (String) — layer name
• extent (Number, default: 4096) — tile extent size
• length (Number) — number of features in the layer

Methods

• feature(i) — get a feature (VectorTileFeature) by the given index from the layer.

VectorTileFeature

An object that contains the data for a single feature.

Properties

• type (Number) — type of the feature (also see VectorTileFeature.types)
• extent (Number) — feature extent size
• id (Number) — feature identifier, if present
• properties (Object) — object literal with feature properties

Methods

• loadGeometry() — parses feature geometry and returns an array of Point arrays (with each point having x and y properties)
• bbox() — calculates and returns the bounding box of the feature in the form [x1, y1, x2, y2]
• toGeoJSON(x, y, z) — returns a GeoJSON representation of the feature. (x, y, and z refer to the containing tile's index.)

vector-tile-js's Issues

Throw nicer error when tiles are missing geometry

I created some tiles that had features, but no geometry.

This causes vector-tile-js to throw on this line:

https://github.com/mapbox/vector-tile-js/blob/master/lib/vectortilefeature.js#L122

This error is a bit misleading, because invalid bytes are being interpreted. We should instead throw "No geometry field found". Strictly speaking, we're incorrectly parsing the PBF data stream here.

write vector tiles in js

This would be something of a missing ingredient for non-mapnik js things to talk vt

JSDoc

unable to parse certain vector tiles

Test case: https://gist.github.com/jfirebaugh/2b08234d2587ce2f33a9

Fails with the following error:

/Users/john/Development/mapbox-gl-js/node_modules/pbf/index.js:126
        default: throw new Error('Unimplemented type: ' + type);
                       ^
Error: Unimplemented type: 3
    at Object.Protobuf.skip (/Users/john/Development/mapbox-gl-js/node_modules/pbf/index.js:126:24)
    at new VectorTileFeature (/Users/john/Development/mapbox-gl-js/node_modules/vector-tile/lib/vectortilefeature.js:45:20)
    at VectorTileLayer.feature (/Users/john/Development/mapbox-gl-js/node_modules/vector-tile/lib/vectortilelayer.js:88:12)
    at /Users/john/Development/mapbox-gl-js/test.js:19:23
    at Gunzip.onEnd (zlib.js:166:5)
    at Gunzip.emit (events.js:117:20)
    at _stream_readable.js:943:16
    at process._tickCallback (node.js:419:13)

Note that this is after it has successfully parsed the layer and its keys and values. It seems like the buffer positions in the _features array of VectorTileLayer are mis-calculated or something.

cc @springmeyer

Use mvt-fixtures for testing valid/invalid vector tiles?

👋 we've recently released mvt-fixtures as an attempt to centralize test fixtures for decoding mvt buffers. I'd love to see vector-tile-js using this library at some point in the future. Presumably mvt-fixtures doesn't contain every unit-test fixture required for this library, so I'll work on updates there to make sure there is feature parity before working on a branch in this project.

mvt-fixtures comes with a method for testing all fixtures relatively quickly - .each() and this would allow us to run vector-tile-js through every fixture plus test whether it should decode the fixture successfully or not. Example in the README.

It also comes with a selection of real-world tiles that can be used for benchmarks and tests like this one.

I'll plan on being point here for prototyping what this can look like, but if anyone has thoughts or concerns please feel free to raise them here!

cc @mapbox/core-tech @jfirebaugh @lbud @mollymerp @mourner @anandthakker @lucaswoj

npm package accidently deprecated?

When installing the vector-tile package, the following deprecation warning is shown:

npm WARN deprecated [email protected]: This module is now under the @mapbox namespace: install @mapbox/vector-tile instead

But the @mapbox/vector-tile package appears to be something completely different.

Is it possible that the vector-tile package was accidently deprecated?

FREELANCER WORK

HELLO SIR,
CAN YOU BUILD ME A PROGRAM AS A FREELANCER (PAID) THAT PRIMARILY DO FOLLOWING THINGS

1. CREATION OF VECTOR TILES
   a. selection of zoom level layer wise
   b. selection of feature layer wise
   c.multiple layer (option a and b)
2. MERGING OF VECTOR TILES
   a. merging layers with common attributes
3. style sheet application (working in qgis has style.xml files)

i can get you more detail on your email please send your contact detail on [email protected]

thank you

Trouble parsing negative int64 in PBF

I've been converting some terrain data from PBF to geoJSON, and noticed that contour lines with negative elevations always get converted to a huge value beginning with 184467440737095-----, and variable numbers for the last 5 digits.

The gist of my conversion process:

var tile = new module.exports.VectorTile(new Pbf(pbfContents));

for (var i=0;i<tile.layers.contour.length;i++){
    var feature=tile.layers.contour.feature(i);
    outputgeojson.features.push(feature);
}

An example of this output is this Olympus Mons contour map, in 500m increments. Most of the volcano is positive elevation, but towards the bottom-left corner, the -500,-1000, and -1500 layers get converted to 18446744073709552000

cc/ @jfirebaugh @mourner

get raw byte length of Individual layers

Ability to get raw byte length of Individual layers in vector tile

Use id property as feature id if not exist.

The goal is to use MVT tile generated by ST_AsMVT function on postgis 2.4 and 2.5.
Because feature id is not provided mapbox-gl throw this error :
Error: The feature id parameter must be provided.

Today the solution i found is to make this modification directly on sources and rebuild mapboxgl :

diff --git a/lib/vectortilefeature.js b/lib/vectortilefeature.js
index b9880a1..474fdfd 100644
--- a/lib/vectortilefeature.js
+++ b/lib/vectortilefeature.js
@@ -17,6 +17,10 @@ function VectorTileFeature(pbf, end, extent, keys, values) {
     this._values = values;
 
     pbf.readFields(readFeature, this, end);
+
+    if ('id' in this.properties && !this.id) {
+       this.id = this.properties.id;
+    }
 }

I think this modification can be useful to some people that can't update postgis to 3.0 version.

Projection of Geometry {x,y}

When I get a feature and I call feature.loadGeometry();, I get an array of arrays that have values creating lines like this:

{x:4096,y:0},
{x:3726,y:2206}

I thought that the geometry points would be between 0 and 255, because they have been projected to the pixel space of the tile. Apparently I am wrong. If this is pixel space, does it correspond to the zoom that the tiles were cut from? Also, where is the origin?

Add feature.toGeoJSON()

Needed for mapbox/mapbox-gl-js#1010.

Behavior when a feature is missing geometry

Currently, if a feature in a tile is missing a geometry, the result is a mysterious error ("Unknown command: "...) thrown from loadGeometry. Is it worth it to either (a) failing earlier, in the constructor, if a geometry is missing, or (b) returning an empty geometry from loadGeometry?

Infer MultiPolygon structure from winding order for toGeoJSON

MultiPolygons are flattened in VT, so we need to infer their structure from winding order like this https://github.com/mapbox/mapbox-gl-js/blob/earcut-final/js/util/classify_rings.js, otherwise MultiPolygons are broken (encoded as Polygons, with additional outer rings becoming holes). cc @jfirebaugh

How convert to longitude and latitude geojson?

I use VectorTileFeature.toGeoJSON method,but the result position is relative coordinate.
How create longitude and latitude geojson data?

Uncaught Error: Unimplemented type: 4

I seem to be getting an Uncaught Error: Unimplemented type: 4 exception any time I try to add a type: "symbol" layer to a map. This has occurred with both a custom generated set of labels and with mapbox://mapbox.mapbox-streets-v6.

This seems to occur with both Mapbox GL Style Version 7 and 8. I've largely copied the styling from a Mapbox example (which does not exhibit the issue) so it may very well be an implementation error, but I'm at a loss as to what the cause would be.

An example of this error can be found here: http://codepen.io/anon/pen/LpNmWa?editors=001

Possible duplicate 'buffer' in protobuf data

I tried dumping vector tile data as JSON using vector-tile and pbf npm modules and found this odd output:

{
  "layers": {
    "water": {
      "version": 1,
      "name": "water",
      "extent": 4096,
      "length": 1,
      "_buffer": {
        "buf": {
          "0": 69,
          "1": 21,
          ...
          "1390": 1,
          "BYTES_PER_ELEMENT": 1,
          "buffer": {
            "0": 69,
            "1": 21,
            ...
            "1390": 1,
            "byteLength": 1391
          },
          "length": 1391,
          "byteOffset": 0,
          "byteLength": 1391
        },
        "pos": 1391
      },
      "_keys": [
        "class",
        "osm_id",
        "type"
      ],
      "_values": [
        "canal",
        146671178
      ],
      "_features": [
        13
      ]
    },

What noticed is pseudo-array buf contains a near duplicate of itself named buffer.

If I'm not mistaken, this appears to be an issue on the vector tile generation side, possibly resulting in larger PBF file size.

Document toGeoJSON

Bug in `VectorTileFeature.toGeoJSON()` causes polygon overlap

Overview

After a lot of consternation in a couple issues (1 2) in the Deck.gl library, I believe I've come up with a simple, reproducible example that the problem is caused by VectorTileFeature.toGeoJSON in this library.

Downstream problem

When hosting Mapbox Vector tiles representing polygons, there are dark regions where the tiles meet, which I believe are caused by incorrect overlapping regions from .toGeoJSON.

Reproducible example

1. Create a simple bounding box that crosses over a tile boundary.

bbox.geojson:

{
    "type": "Feature",
    "geometry": {
        "type": "Polygon",
        "coordinates": [
            [
                [
                    -119.286701,
                    37.68731
                ],
                [
                    -119.286701,
                    37.821895
                ],
                [
                    -119.71789,
                    37.821895
                ],
                [
                    -119.71789,
                    37.68731
                ],
                [
                    -119.286701,
                    37.68731
                ]
            ]
        ]
    },
    "properties": {}
}

2. Use tippecanoe to split it into tiles.

   tippecanoe -Z8 -z8 -e tiles bbox.geojson
   

3. Upload the four outputted tiles to S3. (My JS isn't perfect yet and I couldn't get the example working with local files).

   aws s3 cp tiles s3://tiles.nst.guide/mvt-testing/ --recursive --content-type application/x-protobuf --content-encoding 'gzip'
   

4. Use vector-tile-js to create 4 GeoJSON files from the vector tiles.

npm install @mapbox/vector-tile pbf node-fetch

var VectorTile = require('@mapbox/vector-tile').VectorTile
var Protobuf = require('pbf');
var fs = require('fs')
var fetch = require('node-fetch');

var xyz_array = [
  [42, 98, 8],
  [43, 98, 8],
  [42, 99, 8],
  [43, 99, 8],
]

for (var i = 0; i < xyz_array.length; i++) {
  let [x, y, z] = xyz_array[i]
  let mapSource = `https://tiles.nst.guide/mvt-testing/${z}/${x}/${y}.pbf`;
  fetch(mapSource).then(
    response => response.arrayBuffer()
  ).then(buffer => {
    let tile = new VectorTile(new Protobuf(buffer));
    let vectorTileLayer = tile.layers['bbox']
    let vectorTileFeature = vectorTileLayer.feature(0);
    let geoJSONFeature = vectorTileFeature.toGeoJSON(x, y, z);
    fs.writeFile(`tmp_${z}_${x}_${y}.geojson`, JSON.stringify(geoJSONFeature), () => console.log('written'))
  })
}

5. Merge the GeoJSON files together

npm install @mapbox/geojson-merge
geojson-merge tmp_8_42_98.geojson tmp_8_42_99.geojson tmp_8_43_98.geojson tmp_8_43_99.geojson > combined.geojson

6. Inspect the merged GeoJSON and see the overlap.

combined.geojson:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -119.5037841796875,
              37.821988845756366
            ],
            [
              -119.5037841796875,
              37.696860987441895
            ],
            [
              -119.718017578125,
              37.696860987441895
            ],
            [
              -119.718017578125,
              37.821988845756366
            ],
            [
              -119.5037841796875,
              37.821988845756366
            ]
          ]
        ]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -119.5037841796875,
              37.74031329210264
            ],
            [
              -119.5037841796875,
              37.68735239874452
            ],
            [
              -119.718017578125,
              37.68735239874452
            ],
            [
              -119.718017578125,
              37.74031329210264
            ],
            [
              -119.5037841796875,
              37.74031329210264
            ]
          ]
        ]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -119.28680419921875,
              37.821988845756366
            ],
            [
              -119.28680419921875,
              37.696860987441895
            ],
            [
              -119.5587158203125,
              37.696860987441895
            ],
            [
              -119.5587158203125,
              37.821988845756366
            ],
            [
              -119.28680419921875,
              37.821988845756366
            ]
          ]
        ]
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -119.28680419921875,
              37.74031329210264
            ],
            [
              -119.28680419921875,
              37.68735239874452
            ],
            [
              -119.5587158203125,
              37.68735239874452
            ],
            [
              -119.5587158203125,
              37.74031329210264
            ],
            [
              -119.28680419921875,
              37.74031329210264
            ]
          ]
        ]
      },
      "properties": {}
    }
  ]
}

remove point-feature

The use of point-feature and { x, y } objects seems out of place in such a low-level library. Can we switch to [x, y] coordinates for 2.0?

Most vector tiles are gzip-encoded, example should demonstrate or mention this

High GC activity from readUtf8 when using vector-tile

Here are some profiling screenshots (from OS X 10.11.6 & Chrome Version 60.0.3112.113):

It looks like building the string using concatenation of char codes is causing the GC activity. This is more of a problem with layers that have long property strings on features.

cannot find source-Layer Ids after reading Vector Tile using vector-tile JS library

Hi ,
I took a vector tile to read the Layer and its corresponding features.

I found

• My layer is "Landuse"
• I found all the features that are inside the "Landuse" Layer.

I know that some of the features belong to Cemetry, Education etc..

The problem is , i am not able to find the ID of each feature like its been represented in the StyleSheet.

With out the "id", i cannot cannot seperate and display my features with in "landuse" layer

Here is one sample from the style sheet

 "id": "landuse_cemetery",
            "source": "orgVector",
            "source-layer": "landuse",
            "type": "fill",
            "minzoom": 11

My question is how to get the "id" along with features?
Please help me if i am missing some thing while reading the MVT tile.

Deserialization of properties

I am facing some issue regarding deserialization of the property properties in features. Objects in the property properties are not being deserialized properly. Please, see maplibre/maplibre-gl-js#1325

Is this by design? It would be nice if deserialization had the same output as before serialization.

Thanks in advance.

dist file folder

I am not familiar with building packages (using grunt etc) and do not have the setup to try it. I would like to use vector-tile-js as a dependency for another package: leaflet.vectorGrid-1.3.0 Can you please provide the /dist file that can be directly used? Thanks

`id` should be a public property

Currently feature IDs are read into an _id property, implying that the property is not part of the public API. But IDs are part of the vector tile specification, and there is no reason to keep this property private. It should be accessible via a non-underscore-prefixed accessor.

Writing vector tiles

It needs an API to write a vector tile dynamically from JS into PBF.

Publish on NPM

Infinite loop when reading polygon close command (7)

Hello,

I discovered a bug that is pretty serious and causes browser to hang. The issue is when reading a geometry that has closepath command represented with number 7.

VectorTileFeature.prototype.loadGeometry = function() {
    var pbf = this._pbf;
    pbf.pos = this._geometry;

    var end = pbf.readVarint() + pbf.pos,
        cmd = 1,
        length = 0,
        x = 0,
        y = 0,
        lines = [],
        line;

    while (pbf.pos < end) {
        if (!length) {
            var cmdLen = pbf.readVarint();
            cmd = cmdLen & 0x7;
            length = cmdLen >> 3;
        }

        length--;

        if (cmd === 1 || cmd === 2) {
            x += pbf.readSVarint();
            y += pbf.readSVarint();

            if (cmd === 1) { // moveTo
                if (line) lines.push(line);
                line = [];
            }

            line.push(new Point(x, y));

        } else if (cmd === 7) {

            // Workaround for https://github.com/mapbox/mapnik-vector-tile/issues/90
            if (line) {
                line.push(line[0].clone()); // closePolygon
            }

        } else {
            throw new Error('unknown command ' + cmd);
        }
    }

    if (line) lines.push(line);

    return lines;
};

When writing geometry to pbf, if closepath occurs, a 7 will be written to buffer. But when reading a geometry part of .pbf this isn't handled correctly. The following case happens:

When pbf reads 7.

if (!length) { // This is 0
            var cmdLen = pbf.readVarint();
            cmd = cmdLen & 0x7; // This is 7
            length = cmdLen >> 3; // length evaluates to 0
        }

length--; // this becomes -1

Next iteration length will still be 0

if (!length) { // This is -1 and evaluates to false, which skips reading the command
            var cmdLen = pbf.readVarint();
            cmd = cmdLen & 0x7; // This is 7
            length = cmdLen >> 3; // length evaluates to 0
        }

length--; // this becomes -2 

And this goes into infinite loop.

This code hasn't changed in a while but the writeGeometry in vt-pbf has.

function writeGeometry (feature, pbf) {
  var geometry = feature.loadGeometry()
  var type = feature.type
  var x = 0
  var y = 0
  var rings = geometry.length
  for (var r = 0; r < rings; r++) {
    var ring = geometry[r]
    var count = 1
    if (type === 1) {
      count = ring.length
    }
    pbf.writeVarint(command(1, count)) // moveto
    // do not write polygon closing path as lineto
    var lineCount = type === 3 ? ring.length - 1 : ring.length
    for (var i = 0; i < lineCount; i++) {
      if (i === 1 && type !== 1) {
        pbf.writeVarint(command(2, lineCount - 1)) // lineto
      }
      var dx = ring[i].x - x
      var dy = ring[i].y - y
      pbf.writeVarint(zigzag(dx))
      pbf.writeVarint(zigzag(dy))
      x += dx
      y += dy
    }
    if (type === 3) { // this changed recently
      pbf.writeVarint(command(7, 0)) // closepath
    } //
  }
}

The type 3 was added only recently.

The fix is simple:

Change if (!length) to if (length <= 0). And this will allow for length to be negative, thus allowing next command to be read.

missing vector tiles?

I apologize if this is in the wrong place or if this is a something i should have read somewhere.. i'm new to web mapping and i'm still grasping its conventions.

I'm rendering the mapbox vector tiles into separate layers on my own, so the layers can be turned on and off or arranged (zIndex-like) independently and I have noticed that there are no vector tiles for parts of the ocean (at zoom levels 9+?), and also i have noticed some tiles missing in-land. An example for water is [9/160/206] and for inland is [15/8265/13216]. For these I get a "404 - Not Found" and a response '{"message":"Tile does not exist"}'. It seems to me that this is occurring in the water where it does not intersect any other layers (like 'landforms'), and the same for inland -- where there are no features to display.

My question: Is there a standard way to handle this? In the middle of the water, I would want to place just a solid polygon and fill it my water fill color. Over the land, i would want to do the same but fill it with the landform color. Is there a common technique for identifying these and handling these missing tiles? (Is this related to "overzooming"? i.e., am i supposed to looking back in lower-value zoom levels to get the data?)

.toGeoJSON() returning [null,null] coordinate pairs

. . . when using the mapbox-streets-v6 endpoint as a source, the .toGeoJson method returns all null coordinate pairs from a decoded .pbf. All non-geom properties are decoded and written correctly.

Call

    var buf = new Protobuf(body);
    var vt = new VectorTile(buf);
    var layer = vt.layers['water'];

    if (layer.length > 0) {
      var waterSet = {"type":"FeatureCollection","features":[]};
      for (var i = 0; i < layer.length; i++) {
        var feature = layer.feature(i).toGeoJSON();      
        waterSet.features.push(feature);
      }
      console.log(JSON.stringify(waterSet));
    }

As part of this script.

Result

A lot of this:

. . . {"type":"Polygon","coordinates":[[[null,null],[null,null],[null,null], . . .

This is the same over several test tiles. Here's the full response from a tile.

Layer toGeoJSON

We have feature.toGeoJSON, but also need layer.toGeoJSON which returns a feature collection for convenience.

Possibly duplicating features

Decoding this buffer gives me this geojson, with many features identically duplicated.

@danpat is fairly confident that none of the features were duplicated when he baked the tileset, so I'm wondering if this is happening in vt-js

cc @jfirebaugh @mourner

Could you please expose `classifyRings()` ?

Currently classifyRing is only used internally to output geojson.

I have a use case where I do hit detection on a polygon so I have to duplicate this code to figure out if the hit is inside a polygon or inside a hole.

A nice way to expose it would be to create a VectorTileFeature.prototype.loadPolygons (to be consistent with VectorTileFeature.prototype.loadGeometry.

loadPolygons would return an array of polygons, the first one being the outer ring and the later would be the holes.
(loadPolygons would return null when called on a geometry that is not a polygon).

If you agree to expose that, I can update the code and the doc and send a PR.

Thanks

Why can't I read the tile in tiles.getTile() of mbtiles?

Hello, I used the tippecanoe to build a mbtiles file, but I can't use vector-tile-js parse the tile with tiles.getTile() . It likes follow:

  tiles.getTile(p.z, p.x, p.y, function (err, tile, headers) {
                if (err) {
                    res.end();
                } else {
                    res.writeHead(200, headers);
                    console.log(tile);

                    var vectorTileContent = new VectorTile(new Pbf(tile));
                    var orig = vectorTileContent.layers['xzqgeojson'].feature(0).toGeoJSON(0, 0, 1);
                }
    }) 

I want to edit the pbf of mbtils after I parse the pbf to geojson and to save the edited pbf to the mbtils. Could you please tell me what I should to do?
Thanks!

Unimplemented type: 4

Hello. Thanks for sharing this! I'm using vector-tile-js to decode .pbfs on the client and draw in a Leaflet canvas layer. These are being served using PGRestAPI (https://github.com/spatialdev/PGRestAPI) both from pre-created .mbtiles files from TileMill2, and/or dynamically from PostGIS or Shapefiles. Most of the datasources I've tried have worked great, until just now. I loaded a global administrative boundary layer (GADM) into TileMill2, tiled it up, and am serving it up. I'm getting Unimplemented type: 4 in Protobuf.prototype.skip.

This seems to correspond to features probably with complicated geometries (maybe multipolygons - islands?), which in this dataset is happening mostly along coastlines.

...Notice most of the country's coastal districts are missing.

Zooming in to Daytona Beach - the tiles that are conspicuously missing actually have tiny little features drawn in them:

I am using deflate on the server when serving up the .pbfs, and, as I said, I'm not having any problems with other polygon, line or point feature types.

Any thoughts?
Thanks,
Ryan

Publicize the rest of llmr.js ?

I'm looking at https://www.mapbox.com/blog/mapbox-gl/ and I have noticed that PBF vector tiles are being rendered in the browser using llmr.js In fact, I can see that vector-tile-js is contained within this library.

Other cool things I'm noticing are WorkerTiles and Glyph Tiles. I see that the browser is downloading fonts and glyphs in PBF format. I am pretty amazed!

Will this be public on Github? I would love to get hacking on this.

bad data in water layers?

In the attached screen shot i have the water/waterway layers rendered. Tile coordinates are overlaid on the map. Are these additional lines supposed to be part of the water layer's vector data?

I can get rid of them by styling stroke color as transparent, but i am wondering why they are there at all. It seems that there is a single bad coordinate as part of some water polygons that causes these. I see them in multiple places and different zoom levels.

Typo in VectorTileFeature.js for Point type?

I was working on a script that turns geojson-vt JSON tiles back into GeoJSON files today. I noticed my points were coming out null and I had used vectortilefeature.js's toGeoJSON() method as a base for my code.

Is this a typo?

vector-tile-js/lib/vectortilefeature.js

Line 151 in 5c45395

points[i] = coords[i][0];

For me, changing:

points[i] = coords[i][0];

to:

points[i] = coords[i];

solved the problem. It's possible this is some quirk of geojson-vt or my code causing the problem, but I thought I would ask just in case it's a bug.

need to handle multiple layers with the same name

If you composite two VTs with the same layer name, the resulting vector tile will have two layers with that name.

Background:

• https://gist.github.com/springmeyer/3522514c85443b57e338
• mapbox/mapnik-vector-tile#20

Currently, vector-tile-js will drop all but the last encountered layer. Instead, it should either:

• merge features from all layers with the same name, or
• store layers in an array rather than a map

Add more test fixtures for full range of features & failure conditions

Would be great to expand on this coverage:

raster support

It's not in the spec, but it's in the mapnik-vector-tile implementation: https://github.com/mapbox/mapnik-vector-tile/blob/0c9d7cccfc884181721a88bce00d6b546a73660b/proto/vector_tile.proto#L72

@springmeyer When will this get added to the spec? Are there still any doubts?

Distinct polygons erroneously decoded as interior holes of another

Decoding this buffer gives me this geojson of contour polygons.

Filtering this featurecollection for geometries matching the property ele=700 gives me this subset of features (still geojson):

However, the above featurecollection has only two features: one for the large mass to the east, and a second that specifies the three slivers to the west as two holes within a third shape.

The three shapes clearly don't overlap, and should be distinct polys of their own.

vector-tile-js v2 proposal

This is a proposal for a breaking overhaul of vector-tile-js that will simplify the API, significantly improve performance, and streamline interoperability between related libraries. Previously: mapbox/mapbox-gl-js#10501

Vector Tile JS spec

There will be a specified format for representing vector tiles as pure JSON. Both the output of vector-tile-js and all related libraries (e.g. geojson-vt, supercluster) and the input for encoding (currently done by vt-pbf) will follow this format, now shared across the ecosystem.

This will ensure consistency and easy interoperability between vector-tile-js, geojson-vt, supercluster and mapbox-gl-js for both reading and writing vector data and avoid redundant wrappers and conversions between formats, improving performance and memory footprint.

JSON objects will replace the current hierarchy of classes (VectorTile, VectorTileLayer, VectorTileFeature). In particular, feature.loadGeometry() method will be replaced with feature.geometry property, making potential lazy decoding of features an internal implementation detail (e.g. using JS getters).

Flat geometry encoding

Instead of a special Point class to represent points in features, vector-tile-js and related libraries will use flat arrays of numbers ([x, y, x, y, ...]). This will minimize memory footprint when dealing with vector data, avoiding excessive array allocations in JS.

This is the most disruptive change, requiring an overhaul of all downstream code that processes vector tile geometry (specifically, bucket code in mapbox-gl-js), but with a potentially huge performance benefit.

Consistent geometry nesting

Instead of representing any type of geometry as an array of arrays of points, Vector Tile JS will use different nesting depending on type:

• Array<number> for points
• Array<Array<number>> for lines
• Array<Array<Array<number>>> for polygons

This will allow us to include polygon nesting information in the output, avoiding ring classification in donwstream code to simplify polygon processing and reduce redundant conversions. It will also reduce redundant array wrapping for point features.

We could also go futher and collapse the outer wrapping array for single-line and single-polygon features, further improving memory footprint at the expense of more involved handling code downstream, but first we need to test whether this overhead is significant in practice.

Vector Tile encoding

After we unify the API for representing vector tiles in JS, vt-pbf will no longer feel right as a separate library — we can merge it’s functionality into this one, which will do both encoding and decoding.

Other breaking changes

• feature.toGeoJSON(x, y, z) will likely become toGeoJSON(feature, x, y, z) — this will make it usable for other producers of vector tile data like geojson-vt and supercluster, and fit the new paradigm of features being accessed as JSON objects.
• Should we remove feature.extent? It’s a layer property which is currently also duplicated for every feature for unclear reasons.
• Should we remove feature.bbox()? It doesn’t appear to be used anywhere downstream, and there’s not much overhead to iterating over geometry to get a bbox instead.

cc @mapbox/gl-js @kkaefer

What is the role of vector tile serialization?

Please look at the questions in the picture.

Thanks,
Alice

TypeError: pbf.readVarint64 is not a function

https://github.com/mapbox/vector-tile-js/blob/master/lib/vectortilelayer.js#L44
Reference an not avalilable function

Vector Tiles generated by TM2 are not working.

I am trying to digest the basic usage of vector-tile-js, and the included test fixture vector.pbf file works, but everything I have tried generating from TM2 fails.

My workflow is simple. I go into the Source Composer view and set up a layer using GADM boundaries. I then export that to .mbtiles. I then pick out the individual tiles with tessera.

The following gist shows how I am trying to use this data:

https://gist.github.com/hallahan/11264750

The main one to look at is 4_3_5.vector.pbf. This one is just two layers, countries and states. This tile includes all of North and South Dakota, so these complete polygons should be in there.

When looking in the debugger, the constructor of the VectorTile object for the test fixture PBF has a tag == 3 on the first position in the buffer. All of the PBF that I have generated have some other value.

https://github.com/mapbox/vector-tile-js/blob/master/lib/vectortile.js#L23

What is significant about the tag being 3. How come my vector tiles don't do this?

What happens is that we get to buffer.skip(val). Then, the switch jumpts to default and throws:

default: throw new Error('Unimplemented type: ' + type);

Could you explain what is going on?

feature.toGeoJSON to return feature's ID

It would be convenient if the VectorTileFeature.toGeoJSON method returned feature's ID.

https://github.com/mapbox/vector-tile-js/blob/master/lib/vectortilefeature.js

...
return {
        _id: this._id, // proposal
        type: "Feature",
        geometry: {
            type: type,
            coordinates: coords
        },
        properties: this.properties
    };
...

Package activity and contributions

Hey @mourner, @anandthakker!
First of all - Thank you for your work in the package (and on the entire suite of packages and tools around it).

I have noticed the package has not been actively maintained in the past couple of years and would like to know:

• Is it still the most relevant package for loading MVTs in node / JS?
• Assuming it is - I have some ideas for some small enhancements (such as adding a _tags to VectorTileFeature, adding toJSON, etc). What would you suggest is the best way to handle them? I could fork the package but would rather have the enhancements more widely available.

Any browser ready version?

Hi,
Is there any browser ready version of this library which we can use it directly in browser without nodejs?