Query Rendered Layers

Question

I am quite new to webprogramming and mapbox-gl-js so this might be a rather dull question.

I am looking for a way to check for the currently rendered layers on the map. I am currently using the "queryRenderedFeatures" function to find all rendered features and afterward I filter them for induvidual rendered layers. My currenty implementation looks like this:

self.ctx.map.on('moveend', () => {
    const features = self.ctx.map.queryRenderedFeatures({ layers: layerIDs , validation : false});
    if (features) {
        const uniqueFeatures = getUniqueFeatures(features, 'Associated_AP');
        renderListings(features);
    }
});

The problem I have with this method is that after I move the map the whole web application "stutters" because the application now searches up to 50000 features on the map and then filters them once again to find the individual rendered layers.

Is there another way so that I can improve the speed of my application?

Checking for actively rendered layers on the map. I would just like to know how many layers really currently show a feature on the map. I don't care how many features are displayed per layer. Once a feauture is found for the layer, the other features of the corresponding layer don't need to be searched. I need this so that the layers can be turned on or off via a checkbox if needed.

Answer 1

If I understand you correctly, you might want something like this:

const visibleLayers = layerIDs.filter(l => 
  self.ctx.map.queryRenderedFeatures({ layers: [l] }).length > 0)

I don't know if the performance will be faster.