@mapwhit/tilerenderer 0.52.0 → 1.0.0

package/src/symbol/quads.js

@@ -22,7 +22,7 @@ const { GLYPH_PBF_BORDER } = require('../style/parse_glyph_pbf');
  */
 function getIconQuads(anchor, shapedIcon, layer, alongLine, shapedText, feature) {
   const image = shapedIcon.image;
-  const layout = layer.layout;
+  const layout = layer._layout;
 
   // If you have a 10px icon that isn't perfectly aligned to the pixel grid it will cover 11 actual
   // pixels. The quad needs to be padded to account for this, otherwise they'll look slightly clipped
@@ -71,7 +71,7 @@ function getIconQuads(anchor, shapedIcon, layer, alongLine, shapedText, feature)
     bl = new Point(left, bottom);
   }
 
-  const angle = (layer.layout.get('icon-rotate').evaluate(feature, {}) * Math.PI) / 180;
+  const angle = (layer._layout.get('icon-rotate').evaluate(feature, {}) * Math.PI) / 180;
 
   if (angle) {
     const sin = Math.sin(angle);
@@ -94,8 +94,8 @@ function getIconQuads(anchor, shapedIcon, layer, alongLine, shapedText, feature)
  */
 function getGlyphQuads(anchor, shaping, layer, alongLine, feature, positions) {
   const oneEm = 24;
-  const textRotate = (layer.layout.get('text-rotate').evaluate(feature, {}) * Math.PI) / 180;
-  const textOffset = layer.layout
+  const textRotate = (layer._layout.get('text-rotate').evaluate(feature, {}) * Math.PI) / 180;
+  const textOffset = layer._layout
     .get('text-offset')
     .evaluate(feature, {})
     .map(t => t * oneEm);

package/src/symbol/symbol_layout.js

@@ -26,7 +26,7 @@ const murmur3 = require('murmurhash-js');
 //   5.  For composite `*-size` expressions: two zoom levels of curve stops that "cover" the zoom level of the
 //       bucket. These go into a vertex buffer and are used by the shader to interpolate the size at render time.
 //
-// (1) and (2) are stored in `bucket.layers[0].layout`. The remainder are below.
+// (1) and (2) are stored in `bucket.layers[0]._layout`. The remainder are below.
 //
 
 function performSymbolLayout(bucket, glyphMap, glyphPositions, imageMap, imagePositions, showCollisionBoxes) {
@@ -37,7 +37,7 @@ function performSymbolLayout(bucket, glyphMap, glyphPositions, imageMap, imagePo
   bucket.compareText = {};
   bucket.iconsNeedLinear = false;
 
-  const layout = bucket.layers[0].layout;
+  const layout = bucket.layers[0]._layout;
   const unevaluatedLayoutValues = bucket.layers[0]._unevaluatedLayout._values;
 
   const sizes = {};
@@ -172,7 +172,7 @@ function addFeature(bucket, feature, shapedTextOrientations, shapedIcon, glyphPo
     textMaxSize = layoutTextSize;
   }
 
-  const layout = bucket.layers[0].layout;
+  const layout = bucket.layers[0]._layout;
   const textOffset = layout.get('text-offset').evaluate(feature, {});
   const iconOffset = layout.get('icon-offset').evaluate(feature, {});
 
@@ -301,7 +301,7 @@ function addTextVertices(
   let textSizeData = null;
 
   if (sizeData.functionType === 'source') {
-    textSizeData = [10 * layer.layout.get('text-size').evaluate(feature, {})];
+    textSizeData = [10 * layer._layout.get('text-size').evaluate(feature, {})];
   } else if (sizeData.functionType === 'composite') {
     textSizeData = [
       10 * sizes.compositeTextSizes[0].evaluate(feature, {}),
@@ -370,7 +370,7 @@ function addSymbol(
   if (shapedTextOrientations.horizontal) {
     // As a collision approximation, we can use either the vertical or the horizontal version of the feature
     // We're counting on the two versions having similar dimensions
-    const textRotate = layer.layout.get('text-rotate').evaluate(feature, {});
+    const textRotate = layer._layout.get('text-rotate').evaluate(feature, {});
     textCollisionFeature = new CollisionFeature(
       collisionBoxArray,
       line,
@@ -430,7 +430,7 @@ function addSymbol(
       shapedTextOrientations.horizontal,
       feature
     );
-    const iconRotate = layer.layout.get('icon-rotate').evaluate(feature, {});
+    const iconRotate = layer._layout.get('icon-rotate').evaluate(feature, {});
     iconCollisionFeature = new CollisionFeature(
       collisionBoxArray,
       line,
@@ -452,7 +452,7 @@ function addSymbol(
     let iconSizeData = null;
 
     if (sizeData.functionType === 'source') {
-      iconSizeData = [10 * layer.layout.get('icon-size').evaluate(feature, {})];
+      iconSizeData = [10 * layer._layout.get('icon-size').evaluate(feature, {})];
     } else if (sizeData.functionType === 'composite') {
       iconSizeData = [
         10 * sizes.compositeIconSizes[0].evaluate(feature, {}),

package/src/symbol/transform_text.js

@@ -1,7 +1,7 @@
 const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
 
 function transformText(text, layer, feature) {
-  const transform = layer.layout.get('text-transform').evaluate(feature, {});
+  const transform = layer._layout.get('text-transform').evaluate(feature, {});
   if (transform === 'uppercase') {
     text = text.toLocaleUpperCase();
   } else if (transform === 'lowercase') {

package/src/ui/map.js

@@ -41,10 +41,6 @@ const defaultOptions = {
 
   renderWorldCopies: true,
 
-  refreshExpiredTiles: true,
-
-  maxTileCacheSize: null,
-
   transformRequest: null,
   fadeDuration: 300,
   crossSourceCollisions: true
@@ -98,7 +94,6 @@ const defaultOptions = {
  * @param {number} [options.bearing=0] The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north. If `bearing` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
  * @param {number} [options.pitch=0] The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60). If `pitch` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
  * @param {boolean} [options.renderWorldCopies=true]  If `true`, multiple copies of the world will be rendered, when zoomed out.
- * @param {number} [options.maxTileCacheSize=null]  The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport.
  * @param {number} [options.fadeDuration=300] Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.
  * @param {boolean} [options.crossSourceCollisions=true] If `true`, symbols from multiple sources can collide with each other during collision detection. If `false`, collision detection is run separately for the symbols in each source.
  * @example
@@ -125,7 +120,6 @@ class Map extends Camera {
     this.loadImage = loadImage;
 
     this._interactive = options.interactive;
-    this._maxTileCacheSize = options.maxTileCacheSize;
     this._failIfMajorPerformanceCaveat = options.failIfMajorPerformanceCaveat;
     this._preserveDrawingBuffer = options.preserveDrawingBuffer;
     this._trackResize = options.trackResize;
@@ -205,14 +199,13 @@ class Map extends Camera {
    * Sets a global state property that can be retrieved with the [`global-state` expression](https://maplibre.org/maplibre-style-spec/expressions/#global-state).
    * If the value is null, it resets the property to its default value defined in the [`state` style property](https://maplibre.org/maplibre-style-spec/root/#state).
    *
-   * Note that changing `global-state` values defined in layout properties is not supported, and will be ignored.
-   *
    * @param propertyName - The name of the state property to set.
    * @param value - The value of the state property to set.
    */
   setGlobalStateProperty(propertyName, value) {
-    this.style.setGlobalStateProperty(propertyName, value);
-    return this._update(true);
+    if (!this.style.setGlobalStateProperty(propertyName, value)) {
+      return this._update(true);
+    }
   }
 
   /**
@@ -688,7 +681,7 @@ class Map extends Camera {
    */
   getStyle() {
     if (this.style) {
-      return this.style.serialize();
+      return this.style.serialize?.() ?? this.style;
     }
   }
 
@@ -728,7 +721,7 @@ class Map extends Camera {
    * @returns {boolean} A Boolean indicating whether the source is loaded.
    */
   isSourceLoaded(id) {
-    const source = this.style?.sourceCaches[id];
+    const source = this.style?._sources[id];
     if (source === undefined) {
       this.fire(new ErrorEvent(new Error(`There is no source with ID '${id}'`)));
       return;
@@ -744,12 +737,11 @@ class Map extends Camera {
    */
 
   areTilesLoaded() {
-    const sources = this.style?.sourceCaches;
+    const sources = this.style?._sources;
     for (const id in sources) {
       const source = sources[id];
       const tiles = source._tiles;
-      for (const t in tiles) {
-        const tile = tiles[t];
+      for (const tile of tiles.values()) {
         if (!(tile.state === 'loaded' || tile.state === 'errored')) return false;
       }
     }
@@ -799,6 +791,16 @@ class Map extends Camera {
    */
   addImage(id, image, { pixelRatio = 1, sdf = false } = {}) {
     if (image instanceof HTMLImageElement) {
+      if (!image.complete) {
+        const promise = new Promise(resolve => {
+          image.decode().then(() => {
+            const { width, height, data } = browser.getImageData(image);
+            resolve({ data: new RGBAImage({ width, height }, data), pixelRatio, sdf });
+          });
+        });
+        this.style.addImage(id, { promise });
+        return;
+      }
       const { width, height, data } = browser.getImageData(image);
       this.style.addImage(id, { data: new RGBAImage({ width, height }, data), pixelRatio, sdf });
     } else if (image.width === undefined || image.height === undefined) {
@@ -820,6 +822,23 @@ class Map extends Camera {
     }
   }
 
+  /**
+   * Returns an image, specified by ID, currently available in the map.
+   * This includes both images from the style's original sprite
+   * and any images that have been added at runtime using {@link Map.addImage}.
+   *
+   * @param id - The ID of the image.
+   * @returns An image in the map with the specified ID.
+   *
+   * @example
+   * ```js
+   * let coffeeShopIcon = map.getImage("coffee_cup");
+   * ```
+   */
+  getImage(id) {
+    return this.style.getImage(id);
+  }
+
   /**
    * Define wether the image has been added or not
    *
@@ -1055,6 +1074,24 @@ class Map extends Camera {
     this._update();
   }
 
+  /**
+   * Removes feature state, setting it back to the default behavior. If only
+   * source is specified, removes all states of that source. If
+   * target.id is also specified, removes all keys for that feature's state.
+   * If key is also specified, removes that key from that feature's state.
+   *
+   * @param {Object} target Identifier of where to set state: can be a source, a feature, or a specific key of feature.
+   * Feature objects returned from {@link Map#queryRenderedFeatures} or event handlers can be used as feature identifiers.
+   * @param {string | number} target.id (optional) Unique id of the feature. Optional if key is not specified.
+   * @param {string} target.source The Id of the vector source or GeoJSON source for the feature.
+   * @param {string} [target.sourceLayer] (optional)  *For vector tile sources, the sourceLayer is
+   *  required.*
+   * @param {string} key (optional) The key in the feature state to reset.
+   */
+  removeFeatureState(target, key) {
+    this.style.removeFeatureState(target, key);
+    return this._update();
+  }
   /**
    * Gets the state of a feature.
    *

package/src/util/group_layers.js

@@ -0,0 +1,41 @@
+module.exports = groupBySource;
+
+/**
+ * Given an collection of layers, divide them by property 'source', then by 'source-layer',
+ * and then by layout-affecting properties: 'type', , 'minzoom', 'maxzoom', 'filter', and 'layout'.
+ *
+ * The input is not modified. The output layers are references to the
+ * input layers.
+ *
+ * @param layers iterable collection of layers
+ * @returns Map source to {Map source-layer to {Map layout key to Array of layers}}
+ */
+function groupBySource(layers) {
+  const groups = new Map();
+
+  // Iterate through each layer and group them by source, source-layer, and layout properties
+  for (const layer of layers) {
+    if (layer.visibility === 'none') {
+      continue;
+    }
+
+    const { source = '', sourceLayer = '_geojsonTileLayer' } = layer;
+    let sourceGroup = groups.get(source);
+    if (!sourceGroup) {
+      sourceGroup = new Map();
+      groups.set(source, sourceGroup);
+    }
+    let sourceLayerGroup = sourceGroup.get(sourceLayer);
+    if (!sourceLayerGroup) {
+      sourceLayerGroup = new Map();
+      sourceGroup.set(sourceLayer, sourceLayerGroup);
+    }
+    let layoutGroup = sourceLayerGroup.get(layer.key);
+    if (!layoutGroup) {
+      layoutGroup = [];
+      sourceLayerGroup.set(layer.key, layoutGroup);
+    }
+    layoutGroup.push(layer);
+  }
+  return groups;
+}

package/src/util/image.js

@@ -1,7 +1,5 @@
 const assert = require('assert');
 
-const { register } = require('./transfer_registry');
-
 function createImage(image, { width, height }, channels, data) {
   if (!data) {
     data = new Uint8Array(width * height * channels);
@@ -115,9 +113,6 @@ class RGBAImage {
   }
 }
 
-register('AlphaImage', AlphaImage);
-register('RGBAImage', RGBAImage);
-
 module.exports = {
   AlphaImage,
   RGBAImage

package/src/util/key.js

@@ -0,0 +1,21 @@
+module.exports = createKey;
+
+function stringify(obj) {
+  if (obj == null) return 'null';
+  const type = typeof obj;
+  if (type === 'number' || type === 'boolean' || type === 'string') return obj;
+
+  if (Array.isArray(obj)) {
+    return '[' + obj.map(val => stringify(val)).join(',') + ']';
+  }
+
+  const keys = Object.keys(obj).sort();
+  return '{' + keys.map(key => `${key}:${stringify(obj[key])}`).join(',') + '}';
+}
+
+/**
+ * Create a unique key for an based on its properties.
+ */
+function createKey(properties, object) {
+  return properties.map(k => stringify(object[k])).join('/');
+}

package/src/util/object.js

@@ -1,34 +1,3 @@
-/*
- * Polyfill for Object.values. Not fully spec compliant, but we don't
- * need it to be.
- *
- * @private
- */
-function values(obj) {
-  const result = [];
-  for (const k in obj) {
-    result.push(obj[k]);
-  }
-  return result;
-}
-
-/*
- * Compute the difference between the keys in one object and the keys
- * in another object.
- *
- * @returns keys difference
- * @private
- */
-function keysDifference(obj, other) {
-  const difference = [];
-  for (const i in obj) {
-    if (!(i in other)) {
-      difference.push(i);
-    }
-  }
-  return difference;
-}
-
 /**
  * Given an object and a number of properties as strings, return version
  * of that object with only those properties.
@@ -44,14 +13,8 @@ function keysDifference(obj, other) {
  * @private
  */
 function pick(src, properties) {
-  const result = {};
-  for (let i = 0; i < properties.length; i++) {
-    const k = properties[i];
-    if (k in src) {
-      result[k] = src[k];
-    }
-  }
-  return result;
+  const entries = properties.filter(p => p in src).map(p => [p, src[p]]);
+  return Object.fromEntries(entries);
 }
 
 /**
@@ -91,11 +54,9 @@ function bindAll(fns, context) {
  * @private
  */
 function mapObject(input, iterator, context) {
-  const output = {};
-  for (const key in input) {
-    output[key] = iterator.call(context || this, input[key], key, input);
-  }
-  return output;
+  context ??= this;
+  const entries = Object.entries(input).map(([k, v]) => [k, iterator.call(context, v, k, input)]);
+  return Object.fromEntries(entries);
 }
 
 /**
@@ -104,13 +65,9 @@ function mapObject(input, iterator, context) {
  * @private
  */
 function filterObject(input, iterator, context) {
-  const output = {};
-  for (const key in input) {
-    if (iterator.call(context || this, input[key], key, input)) {
-      output[key] = input[key];
-    }
-  }
-  return output;
+  context ??= this;
+  const entries = Object.entries(input).filter(([k, v]) => iterator.call(context, v, k, input));
+  return Object.fromEntries(entries);
 }
 
 /**
@@ -166,8 +123,6 @@ function arraysIntersect(a, b) {
 }
 
 module.exports = {
-  values,
-  keysDifference,
   pick,
   bindAll,
   mapObject,

package/src/worker.js

@@ -1,4 +1 @@
-const worker = require('./source/worker');
-
-/* global self */
-worker(self);
+/* intentionaly empty for now */

package/src/source/resources/images.js

@@ -1,68 +0,0 @@
-module.exports = images;
-
-function images({ actor, mapId }) {
-  const cache = new Map(); // id -> image
-  const inProgress = new Map(); // id -> promise
-
-  return {
-    getImages
-  };
-
-  async function getImages({ icons }) {
-    const missing = new Set();
-    const result = {};
-    for (const id of icons) {
-      if (cache.has(id)) {
-        const image = cache.get(id);
-        if (image) {
-          result[id] = image;
-        }
-      } else {
-        missing.add(id);
-      }
-    }
-    if (missing.size === 0) {
-      // All images are already in the cache
-      return result;
-    }
-    const active = new Set();
-    const needed = [...missing];
-    // Check if any of the missing images are already being fetched
-    for (const id of missing) {
-      if (inProgress.has(id)) {
-        active.add(inProgress.get(id));
-        missing.delete(id);
-      }
-    }
-    if (missing.size > 0) {
-      // Fetch the remaining images
-      await fetchMissing([...missing]);
-    }
-    if (active.size > 0) {
-      await Promise.all(active);
-    }
-    for (const id of needed) {
-      const image = cache.get(id);
-      if (image) {
-        result[id] = image;
-      }
-    }
-    return result;
-  }
-
-  async function fetchMissing(icons) {
-    const promise = actor.send('getImages', { icons }, mapId);
-    for (const id of icons) {
-      inProgress.set(id, promise);
-    }
-    const result = await promise;
-    // Add the fetched images to the cache
-    for (const id of icons) {
-      cache.set(id, result[id]);
-    }
-    // Remove the fetched images from the inProgress set
-    for (const id of icons) {
-      inProgress.delete(id);
-    }
-  }
-}

package/src/source/worker.js

@@ -1,110 +0,0 @@
-require('../util/polyfill');
-
-const Actor = require('../util/actor');
-
-const StyleLayerIndex = require('../style/style_layer_index');
-const VectorTileWorkerSource = require('./vector_tile_worker_source');
-const GeoJSONWorkerSource = require('./geojson_worker_source');
-const assert = require('assert');
-const { plugin: globalRTLTextPlugin } = require('./rtl_text_plugin');
-const DEMData = require('../data/dem_data');
-const { resources } = require('./resources');
-
-class Worker {
-  #resources = {};
-
-  constructor(self) {
-    this.self = self;
-    this.actor = new Actor(self, this);
-
-    this.actors = {};
-    this.layerIndexes = {};
-
-    this.workerSourceTypes = {
-      vector: VectorTileWorkerSource,
-      geojson: GeoJSONWorkerSource
-    };
-
-    // [mapId][sourceType][sourceName] => worker source instance
-    this.workerSources = {};
-
-    this.self.registerWorkerSource = (name, WorkerSource) => {
-      if (this.workerSourceTypes[name]) {
-        throw new Error(`Worker source with name "${name}" already registered.`);
-      }
-      this.workerSourceTypes[name] = WorkerSource;
-    };
-
-    this.self.registerRTLTextPlugin = rtlTextPlugin => {
-      if (globalRTLTextPlugin.isLoaded()) {
-        throw new Error('RTL text plugin already registered.');
-      }
-      globalRTLTextPlugin['applyArabicShaping'] = rtlTextPlugin.applyArabicShaping;
-      globalRTLTextPlugin['processBidirectionalText'] = rtlTextPlugin.processBidirectionalText;
-      globalRTLTextPlugin['processStyledBidirectionalText'] = rtlTextPlugin.processStyledBidirectionalText;
-    };
-  }
-
-  setLayers(mapId, layers) {
-    this.getLayerIndex(mapId).replace(layers);
-  }
-
-  updateLayers(mapId, params) {
-    this.getLayerIndex(mapId).update(params.layers, params.removedIds);
-  }
-
-  loadTile(mapId, params) {
-    assert(params.type);
-    return this.getWorkerSource(mapId, params.type, params.source).loadTile(params);
-  }
-
-  loadDEMTile(mapId, params) {
-    const { uid, rawImageData, encoding } = params;
-    return new DEMData(uid, rawImageData, encoding);
-  }
-
-  removeSource(mapId, params) {
-    const { type, source } = params;
-    assert(type);
-    assert(source);
-
-    const worker = this.workerSources?.[mapId]?.[type]?.[source];
-    if (worker) {
-      delete this.workerSources[mapId][type][source];
-      worker.removeSource?.(params);
-    }
-  }
-
-  loadRTLTextPlugin(map, pluginURL) {
-    if (!globalRTLTextPlugin.isLoaded()) {
-      this.self.importScripts(pluginURL);
-      if (!globalRTLTextPlugin.isLoaded()) {
-        throw new Error(`RTL Text Plugin failed to import scripts from ${pluginURL}`);
-      }
-    }
-  }
-
-  getLayerIndex(mapId) {
-    return (this.layerIndexes[mapId] ??= new StyleLayerIndex());
-  }
-
-  getResources(mapId) {
-    return (this.#resources[mapId] ??= resources(this.actor, mapId));
-  }
-
-  getWorkerSource(mapId, type, source) {
-    this.workerSources[mapId] ??= {};
-    this.workerSources[mapId][type] ??= {};
-
-    return (this.workerSources[mapId][type][source] ??= this.createWorkerSource(type, mapId));
-  }
-
-  createWorkerSource(type, mapId) {
-    const WorkerSource = this.workerSourceTypes[type];
-    return new WorkerSource(this.getResources(mapId), this.getLayerIndex(mapId));
-  }
-}
-
-module.exports = function createWorker(self) {
-  return new Worker(self);
-};

package/src/source/worker_source.js

@@ -1,14 +0,0 @@
-/**
- * May be implemented by custom source types to provide code that can be run on
- * the WebWorkers. In addition to providing a custom
- * {@link WorkerSource#loadTile}, any other methods attached to a `WorkerSource`
- * implementation may also be targeted by the {@link Source} via
- * `dispatcher.send('source-type.methodname', params, callback)`.
- *
- * @see {@link Map#addSourceType}
- * @private
- *
- * @class WorkerSource
- * @param actor
- * @param layerIndex
- */

package/src/style-spec/deref.js

@@ -1,51 +0,0 @@
-const refProperties = require('./util/ref_properties');
-
-function deref(layer, parent) {
-  const result = {};
-
-  for (const k in layer) {
-    if (k !== 'ref') {
-      result[k] = layer[k];
-    }
-  }
-
-  refProperties.forEach(k => {
-    if (k in parent) {
-      result[k] = parent[k];
-    }
-  });
-
-  return result;
-}
-
-module.exports = derefLayers;
-
-/**
- * Given an array of layers, some of which may contain `ref` properties
- * whose value is the `id` of another property, return a new array where
- * such layers have been augmented with the 'type', 'source', etc. properties
- * from the parent layer, and the `ref` property has been removed.
- *
- * The input is not modified. The output may contain references to portions
- * of the input.
- *
- * @private
- * @param {Array<Layer>} layers
- * @returns {Array<Layer>}
- */
-function derefLayers(layers) {
-  layers = layers.slice();
-
-  const map = Object.create(null);
-  for (let i = 0; i < layers.length; i++) {
-    map[layers[i].id] = layers[i];
-  }
-
-  for (let i = 0; i < layers.length; i++) {
-    if ('ref' in layers[i]) {
-      layers[i] = deref(layers[i], map[layers[i].ref]);
-    }
-  }
-
-  return layers;
-}