To help you get started, we've collected the most common ways that @mapbox/vector-tile is being used within popular public projects.

w3reality / three-geo / src / index.js View on Github

this.blobToBuffer(blob, (buffer) => {
                        // console.log('blob -> buffer:', buffer); // ArrayBuffer(39353) {}
                        try {
                            let pbf = new Pbf(buffer);
                            cb(new VectorTile(pbf));
                        } catch (e) {
                            // console.log('e:', e);
                            cb(null);
                            return;
                        }
                    });
                });

View more ways to use @mapbox/vector-tile

vector-tile

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

Example

import {VectorTile} from '@mapbox/vector-tile';
import Protobuf from 'pbf';

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

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

const 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:

import {VectorTile} from '@mapbox/vector-tile';
import Protobuf from 'pbf';
import {gunzipSync} from 'zlib';

const buffer = gunzipSync(data);
const tile = new VectorTile(new Protobuf(buffer));

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 {: , ...}, 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.)