nd-vector-tile

Convert GeoJSON FeatureCollections into Mapbox Vector Tiles (MVT / .mvt) using:

• geojson-vt for tiling
• vt-pbf for encoding to protobuf bytes

This package provides:

• Universal API: create a tile index and generate a tile (Uint8Array) for a given {z,x,y}.
• Node API: export a tile pyramid to disk as {z}/{x}/{y}.mvt.

Installation

npm i nd-vector-tile

Package entrypoints

• Main entry (universal):
  import { createTileIndex } from "nd-vector-tile"

• Node-only entry (file exporting):
  import { exportGeoJSONToVectorTiles } from "nd-vector-tile/node"

⚠️ nd-vector-tile/node uses node:fs/promises and node:path, so it must be used in Node (server-side only).

Usage

import { exportGeoJSONToVectorTiles } from "nd-vector-tile/node";
import { readFile } from "node:fs/promises";

const geojson = JSON.parse(await readFile("data.json", "utf8"));

const res = await exportGeoJSONToVectorTiles(geojson, "./tiles", {
  minZoom: 0,
  maxZoom: 14,
  layerName: "layerName",
  vtOptions: {
    maxZoom: 14,
    indexMaxZoom: 14, // also recommended
  },
});

console.log("Result is:", res);

Leaflet example

Leaflet’s default L.tileLayer is for raster tiles. To render .mvt vector tiles, use Leaflet.VectorGrid.

Install

npm i leaflet leaflet.vectorgrid

Render vector tiles

import L from "leaflet";
import "leaflet.vectorgrid";

const map = L.map("map", {
  center: [28.3949, 84.124],
  zoom: 8,
  maxZoom: 14,
});

// Optional raster basemap
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 14,
}).addTo(map);

// Vector tiles from your server/public directory
const vt = (L as any).vectorGrid.protobuf("/tiles/{z}/{x}/{y}.mvt", {
  maxZoom: 14,
  interactive: true,
  vectorTileLayerStyles: {
    nepalLayer: (props: any) => ({
      fill: true,
      fillColor: props?.["fill"] ?? "#3388ff",
      fillOpacity: clamp01(Number(props?.["fill-opacity"] ?? 0.2)),
      color: props?.["stroke"] ?? "#222",
      weight: Number(props?.["stroke-width"] ?? 1),
      opacity: clamp01(Number(props?.["stroke-opacity"] ?? 1)),
    }),
  },
});

vt.addTo(map);

function clamp01(v: number) {
  if (!Number.isFinite(v)) return 1;
  return Math.max(0, Math.min(1, v));
}

Handling missing tiles (Laravel tip)

If you export tiles only for a dataset bbox, some {z,x,y} requests outside the dataset will not exist. In Laravel you can return an empty 204 instead of a 404 to reduce console noise.

License

ISC