title: Mapbox Web GL JS - querySourceFeatures() function with vector tile source
body: <p>I've got a vector tileset on Mapbox that I created by uploading a geojson file comprising polygons representing particular suburbs in Victoria, Australia.  My vector tileset has three properties - suburb, state, postcode - corresponding to the feature properties in the geojson.</p>
  
  <p>I can also successfully query those properties via the Mapbox web gl js library to get an accurate map.  For example I've got a map working that shows a popup when I click a highlighted polygon, and the popup correctly shows that suburb's properties (suburb, state, postcode).</p>
  
  <p>Now I'd like to access those properties - for every feature in my tileset - in my web page. I basically want to dump those properties out as a list, in a div outside of the map; just listing each suburb and its properties. To this end, I'm trying to use the querySourceFeatures function of the MapBox Web GL JS library.    I'm struggling a bit.</p>
  
  <p>Here's my code.  My map displays as expected.  But in the JS console I'm just getting an empty array. </p>
  
  <p>Here's my code</p>
  
  <pre><code>var map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
      center: [144.96, -37.81], // starting position
      zoom: 8, // starting zoom,
      hash:true
  });
  
  // Add zoom and rotation controls to the map.
  map.addControl(new mapboxgl.Navigation());
  
  map.on('load', function () {
      map.addSource('charlieSource', {
          type: 'vector',
          url: 'mapbox://charlie.962dstid'
      });
  
  
     map.addLayer({
      "id": "charlielayer",
      "type": "fill",
      "source": "charlieSource",
      "source-layer": "my-source-layer-name",
      "layout": {},
      "paint": {
          "fill-color": "#00525a",
          "fill-opacity": 0.5
      }
  
      });
  
      var myFeatures = map.querySourceFeatures('charlieSource', 
          {
              sourceLayer: 'my-source-layer-name',
             // i'm confident there is data matching this filter 
              filter: ["==", "postcode", "3000"]
          }
          );
  
     console.log(myFeatures);
  
  
  });
  </code></pre>
  
  <p>The doco is a bit light so I don't know if I'm using the querySourceFeatures function correctly.  I'm a total JS noob so apologies if its something totally simple. </p>
  
  <p>In my console in Firefox I just get an array of length zero. Not sure where to go from here.</p>
  
  <p>I'm using v0.18.0 of the mapbox web gl js library.</p>