Convert Figma logo to code with AI

mapbox logogeojson-vt

Slice GeoJSON into vector tiles on the fly in the browser

1,971
273
1,971
19

Top Related Projects

43,292

πŸƒ JavaScript library for mobile-friendly interactive maps πŸ‡ΊπŸ‡¦

9,805

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

  1. Creating a GeoJSON-VT index:
import geojsonvt from 'geojson-vt';

const geojson = { /* your GeoJSON data */ };
const index = geojsonvt(geojson);
  1. Retrieving a tile:
const tile = index.getTile(z, x, y);
  1. 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

  1. Install the library:
npm install geojson-vt
  1. 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

43,292

πŸƒ 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
9,805

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

geojson-vt β€” GeoJSON Vector Tiles Node

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>

NPM DownloadsLast 30 Days