Mouse events not working right on circle layers with sub-properties

[rbrundritt]

mapbox-gl-js version: v1.9.0

browser: Chrome

Steps to Trigger Behavior

1. Create a GeoJSON point feature that has sub-properties of properties (f.properties.subProperty)
2. Create a circle layer with an expression that uses the sub-property for the radius.
3. Add mouse enter/leave events that change the mouse cursor.
4. Hover over the circle. You will find that the mouse events only work when really close to the center of the circle.

Link to Demonstration

https://jsbin.com/zahogipeqo/edit?html,output

Expected Behavior

Mouse events should work as soon as the mouse hits the edge of the circle.

Actual Behavior

The mouse events only work when really close to the center of the circle.

Additional information

I initially noticed this when using a a linear expression, but after simplifying this to simplifying grabbing the sub-property value and using it for the radius, I saw the same issue.

[abhinavkumar985]

I am also facing the same issue and stuck after the implementation. Any update ?

[sg-code]

I am experiencing the same issue.

I suspect this has to do with Mapbox GL rendering nested properties as strings, rather than JSON objects. It appears that even though the circle will render to the canvas with the expected circle-radius (using a nested ["get"] expression), it does not transfer that information to the feature's event handler. Instead, the default circle-radius property is used (5px).

This information can be obtained by creating a map.on('click', ... event handler which sends the feature's layer object to the console.

map.on('click', 'layer-id', function(e) {
   console.log(e.features[0].layer.paint);
}

This bug appears to apply to any "paint" properties using nested ["get"] expressions.

It would be a great benefit to take advantage of nested properties, so I hope this issue can be sorted out fairly easily.

[jjgarrett0]

I would like to see a solution for this as well. I am also experiencing this issue.

[mikejcorey]

This is affecting me as well. I am able to somewhat get around it by putting a bigger, nearly transparent clickable circle layer behind the visible marker, but it's definitely not ideal as the radius of that invisible layer is sometimes overlapping with neighbors in order to have a fair chance of getting hit. This affects both on('click') and queryRenderedFeatures interactions.

[mikejcorey]

A user helpfully pointed out that the clickable area of circles seems to have a right-side bias. E.G., you can't click on the left side of circles, but you can on the right side. Maybe something wrong about the center/radius/origin math?

[AliFlux]

Any solution for this yet?