Mapbox Web GL JS - querySourceFeatures() function with vector tile source
<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>