Mapbox Web GL JS - querySourceFeatures() function with vector tile source

Question

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.

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).

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.

Here's my code. My map displays as expected. But in the JS console I'm just getting an empty array.

Here's my 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);


});

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.

In my console in Firefox I just get an array of length zero. Not sure where to go from here.

I'm using v0.18.0 of the mapbox web gl js library.

Answer 1

EDIT: After adding a source, you must wait for the tiles to load before calling queryRenderedFeatures. This code should solve your problem:

var wasLoaded = false;
map.on('render', function() {
    if (!map.loaded() || wasLoaded) return;
    var myFeatures = map.querySourceFeatures('charlieSource', {
        sourceLayer: 'my-source-layer-name',
        filter: ["==", "postcode", "3000"]
    });
    console.log(myFeatures);
    wasLoaded = true;
});

---

Everything you've posted looks correct, Charlie. I can't pinpoint the problem without a functioning demo using your data.

Have you tried changing your filter from ["==", "postcode", "3000"] to ["==", "postcode", 3000]? (turning the 3000 into a number rather than a string)

Are you sure that the data for which you are searching is within the viewport? querySourceFeatures only works for data within the viewport.

Are you sure that your values for source and sourceLayer are correct?