Mapbox-gl-js: Get number of features in a layer

[gabrieleangeletti]

I have a vector tiles source and a layer that applies a filter on the source, e.g.:

map.addSource("vector_tiles", {
    type: "vector",
    tiles: [url],
    minZoom: 12,
    maxzoom: 24,
});

map.addLayer({
    "id": "layer-id",
    "type": "circle",
    "source": "vector_tiles",
    "source-layer": "layer-id-in-source",
    "paint": {
        "circle-color": "#ff0000",
        "circle-radius": 2.5,
        "circle-opacity": 0.8,
    },
    "filter": ["==", "property", value],
});

Is there an easy way to get the total number of features in the layer?

[jfirebaugh]

You can use queryRenderedFeatures, e.g. map.queryRenderedFeatures({layers: ['layer-id']}).length.

For future "how do I" questions like this, please refer to our help documentation, and if you can't find the answer there, contact support. This issue tracker is for reporting bugs and feature requests. Thank you!

[gabrieleangeletti]

Thank you, and sorry for having misused the issues tracker, it won't happen again!

[hoogw]

There is a bug,

map.queryRenderedFeatures({layers: ['layer-id']}).length

always is 0, which it should not be.
Map view port displays hundreds of polygon, however,
map.queryRenderedFeatures({layers: ['my-polygon-layer-id']}).length
is always 0

[hoogw]

share my working sample:

you must use
map.queryRenderedFeatures(

                      { layers: ['lineString-line'] }

with

           map.on("sourcedata", function(e) {

Otherwise, you will always get 0 empty feature.

 // map.queryRenderedFeatures({ layers: ['point-circle'] });
// always return [] empty 0, which should not
// reason is map.addlayer take a few second, have not finish render
// you have to wait until all tiles finish render, to use 
// map.queryRenderedFeatures({ layers: ['point-circle'] });
// this is how, 

//map.on("sourcedataloading", function(e) {  // not work, not fired
//https://docs.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures



map.on("sourcedata", function(e) {


        // without this, will have many many event fired.
        if (map.areTilesLoaded()) 
        {

            console.log('at least one Tiles loaded!');



            if (typeof map.getLayer('lineString-line') !== 'undefined') {
              // Remove map layer & source.
             // map.removeLayer('route').removeSource('route');

                    var _line_layer = map.queryRenderedFeatures(

                      { layers: ['lineString-line'] }

                      ); 
              console.log('_line_layer -> (((', _line_layer.length)
            }



            if (typeof map.getLayer('polygon-fill') !== 'undefined') {
                         var _polygon_layer = map.queryRenderedFeatures(

                        //  { layers: ['polygon-borders-line'] }
                           { layers: ['polygon-fill'] } 
                          );
                          console.log('_polygon_layer -> (((', _polygon_layer.length)
                        }  


           if (typeof map.getLayer('point-circle') !== 'undefined') {
                    var _point_layer = map.queryRenderedFeatures(

                              { layers: ['point-circle'] }

                              );



                    console.log('_point_layer -> (((', _point_layer.length)
           }




        }// if

      }); // map.on("sourcedata"

[ryanhamley]

If you believe there's a bug, can you please use JSBin to create a demo? That's much easier for us to evaluate than a code snippet. Thanks