@mapwhit/tilerenderer 1.1.0 → 1.2.0

package/build/min/package.json

@@ -1,4 +1,4 @@
 {
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "exports": {
     ".": "./src/index.js",
@@ -17,10 +17,11 @@
     "@mapbox/point-geometry": "~1",
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/whoots-js": "^3.0.0",
-    "@mapwhit/events": "^0.0.1",
+    "@mapwhit/events": "^0.1.0",
     "@mapwhit/geojson-rewind": "^2.0.0",
+    "@mapwhit/geometry": "^1.0.0",
     "@mapwhit/pbf": "^1.0.0",
-    "@mapwhit/style-expressions": "^1.1.0",
+    "@mapwhit/style-expressions": "^1.2.0",
     "@mapwhit/vector-tile": "^2.0.1",
     "@pirxpilot/nanoassert": "~1",
     "csscolorparser": "^1.0.3",
@@ -31,8 +32,7 @@
     "murmurhash-js": "^1.0.0",
     "potpack": "^2.1.0",
     "quickselect": "^3.0.0",
-    "supercluster": "^8.0.1",
-    "tinyqueue": "^3.0.0"
+    "supercluster": "^8.0.1"
   },
   "browser": {
     "assert": "@pirxpilot/nanoassert",

package/src/data/bucket/circle_bucket.js

@@ -23,7 +23,6 @@ function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
 class CircleBucket {
   constructor(options) {
     this.zoom = options.zoom;
-    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.index = options.index;
@@ -37,9 +36,7 @@ class CircleBucket {
 
   populate(features, options) {
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (
-        this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
-      ) {
+      if (this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) {
         const geometry = loadGeometry(feature);
         this.addFeature(feature, geometry, index);
         options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index);
@@ -52,8 +49,7 @@ class CircleBucket {
       return;
     }
     this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
   }
 
@@ -121,8 +117,7 @@ class CircleBucket {
     }
 
     this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
-      imagePositions: {},
-      globalState: this.globalState
+      imagePositions: {}
     });
   }
 }

package/src/data/bucket/fill_bucket.js

@@ -16,7 +16,6 @@ const layoutAttributes = layout.members;
 class FillBucket {
   constructor(options) {
     this.zoom = options.zoom;
-    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.index = options.index;
@@ -35,9 +34,7 @@ class FillBucket {
     this.hasPattern = hasPattern('fill', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (
-        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
-      ) {
+      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) {
         continue;
       }
 
@@ -57,15 +54,7 @@ class FillBucket {
       }
 
       if (this.hasPattern) {
-        this.features.push(
-          addPatternDependencies(
-            'fill',
-            this.layers,
-            patternFeature,
-            { zoom: this.zoom, globalState: this.globalState },
-            options
-          )
-        );
+        this.features.push(addPatternDependencies('fill', this.layers, patternFeature, { zoom: this.zoom }, options));
       } else {
         this.addFeature(patternFeature, geometry, index, {});
       }
@@ -79,8 +68,7 @@ class FillBucket {
       return;
     }
     this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
   }
 
@@ -178,8 +166,7 @@ class FillBucket {
     }
 
     this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
   }
 }

package/src/data/bucket/fill_extrusion_bucket.js

@@ -37,7 +37,6 @@ function addVertex(vertexArray, x, y, nx, ny, nz, t, e) {
 class FillExtrusionBucket {
   constructor(options) {
     this.zoom = options.zoom;
-    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.index = options.index;
@@ -54,9 +53,7 @@ class FillExtrusionBucket {
     this.hasPattern = hasPattern('fill-extrusion', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (
-        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
-      ) {
+      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) {
         continue;
       }
 
@@ -77,13 +74,7 @@ class FillExtrusionBucket {
 
       if (this.hasPattern) {
         this.features.push(
-          addPatternDependencies(
-            'fill-extrusion',
-            this.layers,
-            patternFeature,
-            { zoom: this.zoom, globalState: this.globalState },
-            options
-          )
+          addPatternDependencies('fill-extrusion', this.layers, patternFeature, { zoom: this.zoom }, options)
         );
       } else {
         this.addFeature(patternFeature, geometry, index, {});
@@ -105,8 +96,7 @@ class FillExtrusionBucket {
       return;
     }
     this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
   }
 
@@ -246,8 +236,7 @@ class FillExtrusionBucket {
     }
 
     this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
   }
 }

package/src/data/bucket/line_bucket.js

@@ -72,7 +72,6 @@ function addLineVertex(layoutVertexBuffer, point, extrude, round, up, dir, lines
 class LineBucket {
   constructor(options) {
     this.zoom = options.zoom;
-    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.index = options.index;
@@ -90,9 +89,7 @@ class LineBucket {
     this.hasPattern = hasPattern('line', this.layers, options);
 
     for (const { feature, index, sourceLayerIndex } of features) {
-      if (
-        !this.layers[0]._featureFilter(new EvaluationParameters(this.zoom, { globalState: this.globalState }), feature)
-      ) {
+      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) {
         continue;
       }
 
@@ -112,15 +109,7 @@ class LineBucket {
       }
 
       if (this.hasPattern) {
-        this.features.push(
-          addPatternDependencies(
-            'line',
-            this.layers,
-            patternFeature,
-            { zoom: this.zoom, globalState: this.globalState },
-            options
-          )
-        );
+        this.features.push(addPatternDependencies('line', this.layers, patternFeature, { zoom: this.zoom }, options));
       } else {
         this.addFeature(patternFeature, geometry, index, {});
       }
@@ -134,8 +123,7 @@ class LineBucket {
       return;
     }
     this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
   }
 
@@ -544,8 +532,7 @@ class LineBucket {
     }
 
     this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
   }
 

package/src/data/bucket/pattern_bucket_features.js

@@ -19,16 +19,16 @@ export function hasPattern(type, layers, options) {
   return hasPattern;
 }
 
-export function addPatternDependencies(type, layers, patternFeature, { zoom, globalState }, options) {
+export function addPatternDependencies(type, layers, patternFeature, { zoom }, options) {
   const patterns = options.patternDependencies;
   for (const layer of layers) {
     const patternProperty = layer._paint.get(`${type}-pattern`);
 
     const patternPropertyValue = patternProperty.value;
     if (patternPropertyValue.kind !== 'constant') {
-      const min = patternPropertyValue.evaluate({ zoom: zoom - 1, globalState }, patternFeature, {});
-      const mid = patternPropertyValue.evaluate({ zoom: zoom, globalState }, patternFeature, {});
-      const max = patternPropertyValue.evaluate({ zoom: zoom + 1, globalState }, patternFeature, {});
+      const min = patternPropertyValue.evaluate({ zoom: zoom - 1 }, patternFeature, {});
+      const mid = patternPropertyValue.evaluate({ zoom: zoom }, patternFeature, {});
+      const max = patternPropertyValue.evaluate({ zoom: zoom + 1 }, patternFeature, {});
       // add to patternDependencies
       patterns[min] = true;
       patterns[mid] = true;

package/src/data/bucket/symbol_bucket.js

@@ -81,7 +81,6 @@ export default class SymbolBucket {
   constructor(options) {
     this.collisionBoxArray = options.collisionBoxArray;
     this.zoom = options.zoom;
-    this.globalState = options.globalState;
     this.overscaling = options.overscaling;
     this.layers = options.layers;
     this.index = options.index;
@@ -151,7 +150,7 @@ export default class SymbolBucket {
 
     const icons = options.iconDependencies;
     const stacks = options.glyphDependencies;
-    const globalProperties = new EvaluationParameters(this.zoom, { globalState: this.globalState });
+    const globalProperties = new EvaluationParameters(this.zoom);
 
     for (const { feature, index, sourceLayerIndex } of features) {
       if (!layer._featureFilter(globalProperties, feature)) {
@@ -223,12 +222,10 @@ export default class SymbolBucket {
       return;
     }
     this.text.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
     this.icon.programConfigurations.updatePaintArrays(states, vtLayer, this.layers, {
-      imagePositions,
-      globalState: this.globalState
+      imagePositions
     });
   }
 
@@ -343,8 +340,7 @@ export default class SymbolBucket {
     );
 
     arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {
-      imagePositions: {},
-      globalState: this.globalState
+      imagePositions: {}
     });
   }
 

package/src/data/feature_index.js

@@ -1,8 +1,8 @@
+import { polygonIntersectsBox } from '@mapwhit/geometry';
 import Grid from 'grid-index';
 import EvaluationParameters from '../style/evaluation_parameters.js';
 import featureFilter from '../style-spec/feature_filter/index.js';
 import dictionaryCoder from '../util/dictionary_coder.js';
-import { polygonIntersectsBox } from '../util/intersection_tests.js';
 import { arraysIntersect } from '../util/object.js';
 import GeoJSONFeature from '../util/vectortile_to_geojson.js';
 import { FeatureIndexArray } from './array_types.js';

package/src/source/geojson_source.js

@@ -98,7 +98,8 @@ class GeoJSONSource extends Evented {
           tolerance: (options.tolerance !== undefined ? options.tolerance : 0.375) * scale,
           extent: EXTENT,
           maxZoom: this.maxzoom,
-          lineMetrics: options.lineMetrics || false
+          lineMetrics: options.lineMetrics || false,
+          generateId: options.generateId || false
         },
         superclusterOptions: {
           maxZoom:
@@ -107,7 +108,8 @@ class GeoJSONSource extends Evented {
               : this.maxzoom - 1,
           extent: EXTENT,
           radius: (options.clusterRadius || 50) * scale,
-          log: false
+          log: false,
+          generateId: options.generateId || false
         }
       },
       options.workerOptions
@@ -187,7 +189,6 @@ class GeoJSONSource extends Evented {
       source: this.id,
       pixelRatio: browser.devicePixelRatio,
       showCollisionBoxes: this.map.showCollisionBoxes,
-      globalState: this.map.getGlobalState(),
       justReloaded: tile.workerID != null,
       painter: this.map.painter
     };

package/src/source/geojson_worker_source.js

@@ -2,13 +2,17 @@ import rewind from '@mapwhit/geojson-rewind';
 import geojsonvt from 'geojson-vt';
 import Supercluster from 'supercluster';
 import GeoJSONWrapper from './geojson_wrapper.js';
-import VectorTileWorkerSource from './vector_tile_worker_source.js';
+import { makeSingleSourceLayerWorkerTile as makeWorkerTile } from './worker_tile.js';
 
 /**
  * The {@link WorkerSource} implementation that supports {@link GeoJSONSource}.
  *
  */
-class GeoJSONWorkerSource extends VectorTileWorkerSource {
+class GeoJSONWorkerSource {
+  constructor(resources, layerIndex) {
+    this.resources = resources;
+    this.layerIndex = layerIndex;
+  }
   /**
    * Fetches (if appropriate), parses, and index geojson data into tiles. This
    * preparatory method must be called before {@link GeoJSONWorkerSource#loadTile}
@@ -22,7 +26,7 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
    * @param callback
    */
   loadData(params) {
-    const data = loadJSON(params.data);
+    const data = loadJSON(params);
     this._geoJSONIndex = null;
     this._createGeoJSONIndex = params.cluster
       ? () => {
@@ -51,17 +55,29 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
     return this._geoJSONIndex.getTile(z, x, y);
   }
 
-  loadVectorData({ tileID }) {
+  /**
+   * Implements {@link WorkerSource#loadTile}.
+   */
+  async loadTile(params) {
+    const { tileID, source } = params;
     const geoJSONTile = this.getTile(tileID);
     if (!geoJSONTile) {
       return; // nothing in the given tile
     }
+    const sourceLayer = new GeoJSONWrapper(geoJSONTile.features);
+    const layerFamilies = this.layerIndex.familiesBySource.get(source);
+    if (!layerFamilies) {
+      return;
+    }
+    const features = new Array(sourceLayer.length);
+    for (let index = 0; index < sourceLayer.length; index++) {
+      features[index] = { feature: sourceLayer.feature(index), index, sourceLayerIndex: 0 };
+    }
 
-    const vectorTile = new GeoJSONWrapper(geoJSONTile.features);
+    const result = await makeWorkerTile(params, features, layerFamilies.get(sourceLayer.name), this.resources);
 
-    return {
-      vectorTile
-    };
+    result.vectorTile = sourceLayer;
+    return result;
   }
 }
 
@@ -70,11 +86,11 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
  *
  * @param data Literal GeoJSON data. Must be provided.
  */
-function loadJSON(data) {
+function loadJSON({ data, source }) {
   try {
     return typeof data === 'string' ? JSON.parse(data) : data;
   } catch {
-    throw new Error('Input data is not a valid GeoJSON object.');
+    throw new Error(`Input data given to '${source}' is not a valid GeoJSON object.`);
   }
 }
 

package/src/source/load_tilejson.js

@@ -1,13 +1,25 @@
-import { pick } from '../util/object.js';
-
 export default function (tileJSON) {
   return tileJSON.resourceSets ? fromResourseSets(tileJSON) : fromTileJSON(tileJSON);
 }
 
-function fromTileJSON(tileJSON) {
-  const result = pick(tileJSON, ['tiles', 'minzoom', 'maxzoom', 'attribution', 'bounds']);
-  if (tileJSON.vector_layers) {
-    result.vectorLayers = tileJSON.vector_layers;
+function fromTileJSON({ tiles, minzoom, maxzoom, attribution, bounds, vector_layers }) {
+  const result = {
+    tiles
+  };
+  if (typeof minzoom === 'number') {
+    result.minzoom = minzoom;
+  }
+  if (typeof maxzoom === 'number') {
+    result.maxzoom = maxzoom;
+  }
+  if (bounds) {
+    result.bounds = bounds;
+  }
+  if (attribution) {
+    result.attribution = attribution;
+  }
+  if (vector_layers) {
+    result.vectorLayers = vector_layers;
     result.vectorLayerIds = result.vectorLayers.map(layer => layer.id);
   }
   return result;

package/src/source/raster_tile_source.js

@@ -1,7 +1,6 @@
 import { ErrorEvent, Event, Evented } from '@mapwhit/events';
 import Texture from '../render/texture.js';
 import loadImage from '../util/loader/image.js';
-import { pick } from '../util/object.js';
 import loadTileJSON from './load_tilejson.js';
 import TileBounds from './tile_bounds.js';
 
@@ -15,12 +14,12 @@ class RasterTileSource extends Evented {
     this.minzoom = 0;
     this.maxzoom = 22;
     this.roundZoom = true;
-    this.scheme = 'xyz';
-    this.tileSize = 512;
     this._loaded = false;
 
-    this._options = Object.assign({}, options);
-    Object.assign(this, pick(options, ['url', 'scheme', 'tileSize']));
+    this._options = { ...options };
+    this.url = options.url;
+    this.scheme = options.scheme ?? 'xyz';
+    this.tileSize = options.tileSize ?? 512;
   }
 
   async load() {

package/src/source/source_cache.js

@@ -75,10 +75,14 @@ class SourceCache extends Evented {
   }
 
   /**
-   * Return true if no tile data is pending, tiles will not change unless
+   * Return `true` if no tile data is pending, tiles will not change unless
    * an additional API call is received.
+   * If `ignoreTilesLoading` is set, return `true` even when tiles are pending,
+   * otherwise there is no way to check that source is ready after loading style.
+   * Without `ignoreTilesLoading` the state of style being loaded or not depends on
+   * the tiles being in the process of loading or not.
    */
-  loaded() {
+  loaded(ignoreTilesLoading) {
     if (this.#sourceErrored) {
       return true;
     }
@@ -87,6 +91,9 @@ class SourceCache extends Evented {
       return false;
     }
 
+    if (ignoreTilesLoading) {
+      return true;
+    }
     for (const tile of this._tiles.values()) {
       if (tile.state !== 'loaded' && tile.state !== 'errored') {
         return false;

package/src/source/tile.js

@@ -110,6 +110,9 @@ class Tile {
    * @private
    */
   unloadVectorData() {
+    if (this.state === 'unloaded') {
+      return;
+    }
     for (const bucket of this.buckets.values()) {
       bucket.destroy();
     }

package/src/source/vector_tile_source.js

@@ -1,6 +1,5 @@
 import { ErrorEvent, Event, Evented } from '@mapwhit/events';
 import browser from '../util/browser.js';
-import { pick } from '../util/object.js';
 import loadTileJSON from './load_tilejson.js';
 import TileBounds from './tile_bounds.js';
 import VectorTileWorkerSource from './vector_tile_worker_source.js';
@@ -15,14 +14,14 @@ class VectorTileSource extends Evented {
     this.type = 'vector';
     this.minzoom = 0;
     this.maxzoom = 22;
-    this.scheme = 'xyz';
-    this.tileSize = 512;
     this.reparseOverscaled = true;
     this.isTileClipped = true;
     this._showTileBoundaries = showTileBoundaries;
 
-    Object.assign(this, pick(options, ['url', 'scheme', 'tileSize']));
-    this._options = Object.assign({ type: 'vector' }, options);
+    this._options = { type: 'vector', ...options };
+    this.url = options.url;
+    this.scheme = options.scheme ?? 'xyz';
+    this.tileSize = options.tileSize ?? 512;
 
     if (this.tileSize !== 512) {
       throw new Error('vector tile sources must have a tileSize of 512');
@@ -94,7 +93,6 @@ class VectorTileSource extends Evented {
         source: this.id,
         pixelRatio: browser.devicePixelRatio,
         showCollisionBoxes: this.map.showCollisionBoxes,
-        globalState: this.map.getGlobalState(),
         painter: this.map.painter
       };
       tile.workerID ??= true;

package/src/source/vector_tile_worker_source.js

@@ -4,17 +4,11 @@ import makeWorkerTile from './worker_tile.js';
 
 /**
  * The {@link WorkerSource} implementation that supports {@link VectorTileSource}.
- * This class is designed to be easily reused to support custom source types
- * for data formats that can be parsed/converted into an in-memory VectorTile
- * representation.  To do so, create it with
- * `new VectorTileWorkerSource(resources, styleLayers, customLoadVectorDataFunction)`.
  *
  * @private
  */
 class VectorTileWorkerSource {
   /**
-   * @param [loadVectorData] Optional method for custom loading of a VectorTile
-   * object based on parameters passed from the main-thread Source. See
    * {@link VectorTileWorkerSource#loadTile}. The default implementation simply
    * loads the pbf at `params.url`.
    */
@@ -23,7 +17,10 @@ class VectorTileWorkerSource {
     this.layerIndex = layerIndex;
   }
 
-  loadVectorData(params) {
+  /**
+   * Implements {@link WorkerSource#loadTile}.
+   */
+  async loadTile(params) {
     if (!params.response) {
       throw new Error('no tile data');
     }
@@ -31,26 +28,9 @@ class VectorTileWorkerSource {
     if (!data) {
       return;
     }
-    return {
-      vectorTile: new VectorTile(new Protobuf(data))
-    };
-  }
-
-  /**
-   * Implements {@link WorkerSource#loadTile}. Delegates to
-   * {@link VectorTileWorkerSource#loadVectorData} (which by default expects
-   * a `params.url` property) for fetching and producing a VectorTile object.
-   */
-  async loadTile(params) {
-    const response = this.loadVectorData(params);
-    if (!response) {
-      return;
-    }
-    const { vectorTile } = response;
+    const vectorTile = new VectorTile(new Protobuf(data));
     const result = await makeWorkerTile(params, vectorTile, this.layerIndex, this.resources);
-    if (vectorTile) {
-      result.vectorTile = vectorTile;
-    }
+    result.vectorTile = vectorTile;
     return result;
   }
 }