2nd queryRenderedFeatures request fails in a click event

[anvarik]

I am testing this on the latest standalone build

How to reproduce

1. Create a style with several layers on mapbox studio
2. with mapbox-gl-js create a click event, with a queryRenderedFeatures and a setFilter
3. Second click event fails: Cannot read property 'feature' of undefined

Here is a pseudo, note that myLayer is created in Mapbox Studio, if I create it with mapbox-gl-js error is not thrown. Also, first click event is successful and filter is set and features has value, however in the second click the code fails in queryRenderedFeatures function, don't even reach to the filter

map.on("click", function(e){
    var features = map.queryRenderedFeatures(e.point);
    map.setFilter("myLayer", ["==", "name", "name1"]);
});

[mourner]

Can you set up a JSFiddle with a minimal test case?

[anvarik]

@mourner here you go: https://jsfiddle.net/gyfsh02x/

I have created a new style by cloning Streets, then added a new layer called testlayer and used Vector Terrain V2 landcover as a source. When I run that code on my local, after 2nd click it fails.

Just copy the code on your local and try to run on a latest chrome.

[peterqliu]

after 2nd click it fails

@anvarik by map.setFilter("testlayer", ["==", "class", "scrub"]);, it looks like you're setting the test layer to class scrub on any click. After the first click, the map shouldn't register any difference. What you have here is the expected behavior.

[anvarik]

@peterqliu this is just dummy code, in my code I have dynamic filters. The problem is not at the filter, 2nd call to queryRenderedFeatures is causing the failure, it's not even reaching to the filter.

[jfirebaugh]

@anvarik So that JSFiddle doesn't demonstrate the issue you're reporting, right? There's no Cannot read property 'feature' of undefined error. Can you provide a JSFiddle that produces that error?

[anvarik]

@jfirebaugh - apologies, I forgot that I am working on a latest standalone build on my local, and on jsfiddle I added the cdn. Somehow couldn't manage to add the standalone js to fiddle, so created a plunker with the failure: http://plnkr.co/edit/JVx2Pj

not sure whether it would qualify as a bug though, since I build from the latest source, but still it is blocking me developing my app. I can't use v0.23.0 build since I need #3079 fix

[nate-at-niche]

I have the same problem, and here is a JSFiddle with a demonstration using v0.24.0. https://jsfiddle.net/aLbezahv/1/

Clicking a point sets a filter on the second layer. Works first time. Click another point and it fails and throws the feature_index.js:190 Uncaught TypeError: Cannot read property 'feature' of undefined error. Zooming in or out will allow it to work once again, but then it fails again on the second click.

Interestingly, this example code is a near duplication of the Highlight features under the mouse pointer example, which works just fine.

[mourner]

@nate-at-niche can you try the master version? This may have been fixed recently.

[nate-at-niche]

It does not work with the master version either.

Specific steps to reproduce:

1. map.queryRenderedFeatures([x,y], { layers: ['layer1'] }) > works
2. map.setFilter('layer2', ['==', 'name', 'value']) where layer2 uses the same source. It doesn't matter what value is.
3. map.queryRenderedFeatures([x,y], { layers: ['layer1'] }) > throws error

[YenTheFirst]

I'm also running in to this issue. It seems to only affect 'vector' sources.

Example code based on a GeoJSON source still works. (https://www.mapbox.com/mapbox-gl-js/example/hover-styles/). when modified to use a PBF source, the issue is encountered.

As far as I can tell, in the second query, the 'rawTileData' is null, while in the first one, it's not.

[nate-at-niche]

Here is another (much simpler) JSFiddle demonstrating it.

https://jsfiddle.net/61LLcow4/

To see error:

1. Move the map so one of the road shields is at the top left
2. Click "queryRenderedFeatures" button and see console result of returned feature
3. Click "setFilter"
4. Click "queryRenderedFeatures" button and see error

It's worth noting that the error does not occur if the query returns nothing. In my example, try moving the top left corner away from a shield and you will not see the error.

[YenTheFirst]

Additionally, the error is still present in version 0.23 (https://jsfiddle.net/2qob4zgh/3/)
but not version 0.22 (https://jsfiddle.net/oLvvwsLr/)

[lucaswoj]

Thank you for the test case @nate-at-niche. It was instrumental in diagnosing the bug.

Good news! This bug was fixed already fixed by #3233, which has merged into master and will 🚢 with the next release.