A highly efficient JavaScript library for slicing GeoJSON data into vector tiles on the fly, primarily designed to enable rendering and interacting with large geospatial datasets on the browser side (without a server).
Created to power GeoJSON in Mapbox GL JS, but can be useful in other visualization platforms like Leaflet and d3, as well as Node.js server applications.
Resulting tiles conform to the JSON equivalent of the vector tile specification. To make data rendering and interaction fast, the tiles are simplified, retaining the minimum level of detail appropriate for each zoom level (simplifying shapes, filtering out tiny polygons and polylines).
Read more on how the library works on the Mapbox blog.
There's a C++11 port: geojson-vt-cpp
Here's geojson-vt action in Mapbox GL JS, dynamically loading a 100Mb US zip codes GeoJSON with 5.4 million points:
There's a convenient debug page to test out geojson-vt on different data. Just drag any GeoJSON on the page, watching the console.
// build an initial index of tiles
var tileIndex = geojsonvt(geoJSON);
// request a particular tile
var features = tileIndex.getTile(z, x, y).features;
// show an array of tile coordinates created so far
console.log(tileIndex.tileCoords); // [{z: 0, x: 0, y: 0}, ...]Calling getTile(z,x,y,false) will only return a single tile.
Calling getTile(z,x,y,false, true) will return an array of tiles, starting with the tile you requested and up to all of it's parents.
Calling getTile with the first false parameter also clear the entire index, it's designed to be used for pure on-the-fly generation (indexMaxZoom:0).
####Tile Streaming
An additional property is exposed on the tileIndex, rs. This is designed to be used when you want to pre-generate tiles as described in the options, but don't have enough memory to store them all at once, and you're intending to write them out to somewhere else, like a file or database. The output stream is in object mode.
You can fine-tune the results with an options object, although the defaults are sensible and work well for most use cases.
var tileIndex = geojsonvt(data, {
maxZoom: 14, // max zoom to preserve detail on; can't be higher than 24
tolerance: 3, // simplification tolerance (higher means simpler)
extent: 4096, // tile extent (both width and height)
buffer: 64, // tile buffer on each side
debug: 0, // logging level (0 to disable, 1 or 2)
lineMetrics: false, // whether to enable line metrics tracking for LineString/MultiLineString features
promoteId: null, // name of a feature property to promote to feature.id. Cannot be used with `generateId`
generateId: false, // whether to generate feature ids. Cannot be used with `promoteId`
indexMaxZoom: 5, // max zoom in the initial tile index
indexMaxPoints: 100000 // max number of points per tile in the index,
useStream:true, // emit tiles to a stream as they are generated. Must be explicitly set, default false.
clearStreamIfMoreThanXCached: 1000 //clear the stream if more than X tiles are cached. Turn it down on systems which are very tightly memory constrained.
});By default, tiles at zoom levels above indexMaxZoom are generated on the fly, but you can pre-generate all possible tiles for data by setting indexMaxZoom and maxZoom to the same value, setting indexMaxPoints to 0, and then accessing the resulting tile coordinates from the tileCoords property of tileIndex.
The promoteId and generateId options ignore existing id values on the feature objects.
GeoJSON-VT only operates on zoom levels up to 24.
Install using NPM (npm install geojson-vt) or Yarn (yarn add geojson-vt), then:
// import as a ES module
import geojsonvt from 'geojson-vt';
// or require in Node / Browserify
const geojsonvt = require('geojson-vt');Or use a browser build directly:
<script src="https://unpkg.com/geojson-vt@3.2.0/geojson-vt.js"></script>