@mapwhit/tilerenderer 1.3.0 → 1.5.0

package/src/data/bucket/symbol_attributes.js

@@ -9,7 +9,10 @@ export const dynamicLayoutAttributes = createLayout([{ name: 'a_projected_pos',
 
 export const placementOpacityAttributes = createLayout([{ name: 'a_fade_opacity', components: 1, type: 'Uint32' }], 4);
 
-export const collisionVertexAttributes = createLayout([{ name: 'a_placed', components: 2, type: 'Uint8' }], 4);
+export const collisionVertexAttributes = createLayout([
+  { name: 'a_placed', components: 2, type: 'Uint8' },
+  { name: 'a_shift', components: 2, type: 'Float32' }
+]);
 
 export const collisionBox = createLayout([
   // the box is centered around the anchor point
@@ -70,13 +73,16 @@ export const placement = createLayout([
   { type: 'Float32', name: 'lineOffsetX' },
   { type: 'Float32', name: 'lineOffsetY' },
   { type: 'Uint8', name: 'writingMode' },
-  { type: 'Uint8', name: 'hidden' }
+  { type: 'Uint8', name: 'hidden' },
+  { type: 'Uint32', name: 'crossTileID' }
 ]);
 
 export const symbolInstance = createLayout([
   { type: 'Int16', name: 'anchorX' },
   { type: 'Int16', name: 'anchorY' },
-  { type: 'Int16', name: 'horizontalPlacedTextSymbolIndex' },
+  { type: 'Int16', name: 'rightJustifiedTextSymbolIndex' },
+  { type: 'Int16', name: 'centerJustifiedTextSymbolIndex' },
+  { type: 'Int16', name: 'leftJustifiedTextSymbolIndex' },
   { type: 'Int16', name: 'verticalPlacedTextSymbolIndex' },
   { type: 'Uint16', name: 'key' },
   { type: 'Uint16', name: 'textBoxStartIndex' },
@@ -84,10 +90,12 @@ export const symbolInstance = createLayout([
   { type: 'Uint16', name: 'iconBoxStartIndex' },
   { type: 'Uint16', name: 'iconBoxEndIndex' },
   { type: 'Uint16', name: 'featureIndex' },
-  { type: 'Uint16', name: 'numGlyphVertices' },
+  { type: 'Uint16', name: 'numHorizontalGlyphVertices' },
   { type: 'Uint16', name: 'numVerticalGlyphVertices' },
   { type: 'Uint16', name: 'numIconVertices' },
-  { type: 'Uint32', name: 'crossTileID' }
+  { type: 'Uint32', name: 'crossTileID' },
+  { type: 'Float32', name: 'textBoxScale' },
+  { type: 'Float32', name: 'radialTextOffset' }
 ]);
 
 export const glyphOffset = createLayout([{ type: 'Float32', name: 'offsetX' }]);

package/src/data/bucket/symbol_bucket.js

@@ -1,11 +1,12 @@
 import { dist } from '@mapwhit/point-geometry';
 import { Formatted } from '@mapwhit/style-expressions';
 import { VectorTileFeature } from '@mapwhit/vector-tile';
+import { rtlPlugin } from '../../source/rtl_text_plugin.js';
 import EvaluationParameters from '../../style/evaluation_parameters.js';
 import mergeLines from '../../symbol/mergelines.js';
 import { getSizeData } from '../../symbol/symbol_size.js';
 import transformText from '../../symbol/transform_text.js';
-import { allowsVerticalWritingMode } from '../../util/script_detection.js';
+import { allowsVerticalWritingMode, stringContainsRTLText } from '../../util/script_detection.js';
 import { verticalizedCharacterMap } from '../../util/verticalize_punctuation.js';
 import {
   CollisionBoxLayoutArray,
@@ -44,6 +45,15 @@ export function addDynamicAttributes(dynamicLayoutVertexArray, p, angle) {
   dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angle);
 }
 
+function containsRTLText(formattedText) {
+  for (const section of formattedText.sections) {
+    if (stringContainsRTLText(section.text)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * Unlike other buckets, which simply implement #addFeature with type-specific
  * logic for (essentially) triangulating feature geometries, SymbolBucket
@@ -86,6 +96,8 @@ export default class SymbolBucket {
     this.pixelRatio = options.pixelRatio;
     this.sourceLayerIndex = options.sourceLayerIndex;
     this.hasPattern = false;
+    this.hasRTLText = false;
+    this.sortKeyRanges = [];
 
     const layer = this.layers[0];
     const unevaluatedLayoutValues = layer._unevaluatedLayout._values;
@@ -94,7 +106,10 @@ export default class SymbolBucket {
     this.iconSizeData = getSizeData(this.zoom, unevaluatedLayoutValues['icon-size']);
 
     const layout = this.layers[0]._layout;
-    const zOrderByViewportY = layout.get('symbol-z-order') === 'viewport-y';
+    const sortKey = layout.get('symbol-sort-key');
+    const zOrder = layout.get('symbol-z-order');
+    this.sortFeaturesByKey = zOrder !== 'viewport-y' && sortKey.constantOr(1) !== undefined;
+    const zOrderByViewportY = zOrder === 'viewport-y' || (zOrder === 'auto' && !this.sortFeaturesByKey);
     this.sortFeaturesByY =
       zOrderByViewportY &&
       (layout.get('text-allow-overlap') ||
@@ -102,6 +117,8 @@ export default class SymbolBucket {
         layout.get('text-ignore-placement') ||
         layout.get('icon-ignore-placement'));
 
+    this.stateDependentLayerIds = this.layers.filter(l => l.isStateDependent()).map(l => l.id);
+
     this.sourceID = options.sourceID;
   }
 
@@ -140,6 +157,7 @@ export default class SymbolBucket {
       (textField.value.kind !== 'constant' || textField.value.value.toString().length > 0) &&
       (textFont.value.kind !== 'constant' || textFont.value.value.length > 0);
     const hasIcon = iconImage.value.kind !== 'constant' || iconImage.value.value?.length > 0;
+    const symbolSortKey = layout.get('symbol-sort-key');
 
     this.features = [];
 
@@ -151,7 +169,7 @@ export default class SymbolBucket {
     const stacks = options.glyphDependencies;
     const globalProperties = new EvaluationParameters(this.zoom);
 
-    for (const { feature, index, sourceLayerIndex } of features) {
+    for (const { feature, id, index, sourceLayerIndex } of features) {
       if (!layer._featureFilter(globalProperties, feature)) {
         continue;
       }
@@ -162,11 +180,16 @@ export default class SymbolBucket {
         // but plain string token evaluation skips that pathway so do the
         // conversion here.
         const resolvedTokens = layer.getValueAndResolveTokens('text-field', feature);
-        text = transformText(
-          resolvedTokens instanceof Formatted ? resolvedTokens : Formatted.fromString(resolvedTokens),
-          layer,
-          feature
-        );
+        const formattedText =
+          resolvedTokens instanceof Formatted ? resolvedTokens : Formatted.fromString(resolvedTokens);
+        // on this instance: if hasRTLText is already true, all future calls to containsRTLText can be skipped.
+        const bucketHasRTLText = (this.hasRTLText = this.hasRTLText || containsRTLText(formattedText));
+        if (
+          !bucketHasRTLText || // non-rtl text so can proceed safely
+          rtlPlugin.isRTLSupported(true) // Use the rtlText plugin to shape text if available or We don't intend to lazy-load the rtl text plugin, so proceed with incorrect shaping
+        ) {
+          text = transformText(formattedText, layer, feature);
+        }
       }
 
       let icon;
@@ -178,18 +201,19 @@ export default class SymbolBucket {
         continue;
       }
 
+      const sortKey = this.sortFeaturesByKey ? symbolSortKey.evaluate(feature, {}) : undefined;
+
       const symbolFeature = {
+        id,
         text,
         icon,
         index,
         sourceLayerIndex,
         geometry: loadGeometry(feature),
         properties: feature.properties,
-        type: VectorTileFeature.types[feature.type]
+        type: VectorTileFeature.types[feature.type],
+        sortKey
       };
-      if (typeof feature.id !== 'undefined') {
-        symbolFeature.id = feature.id;
-      }
       this.features.push(symbolFeature);
 
       if (icon) {
@@ -214,6 +238,13 @@ export default class SymbolBucket {
       // It's better to place labels on one long line than on many short segments.
       this.features = mergeLines(this.features);
     }
+
+    if (this.sortFeaturesByKey) {
+      this.features.sort((a, b) => {
+        // a.sortKey is always a number when sortFeaturesByKey is true
+        return a.sortKey - b.sortKey;
+      });
+    }
   }
 
   update(states, vtLayer, imagePositions) {
@@ -229,7 +260,9 @@ export default class SymbolBucket {
   }
 
   isEmpty() {
-    return this.symbolInstances.length === 0;
+    // When the bucket encounters only rtl-text but the plugin isnt loaded, no symbol instances will be created.
+    // In order for the bucket to be serialized, and not discarded as an empty bucket both checks are necessary.
+    return this.symbolInstances.length === 0 && !this.hasRTLText;
   }
 
   uploadPending() {
@@ -295,7 +328,7 @@ export default class SymbolBucket {
     lineLength
   ) {
     const { indexArray, layoutVertexArray, dynamicLayoutVertexArray, segments } = arrays;
-    const segment = segments.prepareSegment(4 * quads.length, layoutVertexArray, indexArray);
+    const segment = segments.prepareSegment(4 * quads.length, layoutVertexArray, indexArray, feature.sortKey);
     const glyphOffsetArrayStart = this.glyphOffsetArray.length;
     const vertexStartIndex = segment.vertexLength;
     const { x: lax, y: lay } = labelAnchor;
@@ -335,7 +368,9 @@ export default class SymbolBucket {
       lineOffset[0],
       lineOffset[1],
       writingMode,
-      false
+      false,
+      // The crossTileID is only filled/used on the foreground for dynamic text anchors
+      0
     );
 
     arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {
@@ -439,6 +474,43 @@ export default class SymbolBucket {
     }
   }
 
+  getSortedSymbolIndexes(angle) {
+    if (this.sortedAngle === angle && this.symbolInstanceIndexes !== undefined) {
+      return this.symbolInstanceIndexes;
+    }
+    const sin = Math.sin(angle);
+    const cos = Math.cos(angle);
+    const rotatedYs = [];
+    const featureIndexes = [];
+    const result = [];
+
+    for (let i = 0; i < this.symbolInstances.length; ++i) {
+      result.push(i);
+      const symbolInstance = this.symbolInstances.get(i);
+      rotatedYs.push(Math.round(sin * symbolInstance.anchorX + cos * symbolInstance.anchorY) | 0);
+      featureIndexes.push(symbolInstance.featureIndex);
+    }
+
+    result.sort((aIndex, bIndex) => {
+      return rotatedYs[aIndex] - rotatedYs[bIndex] || featureIndexes[bIndex] - featureIndexes[aIndex];
+    });
+
+    return result;
+  }
+
+  addToSortKeyRanges(symbolInstanceIndex, sortKey) {
+    const last = this.sortKeyRanges[this.sortKeyRanges.length - 1];
+    if (last && last.sortKey === sortKey) {
+      last.symbolInstanceEnd = symbolInstanceIndex + 1;
+    } else {
+      this.sortKeyRanges.push({
+        sortKey,
+        symbolInstanceStart: symbolInstanceIndex,
+        symbolInstanceEnd: symbolInstanceIndex + 1
+      });
+    }
+  }
+
   sortFeatures(angle) {
     if (!this.sortFeaturesByY) {
       return;
@@ -447,7 +519,6 @@ export default class SymbolBucket {
     if (this.sortedAngle === angle) {
       return;
     }
-    this.sortedAngle = angle;
 
     // The current approach to sorting doesn't sort across segments so don't try.
     // Sorting within segments separately seemed not to be worth the complexity.
@@ -460,35 +531,36 @@ export default class SymbolBucket {
     // sorted order.
 
     // To avoid sorting the actual symbolInstance array we sort an array of indexes.
-    const slen = this.symbolInstances.length;
-    const symbolInstanceIndexes = new Array(slen);
-    const rotatedYs = new Array(slen);
-    const featureIndexes = new Array(slen);
-    const sin = Math.sin(angle);
-    const cos = Math.cos(angle);
-    for (let i = 0; i < slen; i++) {
-      symbolInstanceIndexes[i] = i;
-      const { anchorX, anchorY, featureIndex } = this.symbolInstances.get(i);
-      rotatedYs[i] = Math.round(sin * anchorX + cos * anchorY) | 0;
-      featureIndexes[i] = featureIndex;
-    }
-
-    symbolInstanceIndexes.sort((a, b) => rotatedYs[a] - rotatedYs[b] || featureIndexes[b] - featureIndexes[a]);
+    this.symbolInstanceIndexes = this.getSortedSymbolIndexes(angle);
+    this.sortedAngle = angle;
 
     this.text.indexArray.clear();
     this.icon.indexArray.clear();
 
-    this.featureSortOrder = new Array(slen);
-
-    for (let i = 0; i < slen; i++) {
-      const index = symbolInstanceIndexes[i];
-      const { featureIndex, horizontalPlacedTextSymbolIndex, verticalPlacedTextSymbolIndex } =
-        this.symbolInstances.get(index);
-      this.featureSortOrder[i] = featureIndex;
+    this.featureSortOrder = new Array(this.symbolInstanceIndexes.length);
+
+    for (let i = 0; i < this.symbolInstanceIndexes.length; i++) {
+      const index = this.symbolInstanceIndexes[i];
+      const {
+        centerJustifiedTextSymbolIndex,
+        featureIndex,
+        leftJustifiedTextSymbolIndex,
+        rightJustifiedTextSymbolIndex,
+        verticalPlacedTextSymbolIndex
+      } = this.symbolInstances.get(index);
+      this.featureSortOrder.push(featureIndex);
+
+      [rightJustifiedTextSymbolIndex, centerJustifiedTextSymbolIndex, leftJustifiedTextSymbolIndex].forEach(
+        (index, i, array) => {
+          // Only add a given index the first time it shows up,
+          // to avoid duplicate opacity entries when multiple justifications
+          // share the same glyphs.
+          if (index >= 0 && array.indexOf(index) === i) {
+            this.addIndicesForPlacedTextSymbol(index);
+          }
+        }
+      );
 
-      if (horizontalPlacedTextSymbolIndex >= 0) {
-        this.addIndicesForPlacedTextSymbol(horizontalPlacedTextSymbolIndex);
-      }
       if (verticalPlacedTextSymbolIndex >= 0) {
         this.addIndicesForPlacedTextSymbol(verticalPlacedTextSymbolIndex);
       }

package/src/data/bucket/symbol_collision_buffers.js

@@ -1,4 +1,4 @@
-import { StructArrayLayout2ub4 as CollisionVertexArray } from '../array_types.js';
+import { CollisionVertexArray } from '../array_types.js';
 import SegmentVector from '../segment.js';
 import { collisionVertexAttributes } from './symbol_attributes.js';
 

package/src/data/bucket.js

@@ -49,6 +49,8 @@ export function updateBuckets(buckets, style) {
 
     // swap out the layers in the bucket with the current style layers
     bucket.layers = layers;
-    bucket.stateDependentLayers = layers.filter(layer => layer.isStateDependent());
+    if (bucket.stateDependentLayerIds?.length) {
+      bucket.stateDependentLayers = layers.filter(layer => layer.isStateDependent());
+    }
   }
 }

package/src/data/feature_index.js

@@ -9,12 +9,13 @@ import { FeatureIndexArray } from './array_types.js';
 import EXTENT from './extent.js';
 import loadGeometry from './load_geometry.js';
 
-class FeatureIndex {
-  constructor(tileID, grid = new Grid(EXTENT, 16, 0), featureIndexArray = new FeatureIndexArray()) {
+export default class FeatureIndex {
+  constructor(tileID, promoteId) {
     this.tileID = tileID;
-    this.grid = grid;
+    this.grid = new Grid(EXTENT, 16, 0);
     this.grid3D = new Grid(EXTENT, 16, 0);
-    this.featureIndexArray = featureIndexArray;
+    this.featureIndexArray = new FeatureIndexArray();
+    this.promoteId = promoteId;
   }
 
   insert(feature, geometry, featureIndex, sourceLayerIndex, bucketIndex, is3D) {
@@ -91,14 +92,14 @@ class FeatureIndex {
 
       const match = this.featureIndexArray.get(index);
       let featureGeometry = null;
-      const intersectionTest = (feature, styleLayer) => {
+      const intersectionTest = (feature, styleLayer, id) => {
         if (!featureGeometry) {
           featureGeometry = loadGeometry(feature);
         }
         let featureState = {};
-        if (feature.id) {
+        if (id !== undefined) {
           // `feature-state` expression evaluation requires feature state to be available
-          featureState = sourceFeatureState.getState(styleLayer.sourceLayer || '_geojsonTileLayer', String(feature.id));
+          featureState = sourceFeatureState.getState(styleLayer.sourceLayer || '_geojsonTileLayer', id);
         }
         return styleLayer.queryIntersectsFeature(
           queryGeometry,
@@ -149,6 +150,8 @@ class FeatureIndex {
       return;
     }
 
+    const id = this.getId(feature, sourceLayerName);
+
     const { x, y, z } = this.tileID.canonical;
     for (const layerID of layerIDs) {
       if (filterLayerIDs && !filterLayerIDs.includes(layerID)) {
@@ -160,13 +163,13 @@ class FeatureIndex {
         continue;
       }
 
-      const intersectionZ = !intersectionTest || intersectionTest(feature, styleLayer);
+      const intersectionZ = !intersectionTest || intersectionTest(feature, styleLayer, id);
       if (!intersectionZ) {
         // Only applied for non-symbol features
         continue;
       }
 
-      const geojsonFeature = new GeoJSONFeature(feature, z, x, y);
+      const geojsonFeature = new GeoJSONFeature(feature, z, x, y, id);
       geojsonFeature.layer = styleLayer;
       const layerResult = (result[layerID] ??= []);
       layerResult.push({ featureIndex, feature: geojsonFeature, intersectionZ });
@@ -201,9 +204,19 @@ class FeatureIndex {
     }
     return result;
   }
-}
 
-export default FeatureIndex;
+  getId(feature, sourceLayerId) {
+    let id = feature.id;
+    if (this.promoteId) {
+      const propName = typeof this.promoteId === 'string' ? this.promoteId : this.promoteId[sourceLayerId];
+      id = feature.properties[propName];
+      if (typeof id === 'boolean') {
+        id = Number(id);
+      }
+    }
+    return id;
+  }
+}
 
 function getBounds(geometry) {
   let minX = Number.POSITIVE_INFINITY;

package/src/data/segment.js

@@ -5,20 +5,27 @@ class SegmentVector {
     this.segments = segments;
   }
 
-  prepareSegment(numVertices, layoutVertexArray, indexArray) {
+  prepareSegment(numVertices, layoutVertexArray, indexArray, sortKey) {
     if (numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) {
       warn.once(
         `Max vertices per segment is ${SegmentVector.MAX_VERTEX_ARRAY_LENGTH}: bucket requested ${numVertices}`
       );
     }
     let segment = this.segments.at(-1);
-    if (!segment || segment.vertexLength + numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) {
+    if (
+      !segment ||
+      segment.vertexLength + numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH ||
+      segment.sortKey !== sortKey
+    ) {
       segment = {
         vertexOffset: layoutVertexArray.length,
         primitiveOffset: indexArray.length,
         vertexLength: 0,
         primitiveLength: 0
       };
+      if (sortKey !== undefined) {
+        segment.sortKey = sortKey;
+      }
       this.segments.push(segment);
     }
     return segment;
@@ -39,11 +46,12 @@ class SegmentVector {
   static simpleSegment(vertexOffset, primitiveOffset, vertexLength, primitiveLength) {
     return new SegmentVector([
       {
-        vertexOffset: vertexOffset,
-        primitiveOffset: primitiveOffset,
-        vertexLength: vertexLength,
-        primitiveLength: primitiveLength,
-        vaos: {}
+        vertexOffset,
+        primitiveOffset,
+        vertexLength,
+        primitiveLength,
+        vaos: {},
+        sortKey: 0
       }
     ]);
   }

package/src/index.js

@@ -5,20 +5,21 @@ import { Point } from '@mapwhit/point-geometry';
 import packageJSON from '../package.json' with { type: 'json' };
 import { default as LngLat } from './geo/lng_lat.js';
 import { default as LngLatBounds } from './geo/lng_lat_bounds.js';
-import { setRTLTextPlugin } from './source/rtl_text_plugin.js';
+import { rtlPluginLoader } from './source/rtl_text_plugin.js';
 import { default as Style } from './style/style.js';
 import { default as Map } from './ui/map.js';
 import config from './util/config.js';
 
 const { version } = packageJSON;
 
-export { version, config, setRTLTextPlugin, Point, LngLat, LngLatBounds, Style, Map, Evented };
+export { version, config, setRTLTextPlugin, getRTLTextPluginStatus, Point, LngLat, LngLatBounds, Style, Map, Evented };
 
 // for commonjs backward compatibility
 const mapwhit = {
   version,
   config,
   setRTLTextPlugin,
+  getRTLTextPluginStatus,
   Point,
   LngLat,
   LngLatBounds,
@@ -27,24 +28,7 @@ const mapwhit = {
   Evented
 };
 
-const properties = {
-  workerCount: {
-    get() {
-      return config.WORKER_COUNT;
-    },
-    set(count) {
-      config.WORKER_COUNT = count;
-    }
-  },
-  workerUrl: {
-    get() {
-      return config.WORKER_URL;
-    },
-    set(url) {
-      config.WORKER_URL = url;
-    }
-  }
-};
+const properties = {};
 
 Object.defineProperties(mapwhit, properties);
 Object.defineProperties(config, properties);
@@ -64,11 +48,27 @@ export default mapwhit;
  *
  * @function setRTLTextPlugin
  * @param {string} pluginURL URL pointing to the Mapbox RTL text plugin source.
- * @param {Function} callback Called with an error argument if there is an error.
+ * @param {boolean} lazy If set to `true`, mapboxgl will defer loading the plugin until rtl text is encountered,
+ *    rtl text will then be rendered only after the plugin finishes loading.
+ * @example
+ * setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.3.0/dist/mapbox-gl-rtl-text.js', false);
+ * @see [Add support for right-to-left scripts](https://maplibre.org/maplibre-gl-js/docs/examples/mapbox-gl-rtl-text/)
+ */
+function setRTLTextPlugin(pluginURL, lazy) {
+  return rtlPluginLoader.setRTLTextPlugin(pluginURL, lazy);
+}
+/**
+ * Gets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text) status.
+ * The status can be `unavailable` (i.e. not requested or removed), `loading`, `loaded` or `error`.
+ * If the status is `loaded` and the plugin is requested again, an error will be thrown.
+ *
+ * @function getRTLTextPluginStatus
  * @example
- * mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
- * @see [Add support for right-to-left scripts](https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/)
+ * const pluginStatus = getRTLTextPluginStatus();
  */
+function getRTLTextPluginStatus() {
+  return rtlPluginLoader.getRTLTextPluginStatus();
+}
 
 // canary assert: used to confirm that asserts have been removed from production build
 import assert from 'assert';

package/src/render/draw_circle.js

@@ -1,3 +1,4 @@
+import SegmentVector from '../data/segment.js';
 import CullFaceMode from '../gl/cull_face_mode.js';
 import DepthMode from '../gl/depth_mode.js';
 import StencilMode from '../gl/stencil_mode.js';
@@ -12,6 +13,7 @@ function drawCircles(painter, sourceCache, layer, coords) {
   const opacity = layer._paint.get('circle-opacity');
   const strokeWidth = layer._paint.get('circle-stroke-width');
   const strokeOpacity = layer._paint.get('circle-stroke-opacity');
+  const sortFeaturesByKey = layer._layout.get('circle-sort-key').constantOr(1) !== undefined;
 
   if (opacity.constantOr(1) === 0 && (strokeWidth.constantOr(1) === 0 || strokeOpacity.constantOr(1) === 0)) {
     return;
@@ -26,6 +28,8 @@ function drawCircles(painter, sourceCache, layer, coords) {
   const stencilMode = StencilMode.disabled;
   const colorMode = painter.colorModeForRenderPass();
 
+  const segmentsRenderStates = [];
+
   for (let i = 0; i < coords.length; i++) {
     const coord = coords[i];
 
@@ -37,6 +41,43 @@ function drawCircles(painter, sourceCache, layer, coords) {
 
     const programConfiguration = bucket.programConfigurations.get(layer.id);
     const program = painter.useProgram('circle', programConfiguration);
+    const layoutVertexBuffer = bucket.layoutVertexBuffer;
+    const indexBuffer = bucket.indexBuffer;
+    const uniformValues = circleUniformValues(painter, coord, tile, layer);
+
+    const state = {
+      programConfiguration,
+      program,
+      layoutVertexBuffer,
+      indexBuffer,
+      uniformValues
+    };
+
+    if (sortFeaturesByKey) {
+      const oldSegments = bucket.segments.get();
+      for (const segment of oldSegments) {
+        segmentsRenderStates.push({
+          segments: new SegmentVector([segment]),
+          sortKey: segment.sortKey,
+          state
+        });
+      }
+    } else {
+      segmentsRenderStates.push({
+        segments: bucket.segments,
+        sortKey: 0,
+        state
+      });
+    }
+  }
+
+  if (sortFeaturesByKey) {
+    segmentsRenderStates.sort((a, b) => a.sortKey - b.sortKey);
+  }
+
+  for (const segmentsState of segmentsRenderStates) {
+    const { programConfiguration, program, layoutVertexBuffer, indexBuffer, uniformValues } = segmentsState.state;
+    const segments = segmentsState.segments;
 
     program.draw(
       context,
@@ -45,11 +86,11 @@ function drawCircles(painter, sourceCache, layer, coords) {
       stencilMode,
       colorMode,
       CullFaceMode.disabled,
-      circleUniformValues(painter, coord, tile, layer),
+      uniformValues,
       layer.id,
-      bucket.layoutVertexBuffer,
-      bucket.indexBuffer,
-      bucket.segments,
+      layoutVertexBuffer,
+      indexBuffer,
+      segments,
       layer._paint,
       painter.transform.zoom,
       programConfiguration