mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

Map.queryRenderedFeatures should respect the right-hand rule

Open TheMC47 opened this issue 1 month ago • 0 comments

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

  1. Create a map and run map.queryRenderedFeatures.
  2. Zoom to at least level 15.
  3. 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

TheMC47 avatar May 16 '24 12:05 TheMC47