CODEWITHSUNDEEP
mapbox-gl-js
bramb84
bramb84

Reputation: 375

MapboxGL: querying rendered features after multiple geocodes

Situation: I have a working site where upon entering an address, MapboxGL marks a point on the map and queries a polygon layer (queryRenderedFeatures) and displays the polygon feature containing the point.

This works; however, if I then want to geocode a second address that changes the map view, it fails the second time because map.queryRenderedFeatures returns an empty array.

var userDistrictsGeoJson;

map.on('load', function() {
  //add layers from Mapbox account
  addLayers(); //details left out of example, but this works.
  // Listen for geocoding result
  // This works the first time through, but fails if the user searchs for a second address because queryRenderedFeatures is working with a smaller set of features
  geocoder.on('result', function(e) {
    //need to clear geojson layer and 
    userDistrictsGeoJson = {
        "type": "FeatureCollection",
        "features": []
    };

    map.getSource('single-point').setData(e.result.geometry);
    //project to use (pixel xy coordinates instead of lat/lon for WebGL)
    var point = map.project([e.result.center[0], e.result.center[1]]);  

    var features = map.queryRenderedFeatures(point, { layers: ['congress-old'] });

    var filter = featuresOld.reduce(function(memo, feature){
      // console.log(feature.properties);
      memo.push(feature.properties.GEOID);
      return memo;
    }, ['in', 'GEOID']);

    map.setFilter('user-congress-old', filter);

    var userCongressOldGeoJson = map.querySourceFeatures('congressional-districts', {
      sourceLayer: 'congress_old',
      filter: map.getFilter('user-congress-old')
    });

    userDistrictsGeoJson.features.push(userCongressOldGeoJson[0]);

    var bbox = turf.bbox(userDistrictsGeoJson);
    var bounds = [[bbox[0], bbox[1]], [bbox[2], bbox[3]]];

    map.fitBounds(bounds, {
      padding: 40
    });

  }); //geocoder result
}); //map load

So like I said, everything that runs on the geocodes 'result' event works the first time through, but it seems that on the second time through (user searches new address, but doesn't reload map) queryRenderedFeatures returns a smaller subset of features that doesn't include the tiles where the geocoder lands.

Any suggestions are much appreciated.

Upvotes: 4

Views: 1442

Answers (1)

bramb84
bramb84

Reputation: 375

I ended up solving this by triggering the querying code once on 'moveend' event.

So now the syntax is:

geocoder.on('result', function(e){
    map.once('moveend', function(){
        .... rest of code
    }
}

I thought I had tried this before posting the question, but seems to be working for me now.

Upvotes: 3

Related Questions