Skip to main content

TableTileSource

The TableTileSource slices large GeoJSON datasets into small vector tiles on the fly. Can enable rendering and interacting with large geospatial datasets in the browser without requiring data to be pre-tiled and tiles to be served from a server.

SourceCharacteristic
File ExtensionN/A - Any table with geometries
File TypeBinary Archive
File FormatMapbox Vector Tiles
Data FormatGeoJSON

Features:

  • Visualize bigger datasets - Useful for datasets in the "mid-size" range (perhaps from 100MB-1GB), where the dataset is "small" enough to be fully loaded into the browser, but is big enough that rendering the entire dataset every frame is too slow.
  • MVTLoader compatibility* - The resulting tiles conform to the output of the MVTLoader (which loads pre-tiled tiles into GeoJSON format).
  • Geometry simplification - The geometry content in the generated tiles is cut out from the larger input GeoJSON, and optimized further to only retain the minimum level of detail appropriate for each zoom level (shapes are simplified and tiny polygons and line segments are filtered out).

Install​

npm install @loaders.gl/mvt

Or just import via a browser script tag:

<script src="https://unpkg.com/@loaders.gl/mvt/dist/dist.min.js"></script>

Usage​

import {TableTileSource} from '@loaders.gl/mvt';
import {GeoJSONLoader} from '@loaders.gl/json';

// build an initial index of tiles. Convieniently,
const tileSource = new TableTileSource(load(url, GeoJSONLoader));

// request a particular tile
const features = tileSource.getTile(z, x, y).features;

Output Format​

The tiles are in geojson table format.

Options​

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

OptionDefaultDescription
coordinates'wgs84'Set to'local' to return tile-relative coordinates [0-1].
maxZoom14Max zoom to preserve detail on; can't be higher than 24
generateIdfalseWhether to generate feature ids.
promoteIdN/AName of a feature property to use for feature.id.
tolerance3Simplification tolerance (higher means simpler)
indexMaxZoom5Max zoom in the initial tile index
indexMaxPoints100000Max number of points per tile in the index
debug0Logging level (0 to disable, 1 or 2)
lineMetricsfalseEnable line metrics tracking for LineString/MultiLineString features
extent4096tile extent (both width and height)
buffer64Tile buffer on each side
import {TableTileSource} from '@loaders.gl/mvt`
const tileSource = new TableTileSource(parsedGeojson, {
maxZoom: 14, // max zoom to preserve detail on; can't be higher than 24
tolerance: 3, // simplification tolerance (higher means simpler)
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
extent: 4096, // tile extent (both width and height)
buffer: 64, // tile buffer on each side
});

Remarks:

  • generateId and promoteId options cannot both be specified at the same time.
  • generateId and promoteId options ignore existing id values on the feature objects.
  • 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.
  • TableTileSource only generates tiles zoom levels up to 24.

Methods​

constructor​

new TableTileSource(geojson: GeoJSONTable | Promise<GeoJSONTable>);

Attribution​

Includes a fork of Mapbox / Vladimir Agafonkin's geojson-vt module which is under ISC License.