@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/source/vector_tile_source.js

@@ -1,17 +1,16 @@
-const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
-const { pick } = require('../util/object');
-const loadTileJSON = require('./load_tilejson');
-const TileBounds = require('./tile_bounds');
-const browser = require('../util/browser');
-
-// register feature index for worker transfer
-require('../data/feature_index');
+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';
 
 class VectorTileSource extends Evented {
-  constructor(id, options, dispatcher, eventedParent) {
+  #worker;
+
+  constructor(id, options, eventedParent, { resources, layerIndex, showTileBoundaries }) {
     super();
     this.id = id;
-    this.dispatcher = dispatcher;
 
     this.type = 'vector';
     this.minzoom = 0;
@@ -20,6 +19,7 @@ class VectorTileSource extends Evented {
     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);
@@ -29,6 +29,7 @@ class VectorTileSource extends Evented {
     }
 
     this.setEventedParent(eventedParent);
+    this.#worker = new VectorTileWorkerSource(resources, layerIndex);
   }
 
   async load() {
@@ -37,7 +38,9 @@ class VectorTileSource extends Evented {
     try {
       const tileJSON = await loadTileJSON(this._options);
       Object.assign(this, tileJSON);
-      if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
+      if (tileJSON.bounds) {
+        this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
+      }
 
       // `content` is included here to prevent a race condition where `Style#_updateSources` is called
       // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
@@ -58,10 +61,6 @@ class VectorTileSource extends Evented {
     this.load();
   }
 
-  serialize() {
-    return Object.assign({}, this._options);
-  }
-
   async loadTile(tile) {
     if (tile.workerID != null && tile.state === 'loading') {
       tile.reloadPromise ??= Promise.withResolvers();
@@ -86,7 +85,7 @@ class VectorTileSource extends Evented {
         throw err;
       }
       const params = {
-        response: { data: rawData.slice() },
+        response: { data: rawData },
         uid: tile.uid,
         tileID: tile.tileID,
         zoom: tile.tileID.overscaledZ,
@@ -95,11 +94,14 @@ class VectorTileSource extends Evented {
         source: this.id,
         pixelRatio: browser.devicePixelRatio,
         showCollisionBoxes: this.map.showCollisionBoxes,
-        globalState: this.map.getGlobalState()
+        globalState: this.map.getGlobalState(),
+        painter: this.map.painter
       };
-      tile.workerID ??= this.dispatcher.nextWorkerId();
-      const data = await this.dispatcher.send('loadTile', params, tile.workerID);
-      data.rawTileData = rawData;
+      tile.workerID ??= true;
+      const data = await this.#worker.loadTile(params);
+      if (this._showTileBoundaries) {
+        data.rawTileData = rawData;
+      }
       tile.loadVectorData(data, this.map.painter);
     } catch (err) {
       if (tile.aborted) {
@@ -125,4 +127,4 @@ class VectorTileSource extends Evented {
   }
 }
 
-module.exports = VectorTileSource;
+export default VectorTileSource;

package/src/source/vector_tile_worker_source.js

@@ -1,19 +1,6 @@
-const { VectorTile } = require('@mapwhit/vector-tile');
-const Protobuf = require('@mapwhit/pbf');
-const WorkerTile = require('./worker_tile');
-
-function loadVectorTile(params) {
-  if (!params.response) {
-    throw new Error('no tile data');
-  }
-  const { data } = params.response;
-  if (!data) {
-    return;
-  }
-  return {
-    vectorTile: new VectorTile(new Protobuf(data))
-  };
-}
+import Protobuf from '@mapwhit/pbf';
+import { VectorTile } from '@mapwhit/vector-tile';
+import makeWorkerTile from './worker_tile.js';
 
 /**
  * The {@link WorkerSource} implementation that supports {@link VectorTileSource}.
@@ -31,10 +18,22 @@ class VectorTileWorkerSource {
    * {@link VectorTileWorkerSource#loadTile}. The default implementation simply
    * loads the pbf at `params.url`.
    */
-  constructor(resources, layerIndex, loadVectorData = loadVectorTile) {
+  constructor(resources, layerIndex) {
     this.resources = resources;
     this.layerIndex = layerIndex;
-    this.loadVectorData = loadVectorData;
+  }
+
+  loadVectorData(params) {
+    if (!params.response) {
+      throw new Error('no tile data');
+    }
+    const { data } = params.response;
+    if (!data) {
+      return;
+    }
+    return {
+      vectorTile: new VectorTile(new Protobuf(data))
+    };
   }
 
   /**
@@ -47,16 +46,13 @@ class VectorTileWorkerSource {
     if (!response) {
       return;
     }
-    const { vectorTile, rawData } = response;
-    const workerTile = new WorkerTile(params);
-    workerTile.globalState = params.globalState;
-    workerTile.vectorTile = vectorTile;
-    const result = await workerTile.parse(vectorTile, this.layerIndex, this.resources);
-    if (rawData) {
-      result.rawTileData = rawData;
+    const { vectorTile } = response;
+    const result = await makeWorkerTile(params, vectorTile, this.layerIndex, this.resources);
+    if (vectorTile) {
+      result.vectorTile = vectorTile;
     }
     return result;
   }
 }
 
-module.exports = VectorTileWorkerSource;
+export default VectorTileWorkerSource;

package/src/source/worker_tile.js

@@ -1,148 +1,155 @@
-const FeatureIndex = require('../data/feature_index');
-
-const { performSymbolLayout } = require('../symbol/symbol_layout');
-const { CollisionBoxArray } = require('../data/array_types');
-const dictionaryCoder = require('../util/dictionary_coder');
-const SymbolBucket = require('../data/bucket/symbol_bucket');
-const LineBucket = require('../data/bucket/line_bucket');
-const FillBucket = require('../data/bucket/fill_bucket');
-const FillExtrusionBucket = require('../data/bucket/fill_extrusion_bucket');
-const { mapObject, values } = require('../util/object');
-const warn = require('../util/warn');
-const assert = require('assert');
-const ImageAtlas = require('../render/image_atlas');
-const GlyphAtlas = require('../render/glyph_atlas');
-const EvaluationParameters = require('../style/evaluation_parameters');
-const { OverscaledTileID } = require('./tile_id');
-
-class WorkerTile {
-  constructor(params) {
-    this.tileID = new OverscaledTileID(
-      params.tileID.overscaledZ,
-      params.tileID.wrap,
-      params.tileID.canonical.z,
-      params.tileID.canonical.x,
-      params.tileID.canonical.y
-    );
-    this.uid = params.uid;
-    this.zoom = params.zoom;
-    this.pixelRatio = params.pixelRatio;
-    this.tileSize = params.tileSize;
-    this.source = params.source;
-    this.overscaling = this.tileID.overscaleFactor();
-    this.showCollisionBoxes = params.showCollisionBoxes;
-    this.globalState = params.globalState;
-  }
-
-  async parse(data, layerIndex, resources) {
-    this.status = 'parsing';
-    this.data = data;
-
-    this.collisionBoxArray = new CollisionBoxArray();
-    const sourceLayerCoder = dictionaryCoder(Object.keys(data.layers));
-
-    const featureIndex = new FeatureIndex(this.tileID);
-    featureIndex.bucketLayerIDs = [];
+import { CollisionBoxArray } from '../data/array_types.js';
+import FillBucket from '../data/bucket/fill_bucket.js';
+import FillExtrusionBucket from '../data/bucket/fill_extrusion_bucket.js';
+import LineBucket from '../data/bucket/line_bucket.js';
+import SymbolBucket from '../data/bucket/symbol_bucket.js';
+import FeatureIndex from '../data/feature_index.js';
+import GlyphAtlas from '../render/glyph_atlas.js';
+import ImageAtlas from '../render/image_atlas.js';
+import EvaluationParameters from '../style/evaluation_parameters.js';
+import { performSymbolLayout } from '../symbol/symbol_layout.js';
+import dictionaryCoder from '../util/dictionary_coder.js';
+import { mapObject } from '../util/object.js';
+import { OverscaledTileID } from './tile_id.js';
+export default makeWorkerTile;
+
+async function makeWorkerTile(params, vectorTile, layerIndex, resources) {
+  const tileID = createTileID(params);
+
+  const overscaling = tileID.overscaleFactor();
+  const { zoom, pixelRatio, source, showCollisionBoxes, globalState, justReloaded, painter } = params;
+
+  const collisionBoxArray = new CollisionBoxArray();
+  const sourceLayerCoder = dictionaryCoder(Object.keys(vectorTile.layers));
+
+  const featureIndex = new FeatureIndex(tileID);
+  featureIndex.bucketLayerIDs = [];
+
+  const uniqueBuckets = new Map();
+
+  const options = {
+    featureIndex,
+    iconDependencies: {},
+    patternDependencies: {},
+    glyphDependencies: {}
+  };
+
+  const layerFamilies = layerIndex.familiesBySource.get(source) ?? new Map();
+  for (const [sourceLayerId, sourceLayerFamilies] of layerFamilies) {
+    const sourceLayer = vectorTile.layers[sourceLayerId];
+    if (!sourceLayer) {
+      continue;
+    }
 
-    const buckets = {};
+    const sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
+    const features = new Array(sourceLayer.length);
+    for (let index = 0; index < sourceLayer.length; index++) {
+      features[index] = { feature: sourceLayer.feature(index), index, sourceLayerIndex };
+    }
 
-    const options = {
-      featureIndex,
-      iconDependencies: {},
-      patternDependencies: {},
-      glyphDependencies: {}
-    };
+    for (const layers of sourceLayerFamilies.values()) {
+      const layer = layers[0];
 
-    const layerFamilies = layerIndex.familiesBySource[this.source];
-    for (const sourceLayerId in layerFamilies) {
-      const sourceLayer = data.layers[sourceLayerId];
-      if (!sourceLayer) {
+      if (layer.minzoom && zoom < Math.floor(layer.minzoom)) {
         continue;
       }
-
-      if (sourceLayer.version === 1) {
-        warn.once(
-          `Vector tile source "${this.source}" layer "${sourceLayerId}" ` +
-            'does not use vector tile spec v2 and therefore may have some rendering errors.'
-        );
+      if (layer.maxzoom && zoom >= layer.maxzoom) {
+        continue;
       }
-
-      const sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
-      const features = [];
-      for (let index = 0; index < sourceLayer.length; index++) {
-        const feature = sourceLayer.feature(index);
-        features.push({ feature, index, sourceLayerIndex });
+      if (layer.visibility === 'none') {
+        continue;
       }
 
-      for (const family of layerFamilies[sourceLayerId]) {
-        const layer = family[0];
-
-        assert(layer.source === this.source);
-        if (layer.minzoom && this.zoom < Math.floor(layer.minzoom)) continue;
-        if (layer.maxzoom && this.zoom >= layer.maxzoom) continue;
-        if (layer.visibility === 'none') continue;
-
-        recalculateLayers(family, this.zoom, this.globalState);
-
-        const bucket = (buckets[layer.id] = layer.createBucket({
-          index: featureIndex.bucketLayerIDs.length,
-          layers: family,
-          zoom: this.zoom,
-          pixelRatio: this.pixelRatio,
-          overscaling: this.overscaling,
-          collisionBoxArray: this.collisionBoxArray,
-          sourceLayerIndex: sourceLayerIndex,
-          sourceID: this.source,
-          globalState: this.globalState
-        }));
-
-        bucket.populate(features, options);
-        featureIndex.bucketLayerIDs.push(family.map(l => l.id));
-      }
+      recalculateLayers(layers, zoom, globalState);
+
+      const bucket = layer.createBucket({
+        index: featureIndex.bucketLayerIDs.length,
+        layers,
+        zoom,
+        pixelRatio,
+        overscaling,
+        collisionBoxArray,
+        sourceLayerIndex,
+        sourceID: source,
+        globalState
+      });
+      uniqueBuckets.set(layer.id, bucket);
+      bucket.populate(features, options);
+      featureIndex.bucketLayerIDs.push(layers.map(l => l.id));
     }
+  }
 
-    const stacks = mapObject(options.glyphDependencies, glyphs => Object.keys(glyphs).map(Number));
-    const icons = Object.keys(options.iconDependencies);
-    const patterns = Object.keys(options.patternDependencies);
-    const tasks = [
-      Object.keys(stacks).length ? resources.getGlyphs({ uid: this.uid, stacks }) : {},
-      icons.length ? resources.getImages({ icons }) : {},
-      patterns.length ? resources.getImages({ icons: patterns }) : {}
-    ];
-    const [glyphMap, iconMap, patternMap] = await Promise.all(tasks);
-    const glyphAtlas = new GlyphAtlas(glyphMap);
-    const imageAtlas = new ImageAtlas(iconMap, patternMap);
-
-    for (const key in buckets) {
-      const bucket = buckets[key];
-      if (bucket instanceof SymbolBucket) {
-        recalculateLayers(bucket.layers, this.zoom, this.globalState);
-        performSymbolLayout(
-          bucket,
-          glyphMap,
-          glyphAtlas.positions,
-          iconMap,
-          imageAtlas.iconPositions,
-          this.showCollisionBoxes
-        );
-      } else if (
-        bucket.hasPattern &&
-        (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
-      ) {
-        recalculateLayers(bucket.layers, this.zoom, this.globalState);
-        bucket.addFeatures(options, imageAtlas.patternPositions);
+  const buckets = new Map();
+  const { glyphAtlas, imageAtlas, glyphMap, iconMap } = await makeAtlasses(options, resources);
+  let hasSymbolBuckets = false;
+  let queryPadding = 0;
+  for (const bucket of uniqueBuckets.values()) {
+    if (bucket instanceof SymbolBucket) {
+      hasSymbolBuckets = true;
+      recalculateLayers(bucket.layers, zoom, globalState);
+      performSymbolLayout(
+        bucket,
+        glyphMap,
+        glyphAtlas.positions,
+        iconMap,
+        imageAtlas.iconPositions,
+        showCollisionBoxes
+      );
+      if (justReloaded) {
+        bucket.justReloaded = true;
       }
+    } else if (
+      bucket.hasPattern &&
+      (bucket instanceof LineBucket || bucket instanceof FillBucket || bucket instanceof FillExtrusionBucket)
+    ) {
+      recalculateLayers(bucket.layers, zoom, globalState);
+      bucket.addFeatures(options, imageAtlas.patternPositions);
+    }
+    if (bucket.isEmpty()) {
+      continue; // Skip empty buckets
+    }
+    bucket.stateDependentLayers = [];
+    for (const layer of bucket.layers) {
+      if (painter?.style) {
+        queryPadding = Math.max(queryPadding, painter.style.getLayer(layer.id).queryRadius(bucket));
+      }
+      if (layer.isStateDependent()) {
+        bucket.stateDependentLayers.push(layer);
+      }
+      buckets.set(layer.id, bucket);
     }
-
-    this.status = 'done';
-    return {
-      buckets: values(buckets).filter(b => !b.isEmpty()),
-      featureIndex,
-      collisionBoxArray: this.collisionBoxArray,
-      glyphAtlasImage: glyphAtlas.image,
-      imageAtlas
-    };
   }
+
+  return {
+    buckets,
+    featureIndex,
+    collisionBoxArray,
+    glyphAtlasImage: glyphAtlas.image,
+    imageAtlas,
+    hasSymbolBuckets,
+    queryPadding
+  };
+}
+
+async function makeAtlasses({ glyphDependencies, patternDependencies, iconDependencies }, resources) {
+  const stacks = mapObject(glyphDependencies, glyphs => Object.keys(glyphs).map(Number));
+  const icons = Object.keys(iconDependencies);
+  const patterns = Object.keys(patternDependencies);
+  const tasks = [
+    Object.keys(stacks).length ? resources.getGlyphs({ stacks }) : {},
+    icons.length ? resources.getImages({ icons }) : {},
+    patterns.length ? resources.getImages({ icons: patterns }) : {}
+  ];
+  const [glyphMap, iconMap, patternMap] = await Promise.all(tasks);
+  const glyphAtlas = new GlyphAtlas(glyphMap);
+  const imageAtlas = new ImageAtlas(iconMap, patternMap);
+  return { glyphAtlas, imageAtlas, glyphMap, iconMap };
+}
+
+function createTileID({ tileID }) {
+  const { overscaledZ, wrap, canonical } = tileID;
+  const { x, y, z } = canonical;
+  return new OverscaledTileID(overscaledZ, wrap, z, x, y);
 }
 
 function recalculateLayers(layers, zoom, globalState) {
@@ -152,5 +159,3 @@ function recalculateLayers(layers, zoom, globalState) {
     layer.recalculate(parameters);
   }
 }
-
-module.exports = WorkerTile;

package/src/style/create_style_layer.js

@@ -1,12 +1,12 @@
-const circle = require('./style_layer/circle_style_layer');
-const heatmap = require('./style_layer/heatmap_style_layer');
-const hillshade = require('./style_layer/hillshade_style_layer');
-const fill = require('./style_layer/fill_style_layer');
-const fillExtrusion = require('./style_layer/fill_extrusion_style_layer');
-const line = require('./style_layer/line_style_layer');
-const symbol = require('./style_layer/symbol_style_layer');
-const background = require('./style_layer/background_style_layer');
-const raster = require('./style_layer/raster_style_layer');
+import background from './style_layer/background_style_layer.js';
+import circle from './style_layer/circle_style_layer.js';
+import { FillExtrusionStyleLayer as fillExtrusion } from './style_layer/fill_extrusion_style_layer.js';
+import fill from './style_layer/fill_style_layer.js';
+import heatmap from './style_layer/heatmap_style_layer.js';
+import hillshade from './style_layer/hillshade_style_layer.js';
+import line from './style_layer/line_style_layer.js';
+import raster from './style_layer/raster_style_layer.js';
+import symbol from './style_layer/symbol_style_layer.js';
 
 const subclasses = {
   circle,
@@ -20,6 +20,6 @@ const subclasses = {
   raster
 };
 
-module.exports = function createStyleLayer(layer) {
+export default function createStyleLayer(layer) {
   return new subclasses[layer.type](layer);
-};
+}

package/src/style/evaluation_parameters.js

@@ -1,8 +1,8 @@
-const ZoomHistory = require('./zoom_history');
-const { isStringInSupportedScript } = require('../util/script_detection');
-const { plugin: rtlTextPlugin } = require('../source/rtl_text_plugin');
+import { plugin as rtlTextPlugin } from '../source/rtl_text_plugin.js';
+import { isStringInSupportedScript } from '../util/script_detection.js';
+import ZoomHistory from './zoom_history.js';
 
-class EvaluationParameters {
+export default class EvaluationParameters {
   // "options" may also be another EvaluationParameters to copy, see CrossFadedProperty.possiblyEvaluate
   constructor(zoom, options) {
     this.zoom = zoom;
@@ -43,5 +43,3 @@ class EvaluationParameters {
       : { fromScale: 0.5, toScale: 1, t: 1 - (1 - t) * fraction };
   }
 }
-
-module.exports = EvaluationParameters;

package/src/style/light.js

@@ -1,6 +1,6 @@
-const { sphericalToCartesian } = require('../util/util');
-const { Evented } = require('@mapwhit/events');
-const interpolate = require('../util/interpolate');
+import { Evented } from '@mapwhit/events';
+import interpolate from '../util/interpolate.js';
+import { sphericalToCartesian } from '../util/util.js';
 
 const lightSpec = {
   anchor: {
@@ -40,7 +40,7 @@ const lightSpec = {
   }
 };
 
-const { Properties, Transitionable, DataConstantProperty } = require('./properties');
+import { DataConstantProperty, Properties, Transitionable } from './properties.js';
 
 class LightPositionProperty {
   constructor(specification) {
@@ -109,4 +109,4 @@ class Light extends Evented {
   }
 }
 
-module.exports = Light;
+export default Light;

package/src/style/load_sprite.js

@@ -1,10 +1,10 @@
-const browser = require('../util/browser');
-const { RGBAImage } = require('../util/image');
-const loadImage = require('../util/loader/image');
+import browser from '../util/browser.js';
+import { RGBAImage } from '../util/image.js';
+import loadImage from '../util/loader/image.js';
+export default loadSprite;
 
-module.exports = loadSprite;
-
-async function loadSprite(sprite) {
+async function loadSprite(loadingSprite) {
+  const sprite = await loadingSprite;
   const image = await loadImage(sprite.image);
   const { json } = sprite;
   if (json && image) {

package/src/style/parse_glyph_pbf.js

@@ -1,7 +1,7 @@
-const { AlphaImage } = require('../util/image');
+import Protobuf from '@mapwhit/pbf';
+import { AlphaImage } from '../util/image.js';
 
-const Protobuf = require('@mapwhit/pbf');
-const border = 3;
+export const GLYPH_PBF_BORDER = 3;
 
 function readFontstacks(tag, glyphs, pbf) {
   if (tag === 1) {
@@ -16,8 +16,8 @@ function readFontstack(tag, glyphs, pbf) {
       id,
       bitmap: new AlphaImage(
         {
-          width: width + 2 * border,
-          height: height + 2 * border
+          width: width + 2 * GLYPH_PBF_BORDER,
+          height: height + 2 * GLYPH_PBF_BORDER
         },
         bitmap
       ),
@@ -27,19 +27,23 @@ function readFontstack(tag, glyphs, pbf) {
 }
 
 function readGlyph(tag, glyph, pbf) {
-  if (tag === 1) glyph.id = pbf.readVarint();
-  else if (tag === 2) glyph.bitmap = pbf.readBytes();
-  else if (tag === 3) glyph.width = pbf.readVarint();
-  else if (tag === 4) glyph.height = pbf.readVarint();
-  else if (tag === 5) glyph.left = pbf.readSVarint();
-  else if (tag === 6) glyph.top = pbf.readSVarint();
-  else if (tag === 7) glyph.advance = pbf.readVarint();
+  if (tag === 1) {
+    glyph.id = pbf.readVarint();
+  } else if (tag === 2) {
+    glyph.bitmap = pbf.readBytes();
+  } else if (tag === 3) {
+    glyph.width = pbf.readVarint();
+  } else if (tag === 4) {
+    glyph.height = pbf.readVarint();
+  } else if (tag === 5) {
+    glyph.left = pbf.readSVarint();
+  } else if (tag === 6) {
+    glyph.top = pbf.readSVarint();
+  } else if (tag === 7) {
+    glyph.advance = pbf.readVarint();
+  }
 }
 
-function parseGlyph(data) {
+export default function parseGlyph(data) {
   return new Protobuf(data).readFields(readFontstacks, []);
 }
-
-parseGlyph.GLYPH_PBF_BORDER = border;
-
-module.exports = parseGlyph;

package/src/style/pauseable_placement.js

@@ -1,6 +1,5 @@
-const browser = require('../util/browser');
-
-const { Placement } = require('../symbol/placement');
+import { Placement } from '../symbol/placement.js';
+import browser from '../util/browser.js';
 
 class LayerPlacement {
   constructor() {
@@ -22,9 +21,9 @@ class LayerPlacement {
 }
 
 class PauseablePlacement {
-  constructor(transform, order, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions) {
+  constructor(transform, maxIndex, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions) {
     this.placement = new Placement(transform, fadeDuration, crossSourceCollisions);
-    this._currentPlacementIndex = order.length - 1;
+    this._currentPlacementIndex = maxIndex;
     this._forceFullPlacement = forceFullPlacement;
     this._showCollisionBoxes = showCollisionBoxes;
     this._done = false;
@@ -34,7 +33,7 @@ class PauseablePlacement {
     return this._done;
   }
 
-  continuePlacement(order, layers, layerTiles) {
+  continuePlacement(layers, layerTiles) {
     const startTime = browser.now();
 
     const shouldPausePlacement = () => {
@@ -43,8 +42,7 @@ class PauseablePlacement {
     };
 
     while (this._currentPlacementIndex >= 0) {
-      const layerId = order[this._currentPlacementIndex];
-      const layer = layers[layerId];
+      const layer = layers[this._currentPlacementIndex];
       const placementZoom = this.placement.collisionIndex.transform.zoom;
       if (
         layer.type === 'symbol' &&
@@ -85,4 +83,4 @@ class PauseablePlacement {
   }
 }
 
-module.exports = PauseablePlacement;
+export default PauseablePlacement;