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);
})
  • I found the same bug, return array length are always 0, [] empty array – hoogw Jun 7 '19 at 16:25
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

| improve this answer | |
  • Is there a way to retrieve all data although these are clustered? – the_chimp Feb 21 '19 at 15:07
-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"
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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