Top Related Projects
π JavaScript library for mobile-friendly interactive maps πΊπ¦
A modular geospatial engine written in JavaScript and TypeScript
An extension of GeoJSON that encodes topology! π
Build vector tilesets from large collections of GeoJSON features.
Quick Overview
GeoJSON-VT is a JavaScript library that efficiently converts GeoJSON data into vector tiles on the fly. It allows for fast rendering of large GeoJSON datasets by splitting them into smaller, manageable tiles at different zoom levels, making it ideal for interactive web mapping applications.
Pros
- Fast and efficient processing of large GeoJSON datasets
- On-the-fly tiling without the need for pre-processing
- Supports client-side tiling, reducing server load
- Seamless integration with popular mapping libraries like Mapbox GL JS
Cons
- Limited to GeoJSON input format
- May not be suitable for extremely large datasets that exceed browser memory limits
- Lacks advanced styling options compared to server-side tiling solutions
- Performance can vary depending on the client device's capabilities
Code Examples
- Creating a GeoJSON-VT index:
import geojsonvt from 'geojson-vt';
const geojson = { /* your GeoJSON data */ };
const index = geojsonvt(geojson);
- Retrieving a tile:
const tile = index.getTile(z, x, y);
- Customizing tiling options:
const options = {
maxZoom: 14,
tolerance: 3,
extent: 4096,
buffer: 64,
debug: 0,
lineMetrics: false,
promoteId: null,
generateId: false,
indexMaxZoom: 5,
indexMaxPoints: 100000
};
const index = geojsonvt(geojson, options);
Getting Started
- Install the library:
npm install geojson-vt
- Import and use in your project:
import geojsonvt from 'geojson-vt';
const geojson = { /* your GeoJSON data */ };
const index = geojsonvt(geojson);
// Get a tile at zoom level 12, x coordinate 1234, y coordinate 5678
const tile = index.getTile(12, 1234, 5678);
// Use the tile data with your mapping library
Competitor Comparisons
π JavaScript library for mobile-friendly interactive maps πΊπ¦
Pros of Leaflet
- Full-featured mapping library with a wide range of functionalities
- Large community and extensive plugin ecosystem
- Supports various map providers and layer types
Cons of Leaflet
- Larger file size and potentially higher resource usage
- May be overkill for simple GeoJSON rendering tasks
- Less specialized for handling large GeoJSON datasets
Code Comparison
Leaflet:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.geoJSON(geojsonData).addTo(map);
geojson-vt:
var tileIndex = geojsonvt(geojsonData);
var tile = tileIndex.getTile(z, x, y);
// Render tile using canvas or other methods
Key Differences
- Leaflet is a complete mapping solution, while geojson-vt focuses on GeoJSON vector tile generation
- geojson-vt is more efficient for handling large GeoJSON datasets and creating vector tiles on-the-fly
- Leaflet provides out-of-the-box rendering and interactivity, whereas geojson-vt requires additional implementation for visualization
Use Cases
- Choose Leaflet for full-featured web mapping applications with various data sources and interactivity needs
- Opt for geojson-vt when dealing with large GeoJSON datasets and requiring efficient vector tile generation, especially for custom rendering solutions
A modular geospatial engine written in JavaScript and TypeScript
Pros of Turf
- Offers a wide range of geospatial analysis functions
- Supports both client-side and server-side usage
- Has an active community and regular updates
Cons of Turf
- Can be slower for large datasets compared to geojson-vt
- Larger file size, which may impact load times in browser environments
Code Comparison
geojson-vt:
var tileIndex = geojsonvt(geojson);
var tile = tileIndex.getTile(z, x, y);
Turf:
var point = turf.point([-75.343, 39.984]);
var buffer = turf.buffer(point, 50, {units: 'miles'});
Summary
Turf is a comprehensive geospatial analysis library with a wide range of functions, suitable for both client and server environments. It offers more versatility but may be slower for large datasets. geojson-vt, on the other hand, is specifically designed for efficient vector tile generation from GeoJSON data, making it faster for that particular use case but less versatile overall.
An extension of GeoJSON that encodes topology! π
Pros of TopoJSON
- Significantly reduces file size by encoding topology
- Supports lossless compression of shared boundaries
- Allows for efficient topology operations like merging and simplification
Cons of TopoJSON
- Requires conversion from GeoJSON, adding complexity
- Less widely supported than GeoJSON in some tools and libraries
- May have slower parsing times for large datasets
Code Comparison
TopoJSON:
{
"type": "Topology",
"objects": {
"example": {
"type": "GeometryCollection",
"geometries": [
{"type": "Polygon", "arcs": [[0,1,2,3]]}
]
}
},
"arcs": [
[[0,0], [1,0], [0,1], [-1,0], [0,-1]]
]
}
GeoJSON-VT:
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[[0,0], [1,0], [1,1], [0,1], [0,0]]]
},
"properties": {}
}
TopoJSON encodes topology and shared boundaries, resulting in more compact representations for complex geometries. GeoJSON-VT, on the other hand, uses standard GeoJSON format, which is simpler but potentially larger for datasets with many shared boundaries.
Build vector tilesets from large collections of GeoJSON features.
Pros of tippecanoe
- Handles larger datasets more efficiently
- Produces smaller output files with better compression
- Offers more advanced filtering and attribute manipulation options
Cons of tippecanoe
- Requires installation and command-line usage
- Steeper learning curve for beginners
- Less suitable for real-time or client-side processing
Code comparison
tippecanoe:
tippecanoe -o output.mbtiles input.geojson
geojson-vt:
const geojsonvt = require('geojson-vt');
const tileIndex = geojsonvt(geojsonData);
const tile = tileIndex.getTile(z, x, y);
Summary
tippecanoe is a powerful tool for processing large GeoJSON datasets into vector tiles, offering advanced features and optimizations. It's ideal for server-side preprocessing of large datasets.
geojson-vt is a lightweight JavaScript library for on-the-fly tiling of GeoJSON data. It's better suited for client-side processing and real-time applications with smaller datasets.
Choose tippecanoe for batch processing large datasets with complex requirements, and geojson-vt for simpler, client-side tiling needs or when working with smaller datasets in real-time applications.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
geojson-vt β 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).
Created to power GeoJSON in Mapbox GL JS, but can be useful in other visualization platforms like Leaflet, OpenLayers 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
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
// 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}, ...]
Options
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
});
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 geojson-vt
), then:
// import as a ES module
import geojsonvt from 'geojson-vt';
// import from a CDN in the browser:
import geojsonvt from 'https://esm.run/geojson-vt';
Or use a browser build directly:
<script src="https://unpkg.com/geojson-vt/geojson-vt.js"></script>
Top Related Projects
π JavaScript library for mobile-friendly interactive maps πΊπ¦
A modular geospatial engine written in JavaScript and TypeScript
An extension of GeoJSON that encodes topology! π
Build vector tilesets from large collections of GeoJSON features.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot