npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@maptalks/geojson-vt

v3.5.0

Published

Slice GeoJSON data into vector tiles efficiently(maptalks fork)

Downloads

320

Readme

geojson-vt — GeoJSON Vector Tiles

Fork of mapbox/geojson-vt, add some functions.

Build Status

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}, ...]

Multi data source with layer name

// build an initial index of tiles
var tileIndex = geojsonvt([
	{
		layer: 'layer-1',
		data: geoJSON
	},
	{
		layer: 'layer-2',
		data: geoJSON
	}
]);

// request a particular tile
var features = tileIndex.getTile(z, x, y).features;
// each feature in features will have a extra property 'layer'

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`
    hasAltitude: false,     // whether input data has altitude
    disableFilter: false,   // whether filter by size(length for polyline, area for polygon)
	indexMaxZoom: 5,       // max zoom in the initial tile index
	indexMaxPoints: 100000 // max number of points per tile in the index
});

Added options

  • hasAltitude, to support data with altitude(if coordinate has no altitude, altitude default to 0 internally)
  • disableFilter, to disable filter line/polygon by it's size

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 @maptalks/geojson-vt) or Yarn (yarn add @maptalks/geojson-vt), then:

// import as a ES module
import geojsonvt from '@maptalks/geojson-vt';

// or require in Node / Browserify
const geojsonvt = require('@maptalks/geojson-vt');

Or use a browser build directly:

<script src="https://unpkg.com/@maptalks/[email protected]/geojson-vt.js"></script>