@loaders.gl/mvt 4.3.0-alpha.2 → 4.3.0-alpha.3

package/dist/table-tile-source.js

@@ -5,13 +5,51 @@
 import { log } from '@loaders.gl/loader-utils';
 import { deduceTableSchema } from '@loaders.gl/schema';
 import { Stats, Stat } from '@probe.gl/stats';
-import { convert } from "./lib/vector-tiler/convert.js"; // GeoJSON conversion and preprocessing
-import { clip } from "./lib/vector-tiler/clip.js"; // stripe clipping algorithm
-import { wrap } from "./lib/vector-tiler/wrap.js"; // date line processing
-import { transformTile } from "./lib/vector-tiler/transform.js"; // coordinate transformation
-import { createTile } from "./lib/vector-tiler/tile.js"; // final simplified tile generation
-import { projectToLngLat } from "./lib/utils/geometry-utils.js";
-import { convertToLocalCoordinates } from "./lib/utils/geometry-utils.js";
+import { createProtoTile } from "./lib/vector-tiler/proto-tile.js";
+import { transformTile } from "./lib/vector-tiler/transform-tile.js"; // coordinate transformation
+import { convertTileToGeoJSON } from "./lib/vector-tiler/tile-to-geojson.js"; // tile clipping and wrapping
+import { convertFeaturesToProtoFeature } from "./lib/vector-tiler/features/convert-feature.js";
+import { clipFeatures } from "./lib/vector-tiler/features/clip-features.js"; // stripe clipping algorithm
+import { wrapFeatures } from "./lib/vector-tiler/features/wrap-features.js"; // date line processing
+/** Options to configure tiling */
+export const TableTileSource = {
+    name: 'TableTiler',
+    id: 'table-tiler',
+    version: '0.0.0',
+    extensions: ['mvt'],
+    mimeTypes: ['application/octet-stream'],
+    options: {
+        table: {
+            coordinates: 'local',
+            promoteId: undefined,
+            maxZoom: 14,
+            indexMaxZoom: 5,
+            maxPointsPerTile: 10000,
+            tolerance: 3,
+            extent: 4096,
+            buffer: 64,
+            generateId: undefined
+        }
+    },
+    type: 'table',
+    testURL: (url) => url.endsWith('.geojson'),
+    createDataSource(url, options) {
+        const needsLoading = typeof url === 'string' || url instanceof Blob;
+        const loader = options?.table?.loaders?.[0];
+        const tablePromise = needsLoading ? loadTable(url, loader) : url;
+        return new DynamicVectorTileSource(tablePromise, options);
+    }
+    // @ts-expect-error
+};
+async function loadTable(url, loader) {
+    if (typeof url === 'string') {
+        const response = await fetch(url);
+        const data = await response.arrayBuffer();
+        return (await loader.parse(data));
+    }
+    const data = await url.arrayBuffer();
+    return (await loader.parse(data)); //  options.loaders, options.loadOptions)
+}
 /**
  * Dynamically vector tiles a table (the table needs a geometry column)
  * - Tiles are generated when requested.
@@ -27,27 +65,13 @@ import { convertToLocalCoordinates } from "./lib/utils/geometry-utils.js";
  * @todo - generate binary output tables
  * @todo - how does TileSourceLayer specify coordinates / decided which layer to render with
  */
-export class TableTileSource {
-    static defaultProps = {
-        coordinates: 'wgs84', // coordinates in tile coordinates or lng/lat
-        maxZoom: 14, // max zoom to preserve detail on
-        indexMaxZoom: 5, // max zoom in the tile index
-        maxPointsPerTile: 100000, // max number of points per tile in the tile index
-        tolerance: 3, // simplification tolerance (higher means simpler)
-        extent: 4096, // tile extent
-        buffer: 64, // tile buffer on each side
-        lineMetrics: false, // whether to calculate line metrics
-        // @ts-expect-error
-        promoteId: undefined, // name of a feature property to be promoted to feature.id
-        generateId: false, // whether to generate feature ids. Cannot be used with promoteId
-        debug: 0 // logging level (0, 1 or 2)
-    };
-    /** Global stats for all TableTileSources */
+export class DynamicVectorTileSource {
+    /** Global stats for all DynamicVectorTileSources */
     static stats = new Stats({
         id: 'table-tile-source-all',
         stats: [new Stat('count', 'tiles'), new Stat('count', 'features')]
     });
-    /** Stats for this TableTileSource */
+    /** Stats for this DynamicVectorTileSource */
     stats = new Stats({
         id: 'table-tile-source',
         stats: [new Stat('tiles', 'count'), new Stat('features', 'count')]
@@ -56,6 +80,7 @@ export class TableTileSource {
     mimeType = 'application/vnd.mapbox-vector-tile';
     localCoordinates = true;
     /** The props that this tile source was created with */
+    // @ts-expect-error
     props;
     /* Schema of the data */
     schema = null;
@@ -68,7 +93,8 @@ export class TableTileSource {
     /** Metadata for the tile source (generated TileJSON/tilestats */
     metadata;
     constructor(table, props) {
-        this.props = { ...TableTileSource.defaultProps, ...props };
+        // @ts-expect-error
+        this.props = { ...TableTileSource.options.table, ...props?.table };
         this.getTileData = this.getTileData.bind(this);
         this.ready = this.initializeTilesAsync(table);
         this.metadata = this.getMetadata();
@@ -112,11 +138,11 @@ export class TableTileSource {
      * @note Application must await `source.ready` before calling sync methods.
      */
     getTileSync(tileIndex) {
-        const rawTile = this.getRawTile(tileIndex);
-        if (!rawTile) {
+        const protoTile = this.getProtoTile(tileIndex);
+        if (!protoTile) {
             return null;
         }
-        return convertToGeoJSONTable(rawTile, {
+        return convertTileToGeoJSON(protoTile, {
             coordinates: this.props.coordinates,
             tileIndex,
             extent: this.props.extent
@@ -133,31 +159,31 @@ export class TableTileSource {
         if (this.props.promoteId && this.props.generateId) {
             throw new Error('promoteId and generateId cannot be used together.');
         }
-        log.log(1, 'TableTileSource creating root tiles', this.props)();
+        log.log(1, 'DynamicVectorTileSource creating root tiles', this.props)();
         // projects and adds simplification info
         log.time(1, 'preprocess table')();
-        let features = convert(table, this.props);
+        let features = convertFeaturesToProtoFeature(table, this.props);
         log.timeEnd(1, 'preprocess table')();
         // wraps features (ie extreme west and extreme east)
         log.time(1, 'generate tiles')();
-        features = wrap(features, this.props);
+        features = wrapFeatures(features, this.props);
         // start slicing from the top tile down
         if (features.length === 0) {
-            log.log(1, 'TableTileSource: no features generated')();
+            log.log(1, 'DynamicVectorTileSource: no features generated')();
             return;
         }
         this.splitTile(features, 0, 0, 0);
         const rootTile = this.tiles[0];
         log.log(1, `root tile features: ${rootTile.numFeatures}, points: ${rootTile.numPoints}`)();
         log.timeEnd(1, 'generate tiles')();
-        log.log(1, `TableTileSource: tiles generated: ${this.stats.get('total').count}`, this.stats)();
+        log.log(1, `DynamicVectorTileSource: tiles generated: ${this.stats.get('total').count}`, this.stats)();
     }
     /**
      * Return geojsonvt-style "half formed" vector tile
      * @note Application must await `source.ready` before calling sync methods.
      */
     // eslint-disable-next-line complexity, max-statements
-    getRawTile(tileIndex) {
+    getProtoTile(tileIndex) {
         const { z, y } = tileIndex;
         let { x } = tileIndex;
         // z = +z;
@@ -168,7 +194,7 @@ export class TableTileSource {
             return null;
         }
         const z2 = 1 << z;
-        x = (x + z2) & (z2 - 1); // wrap tile x coordinate
+        x = (x + z2) & (z2 - 1); // wrapFeatures tile x coordinate
         const id = toID(z, x, y);
         if (this.tiles[id]) {
             return transformTile(this.tiles[id], extent);
@@ -184,13 +210,13 @@ export class TableTileSource {
             y0 = y0 >> 1;
             parent = this.tiles[toID(z0, x0, y0)];
         }
-        if (!parent || !parent.source) {
+        if (!parent || !parent.sourceFeatures) {
             return null;
         }
         // if we found a parent tile containing the original geometry, we can drill down from it
         log.log(1, 'found parent tile z%d-%d-%d', z0, x0, y0)();
         log.time(1, 'drilling down')();
-        this.splitTile(parent.source, z0, x0, y0, z, x, y);
+        this.splitTile(parent.sourceFeatures, z0, x0, y0, z, x, y);
         log.timeEnd(1, 'drilling down')();
         return this.tiles[id] ? transformTile(this.tiles[id], extent) : null;
     }
@@ -216,23 +242,23 @@ export class TableTileSource {
             let tile = this.tiles[id];
             if (!tile) {
                 log.time(2, 'tile creation')();
-                tile = this.tiles[id] = createTile(features, z, x, y, this.props);
+                tile = this.tiles[id] = createProtoTile(features, z, x, y, this.props);
                 this.tileCoords.push({ z, x, y });
                 const key = `z${z}`;
                 let stat = this.stats.get(key, 'count');
                 stat.incrementCount();
                 stat = this.stats.get('total');
                 stat.incrementCount();
-                stat = TableTileSource.stats.get(key, 'count');
+                stat = DynamicVectorTileSource.stats.get(key, 'count');
                 stat.incrementCount();
-                stat = TableTileSource.stats.get('total');
+                stat = DynamicVectorTileSource.stats.get('total');
                 stat.incrementCount();
                 log.log(2, 'tile z%d-%d-%d (features: %d, points: %d, simplified: %d)', z, x, y, tile.numFeatures, tile.numPoints, tile.numSimplified)();
                 log.timeEnd(2, 'tile creation')();
             }
             // save reference to original geometry in tile so that we can drill down later if we stop now
-            tile.source = features;
-            /** eslint-disable no-continue */
+            tile.sourceFeatures = features;
+            /* eslint-disable no-continue */
             // if it's the first-pass tiling
             if (cz === undefined) {
                 // stop tiling if we reached max zoom, or if the tile is too simple
@@ -254,7 +280,7 @@ export class TableTileSource {
                 }
             }
             // if we slice further down, no need to keep source geometry
-            tile.source = null;
+            tile.sourceFeatures = null;
             if (features.length === 0)
                 continue;
             log.time(2, 'clipping tile')();
@@ -267,18 +293,18 @@ export class TableTileSource {
             let bl = null;
             let tr = null;
             let br = null;
-            let left = clip(features, z2, x - k1, x + k3, 0, tile.minX, tile.maxX, this.props);
-            let right = clip(features, z2, x + k2, x + k4, 0, tile.minX, tile.maxX, this.props);
+            let left = clipFeatures(features, z2, x - k1, x + k3, 0, tile.minX, tile.maxX, this.props);
+            let right = clipFeatures(features, z2, x + k2, x + k4, 0, tile.minX, tile.maxX, this.props);
             // @ts-expect-error - unclear why this is needed?
             features = null;
             if (left) {
-                tl = clip(left, z2, y - k1, y + k3, 1, tile.minY, tile.maxY, this.props);
-                bl = clip(left, z2, y + k2, y + k4, 1, tile.minY, tile.maxY, this.props);
+                tl = clipFeatures(left, z2, y - k1, y + k3, 1, tile.minY, tile.maxY, this.props);
+                bl = clipFeatures(left, z2, y + k2, y + k4, 1, tile.minY, tile.maxY, this.props);
                 left = null;
             }
             if (right) {
-                tr = clip(right, z2, y - k1, y + k3, 1, tile.minY, tile.maxY, this.props);
-                br = clip(right, z2, y + k2, y + k4, 1, tile.minY, tile.maxY, this.props);
+                tr = clipFeatures(right, z2, y - k1, y + k3, 1, tile.minY, tile.maxY, this.props);
+                br = clipFeatures(right, z2, y + k2, y + k4, 1, tile.minY, tile.maxY, this.props);
                 right = null;
             }
             log.timeEnd(2, 'clipping tile')();
@@ -292,79 +318,103 @@ export class TableTileSource {
 function toID(z, x, y) {
     return ((1 << z) * y + x) * 32 + z;
 }
+/*
+
 // eslint-disable-next-line max-statements, complexity
-function convertToGeoJSONTable(vtTile, props) {
-    const features = [];
-    for (const rawFeature of vtTile.features) {
-        if (!rawFeature || !rawFeature.geometry) {
-            continue;
+function convertToGeoJSONTable(
+  vtTile: ProtoTile,
+  props: {
+    coordinates: 'local' | 'wgs84' | 'EPSG:4326';
+    tileIndex: {x: number; y: number; z: number};
+    extent: number;
+  }
+): GeoJSONTable | null {
+  const features: Feature[] = [];
+  for (const rawFeature of vtTile.features) {
+    if (!rawFeature || !rawFeature.geometry) {
+      continue;
+    }
+
+    let type:
+      | 'Point'
+      | 'MultiPoint'
+      | 'LineString'
+      | 'MultiLineString'
+      | 'Polygon'
+      | 'MultiPolygon';
+
+    let coordinates: any;
+
+    // raw geometry
+    switch (rawFeature.type) {
+      case 1:
+        if (rawFeature.geometry.length === 1) {
+          type = 'Point';
+          coordinates = rawFeature.geometry[0];
+        } else {
+          type = 'MultiPoint';
+          coordinates = rawFeature.geometry;
         }
-        let type;
-        let coordinates;
-        // raw geometry
-        switch (rawFeature.type) {
-            case 1:
-                if (rawFeature.geometry.length === 1) {
-                    type = 'Point';
-                    coordinates = rawFeature.geometry[0];
-                }
-                else {
-                    type = 'MultiPoint';
-                    coordinates = rawFeature.geometry;
-                }
-                break;
-            case 2:
-                if (rawFeature.geometry.length === 1) {
-                    type = 'LineString';
-                    coordinates = rawFeature.geometry[0];
-                }
-                else {
-                    type = 'MultiLineString';
-                    coordinates = rawFeature.geometry;
-                }
-                break;
-            case 3:
-                if (rawFeature.geometry.length > 1) {
-                    type = 'MultiPolygon';
-                    coordinates = [rawFeature.geometry];
-                }
-                else {
-                    type = 'Polygon';
-                    coordinates = rawFeature.geometry;
-                }
-                break;
-            default:
-                continue;
+        break;
+      case 2:
+        if (rawFeature.geometry.length === 1) {
+          type = 'LineString';
+          coordinates = rawFeature.geometry[0];
+        } else {
+          type = 'MultiLineString';
+          coordinates = rawFeature.geometry;
         }
-        switch (props.coordinates) {
-            case 'EPSG:4326':
-            case 'wgs84':
-                projectToLngLat(coordinates, props.tileIndex, props.extent);
-                break;
-            case 'local':
-                convertToLocalCoordinates(coordinates, props.extent);
-                break;
-            default:
-                throw new Error(`Unsupported CRS ${props.coordinates}`);
+        break;
+      case 3:
+        if (rawFeature.geometry.length > 1) {
+          type = 'MultiPolygon';
+          coordinates = [rawFeature.geometry];
+        } else {
+          type = 'Polygon';
+          coordinates = rawFeature.geometry;
         }
-        const feature = {
-            type: 'Feature',
-            geometry: {
-                type,
-                coordinates
-            },
-            properties: rawFeature.tags || {},
-            id: rawFeature.id
-        };
-        features.push(feature);
+        break;
+      default:
+        continue;
     }
-    if (features.length === 0) {
-        return null;
+
+    switch (props.coordinates) {
+      case 'EPSG:4326':
+      case 'wgs84':
+        projectToLngLat(coordinates, props.tileIndex, props.extent);
+        break;
+
+      case 'local':
+        convertToLocalCoordinates(coordinates, props.extent);
+        break;
+
+      default:
+        throw new Error(`Unsupported CRS ${props.coordinates}`);
     }
-    const table = {
-        shape: 'geojson-table',
-        type: 'FeatureCollection',
-        features
+
+    const feature: Feature = {
+      type: 'Feature',
+      geometry: {
+        type,
+        coordinates
+      },
+      properties: rawFeature.tags || {},
+      id: rawFeature.id
     };
-    return table;
+
+    features.push(feature);
+  }
+
+  if (features.length === 0) {
+    return null;
+  }
+
+  const table: GeoJSONTable = {
+    shape: 'geojson-table',
+    type: 'FeatureCollection',
+    features
+  };
+
+  return table;
 }
+*/

package/dist/tilejson-loader.js

@@ -4,7 +4,7 @@
 import { parseTileJSON } from "./lib/parse-tilejson.js";
 // __VERSION__ is injected by babel-plugin-version-inline
 // @ts-ignore TS2304: Cannot find name '__VERSION__'.
-const VERSION = typeof "4.3.0-alpha.1" !== 'undefined' ? "4.3.0-alpha.1" : 'latest';
+const VERSION = typeof "4.3.0-alpha.2" !== 'undefined' ? "4.3.0-alpha.2" : 'latest';
 /**
  * Loader for TileJSON metadata
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@loaders.gl/mvt",
   "description": "Loader for Mapbox Vector Tiles",
-  "version": "4.3.0-alpha.2",
+  "version": "4.3.0-alpha.3",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -41,10 +41,10 @@
     "build-worker": "esbuild src/workers/mvt-worker.ts --bundle --outfile=dist/mvt-worker.js --define:__VERSION__=\\\"$npm_package_version\\\""
   },
   "dependencies": {
-    "@loaders.gl/gis": "4.3.0-alpha.2",
-    "@loaders.gl/images": "4.3.0-alpha.2",
-    "@loaders.gl/loader-utils": "4.3.0-alpha.2",
-    "@loaders.gl/schema": "4.3.0-alpha.2",
+    "@loaders.gl/gis": "4.3.0-alpha.3",
+    "@loaders.gl/images": "4.3.0-alpha.3",
+    "@loaders.gl/loader-utils": "4.3.0-alpha.3",
+    "@loaders.gl/schema": "4.3.0-alpha.3",
     "@math.gl/polygon": "^4.0.0",
     "@probe.gl/stats": "^4.0.0",
     "pbf": "^3.2.1"
@@ -55,5 +55,5 @@
   "peerDependencies": {
     "@loaders.gl/core": "^4.0.0"
   },
-  "gitHead": "77a3cb538ab7a1fbf74245f25590210451689f5c"
+  "gitHead": "3213679d79e6ff2814d48fd3337acfa446c74099"
 }

package/src/index.ts

@@ -2,16 +2,23 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-export type {MVTLoaderOptions} from './mvt-loader';
-export {MVTLoader, MVTWorkerLoader} from './mvt-loader';
+// TileJSONLoader
 
-export type {TileJSON} from './lib/parse-tilejson';
-export type {TileJSONLoaderOptions} from './tilejson-loader';
 export {TileJSONLoader} from './tilejson-loader';
+export type {TileJSONLoaderOptions} from './tilejson-loader';
+export type {TileJSON} from './lib/parse-tilejson';
+
+// MVTLoader
+
+export {MVTLoader, MVTWorkerLoader} from './mvt-loader';
+export type {MVTLoaderOptions} from './mvt-loader';
+
+// MVTSource
 
 export {MVTSource} from './mvt-source';
+export type {MVTTileSource, MVTTileSourceProps} from './mvt-source';
 
-// TableTileSource
+// TableTileSource (dynamically tiles a table)
 
-export type {TableTileSourceProps} from './table-tile-source';
 export {TableTileSource} from './table-tile-source';
+export type {DynamicVectorTileSource, DynamicVectorTileSourceProps} from './table-tile-source';

package/src/lib/parse-tilejson.ts

@@ -419,7 +419,7 @@ function attributeTypeToFieldType(aType: string): {type: string} {
   const type = aType.toLowerCase();
   if (!type || !attrTypeMap[type]) {
     // console.warn(
-    //   `cannot convert attribute type ${type} to loaders.gl data type, use string by default`
+    //   `cannot convert feature type ${type} to loaders.gl data type, use string by default`
     // );
   }
   return attrTypeMap[type] || {type: 'string'};

package/src/lib/utils/geometry-utils.ts

@@ -52,7 +52,7 @@ export function convertToLocalCoordinates(
  * @param feature
  */
 export function convertToLocalCoordinatesFlat(data: number[], extent: number): void {
-  for (let i = 0, il = data.length; i < il; ++i) {
+  for (let i = 0; i < data.length; ++i) {
     data[i] /= extent;
   }
 }

package/src/lib/vector-tiler/{clip.ts → features/clip-features.ts}

@@ -3,8 +3,8 @@
 // Copyright (c) vis.gl contributors
 // Forked from https://github.com/mapbox/geojson-vt under compatible ISC license
 
-import type {TableTileFeature} from './tile';
-import {createFeature} from './feature';
+import type {ProtoFeature} from './proto-feature';
+import {createProtoFeature} from './proto-feature';
 
 /* eslint-disable no-continue */
 
@@ -20,8 +20,8 @@ import {createFeature} from './feature';
  * @param minAll and maxAll: minimum and maximum coordinate value for all features
  */
 // eslint-disable-next-line max-params, complexity, max-statements
-export function clip(
-  features: TableTileFeature[],
+export function clipFeatures(
+  features: ProtoFeature[],
   scale: number,
   k1: number,
   k2: number,
@@ -29,7 +29,7 @@ export function clip(
   minAll: number,
   maxAll: number,
   options: {lineMetrics: boolean}
-): TableTileFeature[] | null {
+): ProtoFeature[] | null {
   k1 /= scale;
   k2 /= scale;
 
@@ -41,7 +41,7 @@ export function clip(
     return null; // trivial reject
   }
 
-  const clipped: TableTileFeature[] = [];
+  const clipped: ProtoFeature[] = [];
 
   for (const feature of features) {
     const geometry = feature.geometry;
@@ -82,7 +82,7 @@ export function clip(
     if (newGeometry.length) {
       if (options.lineMetrics && type === 'LineString') {
         for (const line of newGeometry) {
-          clipped.push(createFeature(feature.id, type, line, feature.tags));
+          clipped.push(createProtoFeature(feature.id, type, line, feature.tags));
         }
         continue;
       }
@@ -100,7 +100,7 @@ export function clip(
         type = newGeometry.length === 3 ? 'Point' : 'MultiPoint';
       }
 
-      clipped.push(createFeature(feature.id, type, newGeometry, feature.tags));
+      clipped.push(createProtoFeature(feature.id, type, newGeometry, feature.tags));
     }
   }