4

I'm using Mapbox to create webmapping, I want to get GeoJSON Features. I tried map.queryRenderedFeatures but it returns array empty. there are my code:

map.on('load', function(e) {
map.addSource("places", {
    "type": "geojson",
    "data": "data/polygon.geojson"
});

map.addLayer({
    "id": "Surfaces",
    "type": "fill",
    "source": "places",
    "sources-layer": "layer",
    "layout": {},
    "paint": {
        "fill-color": "#088",
        "fill-opacity": 0.8
    }
});

var feature = map.queryRenderedFeatures({ layers: ['Surfaces'] });
console.log(feature);
})
1
  • I found the same bug, return array length are always 0, [] empty array
    – hoogw
    Commented Jun 7, 2019 at 16:25

2 Answers 2

6

You can use querySourceFeatures which return all geojson features within a layer if no filter is applied.

var features = map.querySourceFeatures('your_layer_id');

https://www.mapbox.com/mapbox-gl-js/api/#map#querysourcefeatures

But you may check first that the layer is fully loaded, or you will get an empty array.

map.on("sourcedata", function(e) {
    if (map.getSource('your_layer_id') && map.isSourceLoaded('your_layer_id')) {
        console.log('source loaded!');
        var features = map.querySourceFeatures('your_layer_id');
        console.log(features);
    }
});

Source about the event: Mapbox GL JS - "Source Loaded" event

3
  • Is there a way to retrieve all data although these are clustered?
    – the_chimp
    Commented Feb 21, 2019 at 15:07
  • 1
    This only returns the source features within the viewport boundaries : this function does not check tiles outside the currently visible viewport.. How can we get ALL the source features ?
    – gordie
    Commented Apr 28, 2022 at 9:38
  • Problem also is, this returns the internal mapboxGL representation featuring a _geometry attribute instead of a geometry, including attributes not present in the geoJson standard, such as _vectorTileFeature Commented Jun 9, 2023 at 15:43
-1

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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.