title: Mapbox queryRenderedFeatures on load
body: <p>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:</p>
  
  <pre><code>The layer 'Points' does not exist in the map's style and cannot be queried for features.
  </code></pre>
  
  <p>How can I query the layer after the feature is loaded? I tried following the suggestions in these answers but it keeps returning empty </p>
  
  <p><a href="https://stackoverflow.com/questions/807878/javascript-that-executes-after-page-load?rq=1">JavaScript that executes after page load</a></p>
  
  <p><a href="https://stackoverflow.com/questions/11936816/call-a-function-after-complete-page-load?utm_medium=organic&amp;utm_source=google_rich_qa&amp;utm_campaign=google_rich_qa">call a function after complete page load</a></p>
  
  <p>This is what I have right now</p>
  
  <pre><code>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);
  });
  </code></pre>