Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
I would like to use queryRenderedFeatures after the page loads in order to populate a list, but it seems to keep firing before the layer is loaded. I get the error message in the console below:
The layer 'Points' does not exist in the map's style and cannot be queried for features.
How can I query the layer after the feature is loaded? I tried following the suggestions in these answers but it keeps returning empty
JavaScript that executes after page load
call a function after complete page load
This is what I have right now
map.on('load', function() {
map.addLayer({
'id': 'Points',
'type': 'circle',
'source': 'Points-45d56v',
'source-layer': 'Points-45d56v',
'layout': {
'visibility': 'visible',
'paint': {
'circle-radius': 6,
'circle-color': 'red'
$(document).ready(function(){
var features = map.queryRenderedFeatures({layers:['Points']});
console.log(features);
I got the following code from the Github link in the previous answer, which worked for me:
map.addLayer(...) // make your change
map.on('render', afterChangeComplete); // warning: this fires many times per second!
function afterChangeComplete () {
if (!map.loaded()) { return } // still not loaded; bail out.
// now that the map is loaded, it's safe to query the features:
map.queryRenderedFeatures(...);
map.off('render', afterChangeComplete); // remove this handler now that we're done.
Be sure to put it in the same map.on('load', function() {});
as the layer to be queried.
From https://github.com/mapbox/mapbox-gl-js/issues/4222#issuecomment-279446075:
You can check map.loaded()
(https://www.mapbox.com/mapbox-gl-js/api/#map#loaded) to determine whether the map is loaded and it's safe to query the features.
For example code see the linked issue comment on GitHub.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.