mapbox-gl-js
mapbox-gl-js copied to clipboard
Map.queryRenderedFeatures should respect the right-hand rule
Map.queryRenderedFeatures returns polygons that don't follow the right-hand rule, which violates the GeoJSON standard:
3.1.6. Polygon
To specify a constraint specific to Polygons, it is useful to introduce the concept of a linear ring: […]
o A linear ring MUST follow the right-hand rule with respect to the area it bounds, i.e., exterior rings are counterclockwise, and holes are clockwise.
mapbox-gl-js version: v3.3.0
browser: Brave Browser 123.1.64.122
Steps to Trigger Behavior
- Create a map and run
map.queryRenderedFeatures
. - Zoom to at least level 15.
- The polygons don't follow the right-hand rule
Link to Demonstration
Tweak this example https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/ to also display the geometry:
const displayProperties = [
'type',
'properties',
'id',
'layer',
'source',
'sourceLayer',
'state',
'geometry'
];
The following coordinates are where I found the issue:
const map = new mapboxgl.Map({
…
zoom: 16.5,
center: [11.564643234014511, 48.139115086359055],
});
Then paste the resulting geojson in https://geojsonlint.com/
Expected Behavior
No lint errors, meaning the polygons respect the right-hand rule
Actual Behavior
There's an error, stating that the polygons don't respect the right-hand rule