Mapbox-gl-js: Add a way to create a bounding box of a size around a point

[lucaswoj]

To make the queryRenderedFeatures hitbox for a feature larger, it is necessary to generate a bounding box around the cursor. We should add a utility method to make this easier.

Proposal 1

queryRenderedFeatures(LngLatBounds.createAroundPoint(event.point, 10, 10));

Proposal 2

queryRenderedFeatures(event.point, { width: 10, height: 10 }); // define a rectangle

Proposal 3

queryRenderedFeatures(event.point, { radius: 10 }); // define a circle

Proposal 4 (@1ec5 🚀)

queryRenderedFeatures(event.point.outset(10, 10)); // define a rectangle

cc @lyzidiamond @jfirebaugh @mourner

[lyzidiamond]

cc @ebendennis, the user who inspired this question!

[peterqliu]

queryRenderedFeatures(event.point, { width: 10 }); // like radius, but square

Would this be:

• a square of width 10 (so closer to a radius: 5 with the old featuresAt)? or
• a square of width 20 (closer to radius:10)? or
• a square where distance from cursor to each corner of the square is 10 (so width of 20/Math.pow(2,0.5))?

[1ec5]

Besides the ambiguity @peterqliu points out, I think it’s important to be able to make the dx and dy different, which option 3 wouldn’t allow for.

[lucaswoj]

@peterqliu @1ec5 Thanks for the feedback! I updated proposals above to be more clear.

[peterqliu]

I think using radius to describe any rectangle would be confusing. Proposal 2 is the least confusing to me ❤️

[jfirebaugh]

I think we should not add anything to the library. The code to do this is trivial: [[p.x - 5, p.y - 5], [p.x + 5, p.y + 5]].

[lucaswoj]

Let's point people towards the solution above for now ☝️.

[peterqliu]

Let's point people towards the solution above for now ☝️.

This is probably the best answer, but won't decrease the support load of people asking this in the future. Is there some proactive way to communicate this, or do we just keep responding when the questions come?

[jfirebaugh]

We can make an example. Like https://www.mapbox.com/mapbox-gl-js/example/using-box-queryrenderedfeatures/ except on click.

[musicformellons]

I needed this. Didn't dare to ask and found it pretty hard to find. Especially the 'best practice' that you do not work with an actual radius but with a box is good to know. A simpler example than the one mentioned would have been helpful for me.

[stevage]

Oh, I didn't know this was possible - but was hoping there was a way to improve the hit-testing on very narrow line features.

My suggestion: update existing examples like https://www.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/ to use a bounding box. It's probably a better method for people to use by default.