Wrong geometry with mapbox queryRenderedFeatures

Question

I am trying to get the geometry of the polygon with queryRenderedFeatures On zoom level 12 is ok, but on 15 I got the wrong geomentry. Here is my code, and I everytime on mouse over I get the different coordinates. Here https://codepen.io/benderlidze/pen/qPXNJv - hover the mouse from the top on the poly and from the bottom. The red poly is a geometry returned by queryRenderedFeatures and it is always different.

 map.on("mousemove", "seatRowsFill", function(e) {

    map.getCanvas().style.cursor = 'pointer'; 
    map.setFilter("seatRowsFill-hover", ["==", "rowNumber", e.features[0].properties.rowNumber]);

    var relatedFeatures = map.queryRenderedFeatures(e.point, { layers: ['seatRowsFill'],"filter": ["==", "rowNumber", e.features[0].properties.rowNumber]  } )
    console.log(relatedFeatures["0"].geometry.coordinates["0"][2])

Steve Bennett Steve Bennett · Accepted Answer · 2017-10-03T23:03:03

At zoom 15, the geometry crosses a tile boundary. You can see this by adding map.showTileBoundaries = true: https://codepen.io/stevebennett/pen/XezJNB

From the documentation for queryRenderedFeatures():

Because features come from tiled vector data or GeoJSON data that is converted to tiles internally, feature geometries may be split or duplicated across tile boundaries and, as a result, features may appear multiple times in query results. For example, suppose there is a highway running through the bounding rectangle of a query. The results of the query will be those parts of the highway that lie within the map tiles covering the bounding rectangle, even if the highway extends into other tiles, and the portion of the highway within each map tile will be returned as a separate feature. Similarly, a point feature near a tile boundary may appear in multiple tiles due to tile buffering.

Instead of retrieving the geometry and then displaying that, it's usually better to have a separate layer which is just used for highlighting, then update the filter on that layer to match some property.

So, if you update the highlight layer's filter to be ['==', id, 500], then all the different pieces of that polygon will display correctly.

See the "Create a hover effect" example.

Wrong geometry with mapbox queryRenderedFeatures

1 Answers