queryRenderedFeatures returns nothing for point-in-polygon queries, if polygon type is set to 'Line'

[timiyay]

mapbox-gl-js version: 0.16.0

Steps to Trigger Behavior

1. create a MapboxGL style containing a polygon source, which is set to type Line in Mapbox Studio
2. use queryRenderedFeatures with map.on('mousemove') to query for the polygon underneath the cursor

Expected Behavior

The function returns the polygon that intersects the cursor point - this is the behaviour that v0.15.0 featuresAt exhibited.

Actual Behavior

1. if the cursor is inside the polygon, the functions returns an empty features array
2. if the cursor is on the polygon edge, the function returns an array of features that share that edge

Background

Our app is being forced to mapbox-gl-js 0.16.0 (see #2300 (comment)), and we're working through the breaking changes since 0.15.0.

We have a large polygon vector tileset, for land parcels. For styling purposes, we set the layer to type: Line in MB Studio. We need this to control line thickness, which type: Fill doesn't allow (it's locked to 1px).

A small feature of our app is to change the mouse cursor to pointer when it hovers over a land parcel, to demonstrate that the feature is clickable. In 0.15.0, we did this with the following code:

map.on('mousemove', function(e) {
  map.featuresAt(e.point, { layer: 'parcels' }, function(err, features) {
    map.getCanvas().style.cursor = features.length ? 'pointer' : '';
  });
});

This worked as expected, as demonstrated in this Codepen: http://codepen.io/timiyay/pen/qZVMMo.

To upgrade to 0.16.0, we started by changing the code to:

map.on('mousemove', function(e) {
  var features = map.queryRenderedFeatures(e.point, { layers: ['parcels'] });
  map.getCanvas().style.cursor = features.length ? 'pointer' : '';
});

This doesn't work, as explained in Actual Behaviour, and demonstrated in this Codepen: http://codepen.io/timiyay/pen/WwXgPQ.

However, if I use Mapbox Studio to change the layer to type: Fill, the code works as expected, as shown in this Codepen: http://codepen.io/timiyay/pen/wGPEEw.

[mourner]

The actual behavior kind of makes sense, because queryRenderedFeatures implies returning rendered features under the cursor, and in your case it's rendered as line and not polygon. Not even sure how to address this in the core... @ansis thoughts?

[timiyay]

@mourner thanks for the reply.

I can definitely see your point, and perhaps queryRenderedFeatures has evolved to be different from featuresAt, rather than a direct replacement.

I will be looking closer at querySourceFeatures, though that appears to be for attribute filtering, not spatial querying. There's no way I see to input the cursor point (https://www.mapbox.com/mapbox-gl-js/api/#Map.querySourceFeatures).

If we get stuck, I'll likely switch the type: Fill, and live without control over the line thickness.

Interested in alternative approaches, for sure.

[jfirebaugh]

The recommended way to render both a stroke with configurable width and a fill is to have two layers: one Line layer and one Fill layer. Both will reference the same data.

mapbox/mapbox-gl-style-spec#223 tracks adding a combined layer type that can support both in a single layer.

[ansis]

You can work around this by creating a second parcels style layer that has type: fill and fill-opacity: 0.

[timiyay]

Beautiful, thanks folks.

Will add the workaround, and track the issue.

Cheers.

[mourner]

@ansis it will still spend time triangulating the layer and filling triangle buffers even if the opacity is 0, right?

[ansis]

@mourner yes, it will, but it shouldn't be a huge cost compared to the total cost of loading all layers