2GIS GeoJSON Vector Tiles

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).

Originally created to power GeoJSON in Mapbox GL JS, was forked to meet special requirements of 2GIS MapGL JS API.

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

Demo

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.

Usage

1// build an initial index of tiles
2var tileIndex = geojsonvt(geoJSON);
3
4// request a particular tile
5var features = tileIndex.getTile(z, x, y).features;
6
7// show an array of tile coordinates created so far
8console.log(tileIndex.tileCoords); // [{z: 0, x: 0, y: 0}, ...]

Options

You can fine-tune the results with an options object, although the defaults are sensible and work well for most use cases.

1var tileIndex = geojsonvt(data, {
2    maxZoom: 14, // max zoom to preserve detail on; can't be higher than 24
3    tolerance: 3, // simplification tolerance (higher means simpler)
4    extent: 4096, // tile extent (both width and height)
5    buffer: 64, // tile buffer on each side
6    debug: 0, // logging level (0 to disable, 1 or 2)
7    lineMetrics: false, // whether to enable line metrics tracking for LineString/MultiLineString features
8    promoteId: null, // name of a feature property to promote to feature.id. Cannot be used with `generateId`
9    generateId: false, // whether to generate feature ids. Cannot be used with `promoteId`
10    generateIndex: false, // whether to generate feature indexes
11    indexMaxZoom: 5, // max zoom in the initial tile index
12    indexMaxPoints: 100000, // max number of points per tile in the index
13    dimensions: 2, // number of coordinates per vertex in the input array (2 by default)
14    cuts: false, // whether to generate cuts in last component of polygon and line points (false by default)
15});

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

Install using NPM (npm install @2gis/geojson-vt) or Yarn (yarn add @2gis/geojson-vt), then:

1// import as a ES module
2import geojsonvt from "@2gis/geojson-vt";
3
4// or require in Node / Browserify
5const geojsonvt = require("@2gis/geojson-vt");

Or use a browser build directly:

1<script src="https://unpkg.com/@2gis/geojson-vt@3.4.1/geojson-vt.js"></script>

Publishing new version

Deploy and publishing should be made on local developer machine.

1. Ensure all deploying features are merged to main branch.
2. Switch to branch main and type npm version patch | minor | major
3. Type npm run pub to build and publish new package version to npm.
4. Do not forget to push changes in local main made by npm version command (new version commit and tag) to remote.

What's new in this fork?

• TypeScript support.
• Option dimensions allows processing additional data per vertex (e.g., third coordinate for elevation).
• Option cuts enables marking vertices where original geometry was clipped.
• Option generateIndex enables generating and saving features indexes in tile features.