@mapwhit/tilerenderer 0.52.1 → 1.0.0

package/src/render/image_manager.js

@@ -23,10 +23,11 @@ const padding = 1;
 */
 class ImageManager {
   #loadedState = Promise.withResolvers();
+  #imageQueue = new Map();
   constructor() {
-    this.images = {};
+    this.images = new Map();
 
-    this.patterns = {};
+    this.patterns = new Map();
     this.atlasImage = new RGBAImage({ width: 1, height: 1 });
     this.dirty = true;
   }
@@ -44,22 +45,31 @@ class ImageManager {
   }
 
   getImage(id) {
-    return this.images[id];
+    return this.images.get(id);
   }
 
   addImage(id, image) {
-    assert(!this.images[id]);
-    this.images[id] = image;
+    assert(!(this.images.has(id) || this.#imageQueue.has(id)));
+    if (image.promise) {
+      this.#imageQueue.set(id, image.promise);
+      image.promise.then(image => {
+        this.#imageQueue.delete(id);
+        this.images.set(id, image);
+      });
+      return;
+    }
+    this.images.set(id, image);
   }
 
   removeImage(id) {
-    assert(this.images[id]);
-    delete this.images[id];
-    delete this.patterns[id];
+    assert(this.images.has(id) || this.#imageQueue.has(id));
+    this.images.delete(id);
+    this.#imageQueue.delete(id);
+    this.patterns.delete(id);
   }
 
   listImages() {
-    return Object.keys(this.images);
+    return Array.from(this.images.keys());
   }
 
   async getImages(ids) {
@@ -67,11 +77,16 @@ class ImageManager {
 
     const response = {};
     for (const id of ids) {
-      const image = this.images[id];
+      let image = this.images.get(id);
+      if (!image) {
+        if (!this.#imageQueue.has(id)) {
+          continue;
+        }
+        image = await this.#imageQueue.get(id);
+      }
       if (image) {
-        // Clone the image so that our own copy of its ArrayBuffer doesn't get transferred.
         response[id] = {
-          data: image.data.clone(),
+          data: image.data,
           pixelRatio: image.pixelRatio,
           sdf: image.sdf
         };
@@ -88,7 +103,7 @@ class ImageManager {
   }
 
   getPattern(id) {
-    const pattern = this.patterns[id];
+    const pattern = this.patterns.get(id);
     if (pattern) {
       return pattern.position;
     }
@@ -102,7 +117,7 @@ class ImageManager {
     const h = image.data.height + padding * 2;
     const bin = { w, h, x: 0, y: 0 };
     const position = new ImagePosition(bin, image);
-    this.patterns[id] = { bin, position };
+    this.patterns.set(id, { bin, position });
     this._updatePatternAtlas();
 
     return position;
@@ -122,8 +137,8 @@ class ImageManager {
 
   _updatePatternAtlas() {
     const bins = [];
-    for (const id in this.patterns) {
-      bins.push(this.patterns[id].bin);
+    for (const { bin } of this.patterns.values()) {
+      bins.push(bin);
     }
 
     const { w, h } = potpack(bins);
@@ -131,11 +146,10 @@ class ImageManager {
     const dst = this.atlasImage;
     dst.resize({ width: w ?? 1, height: h ?? 1 });
 
-    for (const id in this.patterns) {
-      const { bin } = this.patterns[id];
+    for (const [id, { bin }] of this.patterns) {
       const x = bin.x + padding;
       const y = bin.y + padding;
-      const src = this.images[id].data;
+      const src = this.images.get(id).data;
       const w = src.width;
       const h = src.height;
 

package/src/render/painter.js

@@ -83,8 +83,8 @@ class Painter {
     this.context.viewport.set([0, 0, this.width, this.height]);
 
     if (this.style) {
-      for (const layerId of this.style._order) {
-        this.style._layers[layerId].resize();
+      for (const layer of this.style._layers.values()) {
+        layer.resize();
       }
     }
 
@@ -284,8 +284,7 @@ class Painter {
 
     this.symbolFadeChange = style.placement.symbolFadeChange(browser.now());
 
-    const layerIds = this.style._order;
-    const sourceCaches = this.style.sourceCaches;
+    const sourceCaches = style._sources;
 
     for (const id in sourceCaches) {
       const sourceCache = sourceCaches[id];
@@ -314,10 +313,11 @@ class Painter {
       updateTileMasks(visibleTiles, this.context);
     }
 
+    const layers = Array.from(style._layers.values());
+
     this.opaquePassCutoff = Number.POSITIVE_INFINITY;
-    for (let i = 0; i < layerIds.length; i++) {
-      const layerId = layerIds[i];
-      if (this.style._layers[layerId].is3D()) {
+    for (let i = 0; i < layers.length; i++) {
+      if (layers[i].is3D()) {
         this.opaquePassCutoff = i;
         break;
       }
@@ -330,8 +330,7 @@ class Painter {
     this.renderPass = 'offscreen';
     this.depthRboNeedsClear = true;
 
-    for (const layerId of layerIds) {
-      const layer = this.style._layers[layerId];
+    for (const layer of layers) {
       if (!layer.hasOffscreenPass() || layer.isHidden(this.transform.zoom)) continue;
 
       const coords = coordsDescending[layer.source];
@@ -349,14 +348,14 @@ class Painter {
     this.clearStencil();
 
     this._showOverdrawInspector = options.showOverdrawInspector;
-    this.depthRangeFor3D = [0, 1 - (style._order.length + 2) * this.numSublayers * this.depthEpsilon];
+    this.depthRangeFor3D = [0, 1 - (style._layers.size + 2) * this.numSublayers * this.depthEpsilon];
 
     // Opaque pass ===============================================
     // Draw opaque layers top-to-bottom first.
     this.renderPass = 'opaque';
 
-    for (this.currentLayer = layerIds.length - 1; this.currentLayer >= 0; this.currentLayer--) {
-      const layer = this.style._layers[layerIds[this.currentLayer]];
+    for (this.currentLayer = layers.length - 1; this.currentLayer >= 0; this.currentLayer--) {
+      const layer = layers[this.currentLayer];
       const sourceCache = sourceCaches[layer.source];
       const coords = coordsAscending[layer.source];
 
@@ -368,8 +367,8 @@ class Painter {
     // Draw all other layers bottom-to-top.
     this.renderPass = 'translucent';
 
-    for (this.currentLayer = 0; this.currentLayer < layerIds.length; this.currentLayer++) {
-      const layer = this.style._layers[layerIds[this.currentLayer]];
+    for (this.currentLayer = 0; this.currentLayer < layers.length; this.currentLayer++) {
+      const layer = layers[this.currentLayer];
       const sourceCache = sourceCaches[layer.source];
 
       // For symbol layers in the translucent pass, we add extra tiles to the renderable set

package/src/render/program/circle_program.js

@@ -14,7 +14,7 @@ const circleUniformValues = (painter, coord, tile, layer) => {
 
   let pitchWithMap;
   let extrudeScale;
-  if (layer.paint.get('circle-pitch-alignment') === 'map') {
+  if (layer._paint.get('circle-pitch-alignment') === 'map') {
     const pixelRatio = pixelsToTileUnits(tile, 1, transform.zoom);
     pitchWithMap = true;
     extrudeScale = [pixelRatio, pixelRatio];
@@ -25,12 +25,12 @@ const circleUniformValues = (painter, coord, tile, layer) => {
 
   return {
     u_camera_to_center_distance: transform.cameraToCenterDistance,
-    u_scale_with_map: +(layer.paint.get('circle-pitch-scale') === 'map'),
+    u_scale_with_map: +(layer._paint.get('circle-pitch-scale') === 'map'),
     u_matrix: painter.translatePosMatrix(
       coord.posMatrix,
       tile,
-      layer.paint.get('circle-translate'),
-      layer.paint.get('circle-translate-anchor')
+      layer._paint.get('circle-translate'),
+      layer._paint.get('circle-translate-anchor')
     ),
     u_pitch_with_map: +pitchWithMap,
     u_extrude_scale: extrudeScale

package/src/render/program/fill_extrusion_program.js

@@ -29,7 +29,7 @@ const fillExtrusionPatternUniforms = (context, locations) => ({
 });
 
 const fillExtrusionUniformValues = (matrix, painter, shouldUseVerticalGradient, opacity) => {
-  const light = painter.style.light;
+  const light = painter.style._light;
   const _lp = light.properties.get('position');
   const lightPos = [_lp.x, _lp.y, _lp.z];
   const lightMat = mat3.create();

package/src/render/program/heatmap_program.js

@@ -34,7 +34,7 @@ const heatmapTextureUniformValues = (painter, layer, textureUnit, colorRampUnit)
     u_world: [gl.drawingBufferWidth, gl.drawingBufferHeight],
     u_image: textureUnit,
     u_color_ramp: colorRampUnit,
-    u_opacity: layer.paint.get('heatmap-opacity')
+    u_opacity: layer._paint.get('heatmap-opacity')
   };
 };
 

package/src/render/program/hillshade_program.js

@@ -24,13 +24,13 @@ const hillshadePrepareUniforms = (context, locations) => ({
 });
 
 const hillshadeUniformValues = (painter, tile, layer) => {
-  const shadow = layer.paint.get('hillshade-shadow-color');
-  const highlight = layer.paint.get('hillshade-highlight-color');
-  const accent = layer.paint.get('hillshade-accent-color');
+  const shadow = layer._paint.get('hillshade-shadow-color');
+  const highlight = layer._paint.get('hillshade-highlight-color');
+  const accent = layer._paint.get('hillshade-accent-color');
 
-  let azimuthal = layer.paint.get('hillshade-illumination-direction') * (Math.PI / 180);
+  let azimuthal = layer._paint.get('hillshade-illumination-direction') * (Math.PI / 180);
   // modify azimuthal angle by map rotation if light is anchored at the viewport
-  if (layer.paint.get('hillshade-illumination-anchor') === 'viewport') {
+  if (layer._paint.get('hillshade-illumination-anchor') === 'viewport') {
     azimuthal -= painter.transform.angle;
   }
   const align = !painter.options.moving;
@@ -38,7 +38,7 @@ const hillshadeUniformValues = (painter, tile, layer) => {
     u_matrix: painter.transform.calculatePosMatrix(tile.tileID.toUnwrapped(), align),
     u_image: 0,
     u_latrange: getTileLatRange(painter, tile.tileID),
-    u_light: [layer.paint.get('hillshade-exaggeration'), azimuthal],
+    u_light: [layer._paint.get('hillshade-exaggeration'), azimuthal],
     u_shadow: shadow,
     u_highlight: highlight,
     u_accent: accent

package/src/render/program/line_program.js

@@ -75,7 +75,7 @@ const lineSDFUniformValues = (painter, tile, layer, dasharray, crossfade) => {
   const lineAtlas = painter.lineAtlas;
   const tileRatio = calculateTileRatio(tile, transform);
 
-  const round = layer.layout.get('line-cap') === 'round';
+  const round = layer._layout.get('line-cap') === 'round';
 
   const posA = lineAtlas.getDash(dasharray.from, round);
   const posB = lineAtlas.getDash(dasharray.to, round);
@@ -102,8 +102,8 @@ function calculateMatrix(painter, tile, layer) {
   return painter.translatePosMatrix(
     tile.tileID.posMatrix,
     tile,
-    layer.paint.get('line-translate'),
-    layer.paint.get('line-translate-anchor')
+    layer._paint.get('line-translate'),
+    layer._paint.get('line-translate-anchor')
   );
 }
 

package/src/render/program/raster_program.js

@@ -22,14 +22,14 @@ const rasterUniformValues = (matrix, parentTL, parentScaleBy, fade, layer) => ({
   u_scale_parent: parentScaleBy,
   u_buffer_scale: 1,
   u_fade_t: fade.mix,
-  u_opacity: fade.opacity * layer.paint.get('raster-opacity'),
+  u_opacity: fade.opacity * layer._paint.get('raster-opacity'),
   u_image0: 0,
   u_image1: 1,
-  u_brightness_low: layer.paint.get('raster-brightness-min'),
-  u_brightness_high: layer.paint.get('raster-brightness-max'),
-  u_saturation_factor: saturationFactor(layer.paint.get('raster-saturation')),
-  u_contrast_factor: contrastFactor(layer.paint.get('raster-contrast')),
-  u_spin_weights: spinWeights(layer.paint.get('raster-hue-rotate'))
+  u_brightness_low: layer._paint.get('raster-brightness-min'),
+  u_brightness_high: layer._paint.get('raster-brightness-max'),
+  u_saturation_factor: saturationFactor(layer._paint.get('raster-saturation')),
+  u_contrast_factor: contrastFactor(layer._paint.get('raster-contrast')),
+  u_spin_weights: spinWeights(layer._paint.get('raster-hue-rotate'))
 });
 
 function spinWeights(angle) {

package/src/source/geojson_source.js

@@ -2,6 +2,7 @@ const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 
 const EXTENT = require('../data/extent');
 const browser = require('../util/browser');
+const GeoJSONWorkerSource = require('./geojson_worker_source');
 
 /**
  * A source containing GeoJSON.
@@ -52,8 +53,9 @@ class GeoJSONSource extends Evented {
   #pendingDataEvents = new Set();
   #newData = false;
   #updateInProgress = false;
+  #worker;
 
-  constructor(id, options, dispatcher, eventedParent) {
+  constructor(id, options, eventedParent, { resources, layerIndex }) {
     super();
 
     this.id = id;
@@ -69,10 +71,9 @@ class GeoJSONSource extends Evented {
     this.reparseOverscaled = true;
     this._removed = false;
 
-    this.dispatcher = dispatcher;
     this.setEventedParent(eventedParent);
 
-    this._data = options.data;
+    this.data = options.data;
     this._options = Object.assign({}, options);
 
     if (options.maxzoom !== undefined) this.maxzoom = options.maxzoom;
@@ -107,6 +108,7 @@ class GeoJSONSource extends Evented {
       },
       options.workerOptions
     );
+    this.#worker = new GeoJSONWorkerSource(resources, layerIndex);
   }
 
   load() {
@@ -125,7 +127,7 @@ class GeoJSONSource extends Evented {
    * @returns {GeoJSONSource} this
    */
   setData(data) {
-    this._data = data;
+    this.data = data;
     this.#updateData();
     return this;
   }
@@ -142,7 +144,7 @@ class GeoJSONSource extends Evented {
       this.fire(new Event('dataloading', { dataType: 'source' }));
       while (this.#newData) {
         this.#newData = false;
-        await this._updateWorkerData(this._data);
+        await this._updateWorkerData(this.data);
       }
       this.#pendingDataEvents.forEach(sourceDataType =>
         this.fire(new Event('data', { dataType: 'source', sourceDataType }))
@@ -165,13 +167,9 @@ class GeoJSONSource extends Evented {
     if (!json) {
       throw new Error('no GeoJSON data');
     }
-    const options = { ...this.workerOptions, data: JSON.stringify(json) };
-    this.workerID ??= this.dispatcher.nextWorkerId();
+    const options = { ...this.workerOptions, data: json };
 
-    // target {this.type}.loadData rather than literally geojson.loadData,
-    // so that other geojson-like source types can easily reuse this
-    // implementation
-    await this.dispatcher.send(`${this.type}.loadData`, options, this.workerID);
+    return await this.#worker.loadData(options);
   }
 
   async loadTile(tile) {
@@ -185,14 +183,15 @@ class GeoJSONSource extends Evented {
       source: this.id,
       pixelRatio: browser.devicePixelRatio,
       showCollisionBoxes: this.map.showCollisionBoxes,
-      globalState: this.map.getGlobalState()
+      globalState: this.map.getGlobalState(),
+      justReloaded: tile.workerID != null,
+      painter: this.map.painter
     };
 
-    const justReloaded = tile.workerID != null;
-    tile.workerID ??= this.dispatcher.nextWorkerId(this.workerID);
-    const data = await this.dispatcher.send('loadTile', params, tile.workerID).finally(() => tile.unloadVectorData());
+    tile.workerID ??= true;
+    const data = await this.#worker.loadTile(params).finally(() => tile.unloadVectorData());
     if (!tile.aborted) {
-      tile.loadVectorData(data, this.map.painter, justReloaded);
+      tile.loadVectorData(data, this.map.painter);
     }
   }
 
@@ -206,14 +205,6 @@ class GeoJSONSource extends Evented {
 
   onRemove() {
     this._removed = true;
-    return this.dispatcher.send('removeSource', { type: this.type, source: this.id }, this.workerID);
-  }
-
-  serialize() {
-    return Object.assign({}, this._options, {
-      type: this.type,
-      data: this._data
-    });
   }
 
   hasTransition() {

package/src/source/geojson_worker_source.js

@@ -1,68 +1,14 @@
 const rewind = require('@mapwhit/geojson-rewind');
 const GeoJSONWrapper = require('./geojson_wrapper');
-const { fromVectorTileJs } = require('@mapwhit/vt-pbf');
 const { default: Supercluster } = require('supercluster');
 const { default: geojsonvt } = require('geojson-vt');
 const VectorTileWorkerSource = require('./vector_tile_worker_source');
 
-function loadGeoJSONTile(params) {
-  if (!this._geoJSONIndex) {
-    if (!this._createGeoJSONIndex) {
-      return; // we couldn't load the file
-    }
-
-    try {
-      this._geoJSONIndex = this._createGeoJSONIndex();
-    } finally {
-      this._createGeoJSONIndex = null;
-    }
-  }
-
-  const { z, x, y } = params.tileID.canonical;
-  const geoJSONTile = this._geoJSONIndex.getTile(z, x, y);
-  if (!geoJSONTile) {
-    return; // nothing in the given tile
-  }
-
-  const geojsonWrapper = new GeoJSONWrapper(geoJSONTile.features);
-
-  // Encode the geojson-vt tile into binary vector tile form.  This
-  // is a convenience that allows `FeatureIndex` to operate the same way
-  // across `VectorTileSource` and `GeoJSONSource` data.
-  let pbf = fromVectorTileJs(geojsonWrapper);
-  if (pbf.byteOffset !== 0 || pbf.byteLength !== pbf.buffer.byteLength) {
-    // Compatibility with node Buffer (https://github.com/mapbox/pbf/issues/35)
-    pbf = new Uint8Array(pbf);
-  }
-
-  return {
-    vectorTile: geojsonWrapper,
-    rawData: pbf.buffer
-  };
-}
-
 /**
  * The {@link WorkerSource} implementation that supports {@link GeoJSONSource}.
- * This class is designed to be easily reused to support custom source types
- * for data formats that can be parsed/converted into an in-memory GeoJSON
- * representation.  To do so, create it with
- * `new GeoJSONWorkerSource(resources, layerIndex, customLoadGeoJSONFunction)`.
- * For a full example, see [mapbox-gl-topojson](https://github.com/developmentseed/mapbox-gl-topojson).
  *
  */
 class GeoJSONWorkerSource extends VectorTileWorkerSource {
-  /**
-   * @param [loadGeoJSON] Optional method for custom loading/parsing of
-   * GeoJSON based on parameters passed from the main-thread Source.
-   * See {@link GeoJSONWorkerSource#loadGeoJSON}.
-   */
-  constructor(resources, layerIndex, loadGeoJSON) {
-    super(resources, layerIndex, loadGeoJSONTile);
-    if (loadGeoJSON) {
-      this.loadGeoJSON = loadGeoJSON;
-    }
-  }
-
   /**
    * Fetches (if appropriate), parses, and index geojson data into tiles. This
    * preparatory method must be called before {@link GeoJSONWorkerSource#loadTile}
@@ -76,7 +22,7 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
    * @param callback
    */
   loadData(params) {
-    const data = this.loadGeoJSON(params);
+    const data = loadJSON(params.data);
     this._geoJSONIndex = null;
     this._createGeoJSONIndex = params.cluster
       ? () => {
@@ -89,20 +35,46 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
         };
   }
 
-  /**
-   * Fetch and parse GeoJSON according to the given params.
-   *
-   * GeoJSON is expected as a literal (string or object) `params.data`.
-   *
-   * @param params
-   * @param [params.data] Literal GeoJSON data. Must be provided.
-   */
-  loadGeoJSON(params) {
-    try {
-      return JSON.parse(params.data);
-    } catch (e) {
-      throw new Error('Input data is not a valid GeoJSON object.');
+  getTile(tileID) {
+    if (!this._geoJSONIndex) {
+      if (!this._createGeoJSONIndex) {
+        return; // we couldn't load the file
+      }
+
+      try {
+        this._geoJSONIndex = this._createGeoJSONIndex();
+      } finally {
+        this._createGeoJSONIndex = null;
+      }
+    }
+    const { z, x, y } = tileID.canonical;
+    return this._geoJSONIndex.getTile(z, x, y);
+  }
+
+  loadVectorData({ tileID }) {
+    const geoJSONTile = this.getTile(tileID);
+    if (!geoJSONTile) {
+      return; // nothing in the given tile
     }
+
+    const vectorTile = new GeoJSONWrapper(geoJSONTile.features);
+
+    return {
+      vectorTile
+    };
+  }
+}
+
+/**
+ * Fetch and parse GeoJSON according to the given params.
+ *
+ * @param data Literal GeoJSON data. Must be provided.
+ */
+function loadJSON(data) {
+  try {
+    return typeof data === 'string' ? JSON.parse(data) : data;
+  } catch (e) {
+    throw new Error('Input data is not a valid GeoJSON object.');
   }
 }
 

package/src/source/geojson_wrapper.js

@@ -20,6 +20,14 @@ class FeatureWrapper {
     if ('id' in feature && !isNaN(feature.id)) {
       this.id = Number.parseInt(feature.id, 10);
     }
+
+    // fix geometry - it has to be at least array of 2 points
+    if (typeof this._feature.geometry[0] === 'number') {
+      this._feature.geometry = [this._feature.geometry];
+      if (this._feature.geometry.length === 1) {
+        this._feature.geometry.push(this._feature.geometry[0]);
+      }
+    }
   }
 
   get type() {
@@ -27,7 +35,7 @@ class FeatureWrapper {
   }
 
   get properties() {
-    return this._feature.tags;
+    return this._feature.tags ?? {};
   }
 
   get extent() {

package/src/source/image_source.js

@@ -2,7 +2,6 @@ const { getCoordinatesCenter } = require('../util/util');
 
 const { CanonicalTileID } = require('./tile_id');
 const LngLat = require('../geo/lng_lat');
-const { default: Point } = require('@mapbox/point-geometry');
 const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
 const loadImage = require('../util/loader/image');
 const EXTENT = require('../data/extent');
@@ -44,10 +43,9 @@ class ImageSource extends Evented {
   /**
    * @private
    */
-  constructor(id, options, dispatcher, eventedParent) {
+  constructor(id, options, eventedParent) {
     super();
     this.id = id;
-    this.dispatcher = dispatcher;
     this.coordinates = options.coordinates;
 
     this.type = 'image';
@@ -125,10 +123,10 @@ class ImageSource extends Evented {
     // tile.
     const tileCoords = cornerZ0Coords.map(coord => {
       const zoomedCoord = coord.zoomTo(centerCoord.zoom);
-      return new Point(
-        Math.round((zoomedCoord.column - centerCoord.column) * EXTENT),
-        Math.round((zoomedCoord.row - centerCoord.row) * EXTENT)
-      );
+      return {
+        x: Math.round((zoomedCoord.column - centerCoord.column) * EXTENT),
+        y: Math.round((zoomedCoord.row - centerCoord.row) * EXTENT)
+      };
     });
 
     this._boundsArray = new RasterBoundsArray();
@@ -185,21 +183,13 @@ class ImageSource extends Evented {
     // single tile.
     if (this.tileID?.equals(tile.tileID.canonical)) {
       this.tiles[String(tile.tileID.wrap)] = tile;
-      tile.buckets = {};
+      tile.buckets = new Map();
     } else {
       tile.state = 'errored';
     }
     return Promise.resolve();
   }
 
-  serialize() {
-    return {
-      type: 'image',
-      url: this.options.url,
-      coordinates: this.coordinates
-    };
-  }
-
   hasTransition() {
     return false;
   }

package/src/source/query_features.js

@@ -20,14 +20,13 @@ function getPixelPosMatrix(transform, tileID) {
 function queryIncludes3DLayer(layers, styleLayers, sourceID) {
   if (layers) {
     for (const layerID of layers) {
-      const layer = styleLayers[layerID];
+      const layer = styleLayers.get(layerID);
       if (layer && layer.source === sourceID && layer.type === 'fill-extrusion') {
         return true;
       }
     }
-  } else {
-    for (const key in styleLayers) {
-      const layer = styleLayers[key];
+  } else if (styleLayers) {
+    for (const layer of styleLayers.values()) {
       if (layer.source === sourceID && layer.type === 'fill-extrusion') {
         return true;
       }
@@ -129,7 +128,7 @@ function queryRenderedSymbols(styleLayers, sourceCaches, queryGeometry, params,
   for (const layerName in result) {
     result[layerName].forEach(featureWrapper => {
       const feature = featureWrapper.feature;
-      const layer = styleLayers[layerName];
+      const layer = styleLayers.get(layerName);
       const sourceCache = sourceCaches[layer.source];
       const state = sourceCache.getFeatureState(feature.layer['source-layer'], feature.id);
       feature.source = feature.layer.source;