@mapwhit/tilerenderer 0.52.1 → 1.0.0

package/src/style/style_layer/circle_style_layer.js

@@ -21,7 +21,7 @@ class CircleStyleLayer extends StyleLayer {
     return (
       getMaximumPaintValue('circle-radius', this, circleBucket) +
       getMaximumPaintValue('circle-stroke-width', this, circleBucket) +
-      translateDistance(this.paint.get('circle-translate'))
+      translateDistance(this._paint.get('circle-translate'))
     );
   }
 
@@ -37,24 +37,29 @@ class CircleStyleLayer extends StyleLayer {
   ) {
     const translatedPolygon = translate(
       queryGeometry,
-      this.paint.get('circle-translate'),
-      this.paint.get('circle-translate-anchor'),
+      this._paint.get('circle-translate'),
+      this._paint.get('circle-translate-anchor'),
       transform.angle,
       pixelsToTileUnits
     );
-    const radius = this.paint.get('circle-radius').evaluate(feature, featureState);
-    const stroke = this.paint.get('circle-stroke-width').evaluate(feature, featureState);
+    const radius = this._paint.get('circle-radius').evaluate(feature, featureState);
+    const stroke = this._paint.get('circle-stroke-width').evaluate(feature, featureState);
     const size = radius + stroke;
 
     // For pitch-alignment: map, compare feature geometry to query geometry in the plane of the tile
     // // Otherwise, compare geometry in the plane of the viewport
     // // A circle with fixed scaling relative to the viewport gets larger in tile space as it moves into the distance
     // // A circle with fixed scaling relative to the map gets smaller in viewport space as it moves into the distance
-    const alignWithMap = this.paint.get('circle-pitch-alignment') === 'map';
+    const pitchScale = this._paint.get('circle-pitch-scale');
+    const pitchAlignment = this._paint.get('circle-pitch-alignment');
+    const alignWithMap = pitchAlignment === 'map';
+    const alignWithViewport = pitchAlignment === 'viewport';
     const transformedPolygon = alignWithMap
       ? translatedPolygon
       : projectQueryGeometry(translatedPolygon, pixelPosMatrix);
     const transformedSize = alignWithMap ? size * pixelsToTileUnits : size;
+    const adjustViewportToMap = pitchScale === 'viewport' && alignWithMap;
+    const adjustMapToViewport = pitchScale === 'map' && alignWithViewport;
 
     for (const ring of geometry) {
       for (const point of ring) {
@@ -62,12 +67,9 @@ class CircleStyleLayer extends StyleLayer {
 
         let adjustedSize = transformedSize;
         const projectedCenter = vec4.transformMat4([], [point.x, point.y, 0, 1], pixelPosMatrix);
-        if (this.paint.get('circle-pitch-scale') === 'viewport' && this.paint.get('circle-pitch-alignment') === 'map') {
+        if (adjustViewportToMap) {
           adjustedSize *= projectedCenter[3] / transform.cameraToCenterDistance;
-        } else if (
-          this.paint.get('circle-pitch-scale') === 'map' &&
-          this.paint.get('circle-pitch-alignment') === 'viewport'
-        ) {
+        } else if (adjustMapToViewport) {
           adjustedSize *= transform.cameraToCenterDistance / projectedCenter[3];
         }
 

package/src/style/style_layer/fill_extrusion_style_layer.js

@@ -17,7 +17,7 @@ class FillExtrusionStyleLayer extends StyleLayer {
   }
 
   queryRadius() {
-    return translateDistance(this.paint.get('fill-extrusion-translate'));
+    return translateDistance(this._paint.get('fill-extrusion-translate'));
   }
 
   is3D() {
@@ -36,13 +36,13 @@ class FillExtrusionStyleLayer extends StyleLayer {
   ) {
     const translatedPolygon = translate(
       queryGeometry,
-      this.paint.get('fill-extrusion-translate'),
-      this.paint.get('fill-extrusion-translate-anchor'),
+      this._paint.get('fill-extrusion-translate'),
+      this._paint.get('fill-extrusion-translate-anchor'),
       transform.angle,
       pixelsToTileUnits
     );
-    const height = this.paint.get('fill-extrusion-height').evaluate(feature, featureState);
-    const base = this.paint.get('fill-extrusion-base').evaluate(feature, featureState);
+    const height = this._paint.get('fill-extrusion-height').evaluate(feature, featureState);
+    const base = this._paint.get('fill-extrusion-base').evaluate(feature, featureState);
 
     const projectedQueryGeometry = projectQueryGeometry(translatedPolygon, pixelPosMatrix, transform, 0);
 
@@ -66,27 +66,42 @@ function getIntersectionDistance(projectedQueryGeometry, projectedFace) {
     // triangle of the face, using only the xy plane. It doesn't matter if the
     // point is outside the first triangle because all the triangles in the face
     // are in the same plane.
-    const a = projectedFace[0];
-    const b = projectedFace[1];
-    const c = projectedFace[3];
-    const p = projectedQueryGeometry[0];
-
-    const ab = b.sub(a);
-    const ac = c.sub(a);
-    const ap = p.sub(a);
-
-    const dotABAB = dot(ab, ab);
-    const dotABAC = dot(ab, ac);
-    const dotACAC = dot(ac, ac);
-    const dotAPAB = dot(ap, ab);
-    const dotAPAC = dot(ap, ac);
-    const denom = dotABAB * dotACAC - dotABAC * dotABAC;
-    const v = (dotACAC * dotAPAB - dotABAC * dotAPAC) / denom;
-    const w = (dotABAB * dotAPAC - dotABAC * dotAPAB) / denom;
-    const u = 1 - v - w;
-
-    // Use the barycentric weighting along with the original triangle z coordinates to get the point of intersection.
-    return a.z * u + b.z * v + c.z * w;
+    //
+    // Check whether points are coincident and use other points if they are.
+    let i = 0;
+    const a = projectedFace[i++];
+    let b;
+    while (!b || a.equals(b)) {
+      b = projectedFace[i++];
+      if (!b) return Number.POSITIVE_INFINITY;
+    }
+
+    // Loop until point `c` is not colinear with points `a` and `b`.
+    for (; i < projectedFace.length; i++) {
+      const c = projectedFace[i];
+      const p = projectedQueryGeometry[0];
+
+      const ab = b.sub(a);
+      const ac = c.sub(a);
+      const ap = p.sub(a);
+
+      const dotABAB = dot(ab, ab);
+      const dotABAC = dot(ab, ac);
+      const dotACAC = dot(ac, ac);
+      const dotAPAB = dot(ap, ab);
+      const dotAPAC = dot(ap, ac);
+      const denom = dotABAB * dotACAC - dotABAC * dotABAC;
+
+      const v = (dotACAC * dotAPAB - dotABAC * dotAPAC) / denom;
+      const w = (dotABAB * dotAPAC - dotABAC * dotAPAB) / denom;
+      const u = 1 - v - w;
+
+      // Use the barycentric weighting along with the original triangle z coordinates to get the point of intersection.
+      const distance = a.z * u + b.z * v + c.z * w;
+
+      if (Number.isFinite(distance)) return distance;
+    }
+    return Number.POSITIVE_INFINITY;
   }
   // The counts as closest is less clear when the query is a box. This
   // returns the distance to the nearest point on the face, whether it is
@@ -191,4 +206,4 @@ function projectQueryGeometry(queryGeometry, pixelPosMatrix, transform, z) {
   return projectedQueryGeometry;
 }
 
-module.exports = FillExtrusionStyleLayer;
+module.exports = { FillExtrusionStyleLayer, getIntersectionDistance };

package/src/style/style_layer/fill_style_layer.js

@@ -13,9 +13,9 @@ class FillStyleLayer extends StyleLayer {
   recalculate(parameters) {
     super.recalculate(parameters);
 
-    const outlineColor = this.paint._values['fill-outline-color'];
+    const outlineColor = this._paint._values['fill-outline-color'];
     if (outlineColor.value.kind === 'constant' && outlineColor.value.value === undefined) {
-      this.paint._values['fill-outline-color'] = this.paint._values['fill-color'];
+      this._paint._values['fill-outline-color'] = this._paint._values['fill-color'];
     }
   }
 
@@ -24,14 +24,14 @@ class FillStyleLayer extends StyleLayer {
   }
 
   queryRadius() {
-    return translateDistance(this.paint.get('fill-translate'));
+    return translateDistance(this._paint.get('fill-translate'));
   }
 
   queryIntersectsFeature(queryGeometry, feature, featureState, geometry, zoom, transform, pixelsToTileUnits) {
     const translatedPolygon = translate(
       queryGeometry,
-      this.paint.get('fill-translate'),
-      this.paint.get('fill-translate-anchor'),
+      this._paint.get('fill-translate'),
+      this._paint.get('fill-translate-anchor'),
       transform.angle,
       pixelsToTileUnits
     );

package/src/style/style_layer/heatmap_style_layer.js

@@ -44,7 +44,7 @@ class HeatmapStyleLayer extends StyleLayer {
   }
 
   hasOffscreenPass() {
-    return this.paint.get('heatmap-opacity') !== 0 && this.visibility !== 'none';
+    return this._paint.get('heatmap-opacity') !== 0 && this.visibility !== 'none';
   }
 }
 

package/src/style/style_layer/hillshade_style_layer.js

@@ -8,7 +8,7 @@ class HillshadeStyleLayer extends StyleLayer {
   }
 
   hasOffscreenPass() {
-    return this.paint.get('hillshade-exaggeration') !== 0 && this.visibility !== 'none';
+    return this._paint.get('hillshade-exaggeration') !== 0 && this.visibility !== 'none';
   }
 }
 

package/src/style/style_layer/line_style_layer.js

@@ -49,7 +49,7 @@ class LineStyleLayer extends StyleLayer {
   recalculate(parameters) {
     super.recalculate(parameters);
 
-    this.paint._values['line-floorwidth'] = lineFloorwidthProperty.possiblyEvaluate(
+    this._paint._values['line-floorwidth'] = lineFloorwidthProperty.possiblyEvaluate(
       this._transitioningPaint._values['line-width'].value,
       parameters
     );
@@ -66,24 +66,24 @@ class LineStyleLayer extends StyleLayer {
       getMaximumPaintValue('line-gap-width', this, lineBucket)
     );
     const offset = getMaximumPaintValue('line-offset', this, lineBucket);
-    return width / 2 + Math.abs(offset) + translateDistance(this.paint.get('line-translate'));
+    return width / 2 + Math.abs(offset) + translateDistance(this._paint.get('line-translate'));
   }
 
   queryIntersectsFeature(queryGeometry, feature, featureState, geometry, zoom, transform, pixelsToTileUnits) {
     const translatedPolygon = translate(
       queryGeometry,
-      this.paint.get('line-translate'),
-      this.paint.get('line-translate-anchor'),
+      this._paint.get('line-translate'),
+      this._paint.get('line-translate-anchor'),
       transform.angle,
       pixelsToTileUnits
     );
     const halfWidth =
       (pixelsToTileUnits / 2) *
       getLineWidth(
-        this.paint.get('line-width').evaluate(feature, featureState),
-        this.paint.get('line-gap-width').evaluate(feature, featureState)
+        this._paint.get('line-width').evaluate(feature, featureState),
+        this._paint.get('line-gap-width').evaluate(feature, featureState)
       );
-    const lineOffset = this.paint.get('line-offset').evaluate(feature, featureState);
+    const lineOffset = this._paint.get('line-offset').evaluate(feature, featureState);
     if (lineOffset) {
       geometry = offsetLine(geometry, lineOffset * pixelsToTileUnits);
     }
@@ -105,25 +105,29 @@ function getLineWidth(lineWidth, lineGapWidth) {
 }
 
 function offsetLine(rings, offset) {
-  const newRings = [];
-  const zero = new Point(0, 0);
+  const newRings = new Array(rings.length);
   for (let k = 0; k < rings.length; k++) {
     const ring = rings[k];
-    const newRing = [];
-    for (let i = 0; i < ring.length; i++) {
-      const a = ring[i - 1];
-      const b = ring[i];
+    const newRing = new Array(ring.length);
+    newRings[k] = newRing;
+
+    let b = ring[0];
+    let aToB = new Point(0, 0);
+    for (let i = 0; i < ring.length - 1; i++) {
       const c = ring[i + 1];
-      const aToB = i === 0 ? zero : b.sub(a)._unit()._perp();
-      const bToC = i === ring.length - 1 ? zero : c.sub(b)._unit()._perp();
+      const bToC = c.sub(b)._unit()._perp();
       const extrude = aToB._add(bToC)._unit();
-
       const cosHalfAngle = extrude.x * bToC.x + extrude.y * bToC.y;
-      extrude._mult(1 / cosHalfAngle);
+      if (cosHalfAngle !== 0) {
+        extrude._div(cosHalfAngle);
+      }
+      newRing[i] = extrude._mult(offset)._add(b);
 
-      newRing.push(extrude._mult(offset)._add(b));
+      b = c;
+      aToB = bToC;
     }
-    newRings.push(newRing);
+
+    newRing[ring.length - 1] = aToB._unit()._mult(offset)._add(b);
   }
   return newRings;
 }

package/src/style/style_layer/symbol_style_layer.js

@@ -14,33 +14,33 @@ class SymbolStyleLayer extends StyleLayer {
   recalculate(parameters) {
     super.recalculate(parameters);
 
-    if (this.layout.get('icon-rotation-alignment') === 'auto') {
-      if (this.layout.get('symbol-placement') !== 'point') {
-        this.layout._values['icon-rotation-alignment'] = 'map';
+    if (this._layout.get('icon-rotation-alignment') === 'auto') {
+      if (this._layout.get('symbol-placement') !== 'point') {
+        this._layout._values['icon-rotation-alignment'] = 'map';
       } else {
-        this.layout._values['icon-rotation-alignment'] = 'viewport';
+        this._layout._values['icon-rotation-alignment'] = 'viewport';
       }
     }
 
-    if (this.layout.get('text-rotation-alignment') === 'auto') {
-      if (this.layout.get('symbol-placement') !== 'point') {
-        this.layout._values['text-rotation-alignment'] = 'map';
+    if (this._layout.get('text-rotation-alignment') === 'auto') {
+      if (this._layout.get('symbol-placement') !== 'point') {
+        this._layout._values['text-rotation-alignment'] = 'map';
       } else {
-        this.layout._values['text-rotation-alignment'] = 'viewport';
+        this._layout._values['text-rotation-alignment'] = 'viewport';
       }
     }
 
     // If unspecified, `*-pitch-alignment` inherits `*-rotation-alignment`
-    if (this.layout.get('text-pitch-alignment') === 'auto') {
-      this.layout._values['text-pitch-alignment'] = this.layout.get('text-rotation-alignment');
+    if (this._layout.get('text-pitch-alignment') === 'auto') {
+      this._layout._values['text-pitch-alignment'] = this._layout.get('text-rotation-alignment');
     }
-    if (this.layout.get('icon-pitch-alignment') === 'auto') {
-      this.layout._values['icon-pitch-alignment'] = this.layout.get('icon-rotation-alignment');
+    if (this._layout.get('icon-pitch-alignment') === 'auto') {
+      this._layout._values['icon-pitch-alignment'] = this._layout.get('icon-rotation-alignment');
     }
   }
 
   getValueAndResolveTokens(name, feature) {
-    const value = this.layout.get(name).evaluate(feature, {});
+    const value = this._layout.get(name).evaluate(feature, {});
     const unevaluated = this._unevaluatedLayout._values[name];
     if (!unevaluated.isDataDriven() && !isExpression(unevaluated.value)) {
       return resolveTokens(feature.properties, value);

package/src/style/style_layer.js

@@ -4,10 +4,20 @@ const { Evented } = require('@mapwhit/events');
 const { Layout, Transitionable, PossiblyEvaluatedPropertyValue } = require('./properties');
 const { supportsPropertyExpression } = require('@mapwhit/style-expressions');
 const featureFilter = require('../style-spec/feature_filter');
+const createKey = require('../util/key');
 
+const keyProperties = ['type', 'minzoom', 'maxzoom', 'filter', 'layout'];
 const TRANSITION_SUFFIX = '-transition';
 
+/**
+ * Representing a style layer in the map.
+ * Properties:
+ * `this.paint` - paint properties of the layer as defined in the map style
+ * `this._paint` - internal representation of paint properties necessary to calculate expressions
+ */
 class StyleLayer extends Evented {
+  #key;
+
   constructor(layer, properties) {
     super();
 
@@ -22,7 +32,7 @@ class StyleLayer extends Evented {
 
     if (layer.type !== 'background') {
       this.source = layer.source;
-      this.sourceLayer = layer['source-layer'];
+      this['source-layer'] = this.sourceLayer = layer['source-layer'];
       this.filter = layer.filter;
       this._featureFilter = featureFilter(layer.filter);
     }
@@ -46,10 +56,26 @@ class StyleLayer extends Evented {
   }
 
   setFilter(filter) {
+    this.#key = undefined;
     this.filter = filter;
     this._featureFilter = featureFilter(filter);
   }
 
+  _setZoomRange(minzoom, maxzoom) {
+    if (this.minzoom === minzoom && this.maxzoom === maxzoom) {
+      return;
+    }
+    if (minzoom != null) {
+      this.#key = undefined;
+      this.minzoom = minzoom;
+    }
+    if (maxzoom != null) {
+      this.#key = undefined;
+      this.maxzoom = maxzoom;
+    }
+    return true;
+  }
+
   getCrossfadeParameters() {
     return this._crossfadeParameters;
   }
@@ -111,6 +137,8 @@ class StyleLayer extends Evented {
   }
 
   setLayoutProperty(name, value) {
+    this.#key = undefined;
+    this.layout[name] = value;
     if (name === 'visibility') {
       this.visibility = value === 'none' ? value : 'visible';
       return;
@@ -127,6 +155,7 @@ class StyleLayer extends Evented {
   }
 
   setPaintProperty(name, value) {
+    this.paint[name] = value;
     if (name.endsWith(TRANSITION_SUFFIX)) {
       this._transitionablePaint.setTransition(name.slice(0, -TRANSITION_SUFFIX.length), value || undefined);
       return false;
@@ -141,9 +170,19 @@ class StyleLayer extends Evented {
     this._transitionablePaint.setValue(name, value);
     const isDataDriven = this._transitionablePaint._values[name].value.isDataDriven();
     this._handleSpecialPaintPropertyUpdate(name);
+    if (isDataDriven !== wasDataDriven || (wasDataDriven && isDataDriven)) {
+      // reset transitioning in progress
+      this._untransitioned(name);
+    }
     return isDataDriven || wasDataDriven || newCrossFadedValue;
   }
 
+  _untransitioned(name) {
+    if (this._transitioningPaint) {
+      this._transitioningPaint._values[name] = this._transitionablePaint._values[name].untransitioned();
+    }
+  }
+
   _handleSpecialPaintPropertyUpdate() {
     // No-op; can be overridden by derived classes.
   }
@@ -167,38 +206,17 @@ class StyleLayer extends Evented {
       this._crossfadeParameters = parameters.getCrossfadeParameters();
     }
     if (this._unevaluatedLayout) {
-      this.layout = this._unevaluatedLayout.possiblyEvaluate(parameters);
+      this._layout = this._unevaluatedLayout.possiblyEvaluate(parameters);
     }
 
-    this.paint = this._transitioningPaint.possiblyEvaluate(parameters);
+    this._paint = this._transitioningPaint.possiblyEvaluate(parameters);
   }
 
-  serialize() {
-    const output = {
-      id: this.id,
-      type: this.type,
-      source: this.source,
-      'source-layer': this.sourceLayer,
-      metadata: this.metadata,
-      minzoom: this.minzoom,
-      maxzoom: this.maxzoom,
-      filter: this.filter,
-      layout: this._unevaluatedLayout?.serialize(),
-      paint: this._transitionablePaint?.serialize()
-    };
-
-    if (this.visibility === 'none') {
-      output.layout = output.layout || {};
-      output.layout.visibility = 'none';
+  get key() {
+    if (!this.#key) {
+      this.#key = createKey(keyProperties, this);
     }
-
-    return filterObject(output, (value, key) => {
-      return (
-        value !== undefined &&
-        !(key === 'layout' && !Object.keys(value).length) &&
-        !(key === 'paint' && !Object.keys(value).length)
-      );
-    });
+    return this.#key;
   }
 
   is3D() {
@@ -218,8 +236,8 @@ class StyleLayer extends Evented {
   }
 
   isStateDependent() {
-    for (const property in this.paint._values) {
-      const value = this.paint.get(property);
+    for (const property in this._paint._values) {
+      const value = this._paint.get(property);
       if (
         !(value instanceof PossiblyEvaluatedPropertyValue) ||
         !supportsPropertyExpression(value.property.specification)

package/src/style/style_layer_index.js

@@ -1,54 +1,29 @@
-const createStyleLayer = require('./create_style_layer');
-
-const { values } = require('../util/object');
-const featureFilter = require('../style-spec/feature_filter');
-const groupByLayout = require('../style-spec/group_by_layout');
+const groupBySource = require('../util/group_layers');
 
 class StyleLayerIndex {
-  #layerConfigs = {};
-  #layers = {};
+  #layers = new Map();
+  #fbs = {};
 
-  constructor(layerConfigs) {
-    if (layerConfigs) {
-      this.update(layerConfigs);
+  constructor(layers) {
+    if (layers) {
+      this.replace(layers);
     }
   }
 
-  replace(layerConfigs) {
-    this.#layerConfigs = {};
-    this.#layers = {};
-    this.update(layerConfigs);
+  replace(layers) {
+    this.#layers = layers;
+    this.#fbs = null;
   }
 
-  update(layerConfigs, removedIds = []) {
-    for (const layerConfig of layerConfigs) {
-      this.#layerConfigs[layerConfig.id] = layerConfig;
-
-      const layer = (this.#layers[layerConfig.id] = createStyleLayer(layerConfig));
-      layer._featureFilter = featureFilter(layer.filter);
-    }
-    for (const id of removedIds) {
-      delete this.#layerConfigs[id];
-      delete this.#layers[id];
-    }
-
-    this.familiesBySource = {};
-
-    const groups = groupByLayout(values(this.#layerConfigs));
-
-    for (const layerConfigs of groups) {
-      const layers = layerConfigs.map(layerConfig => this.#layers[layerConfig.id]);
-
-      const layer = layers[0];
-      if (layer.visibility === 'none') {
-        continue;
-      }
+  update() {
+    this.#fbs = null;
+  }
 
-      const { source = '', sourceLayer = '_geojsonTileLayer' } = layer;
-      const sourceGroup = (this.familiesBySource[source] ??= {});
-      const sourceLayerFamilies = (sourceGroup[sourceLayer] ??= []);
-      sourceLayerFamilies.push(layers);
+  get familiesBySource() {
+    if (!this.#fbs) {
+      this.#fbs = groupBySource(this.#layers.values());
     }
+    return this.#fbs;
   }
 }
 

package/src/symbol/anchor.js

@@ -1,7 +1,5 @@
 const { default: Point } = require('@mapbox/point-geometry');
 
-const { register } = require('../util/transfer_registry');
-
 class Anchor extends Point {
   constructor(x, y, angle, segment) {
     super(x, y);
@@ -16,6 +14,4 @@ class Anchor extends Point {
   }
 }
 
-register('Anchor', Anchor);
-
 module.exports = Anchor;

package/src/symbol/cross_tile_symbol_index.js

@@ -260,12 +260,9 @@ class CrossTileSymbolIndex {
   }
 
   pruneUnusedLayers(usedLayers) {
-    const usedLayerMap = {};
-    usedLayers.forEach(usedLayer => {
-      usedLayerMap[usedLayer] = true;
-    });
+    const usedLayersSet = new Set(usedLayers);
     for (const layerId in this.layerIndexes) {
-      if (!usedLayerMap[layerId]) {
+      if (!usedLayersSet.has(layerId)) {
         delete this.layerIndexes[layerId];
       }
     }

package/src/symbol/opacity_state.js

@@ -1,5 +1,3 @@
-const { register } = require('../util/transfer_registry');
-
 class OpacityState {
   constructor() {
     this.opacity = 0;
@@ -16,6 +14,4 @@ class OpacityState {
   }
 }
 
-register('OpacityState', OpacityState);
-
 module.exports = OpacityState;

package/src/symbol/placement.js

@@ -100,7 +100,7 @@ class Placement {
 
     const collisionBoxArray = tile.collisionBoxArray;
 
-    const layout = symbolBucket.layers[0].layout;
+    const layout = symbolBucket.layers[0]._layout;
 
     const scale = 2 ** (this.transform.zoom - tile.tileID.overscaledZ);
     const textPixelRatio = tile.tileSize / EXTENT;
@@ -159,7 +159,7 @@ class Placement {
     seenCrossTileIDs,
     collisionBoxArray
   ) {
-    const layout = bucket.layers[0].layout;
+    const layout = bucket.layers[0]._layout;
 
     const partiallyEvaluatedTextSize = symbolSize.evaluateSizeForZoom(
       bucket.textSizeData,
@@ -411,7 +411,7 @@ class Placement {
     if (bucket.hasCollisionBoxData()) bucket.collisionBox.collisionVertexArray.clear();
     if (bucket.hasCollisionCircleData()) bucket.collisionCircle.collisionVertexArray.clear();
 
-    const layout = bucket.layers[0].layout;
+    const layout = bucket.layers[0]._layout;
     const duplicateOpacityState = new JointOpacityState(null, 0, false, false, true);
     const textAllowOverlap = layout.get('text-allow-overlap');
     const iconAllowOverlap = layout.get('icon-allow-overlap');

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);