mapbox / mapbox/mapbox-gl-js

Map.queryRenderedFeatures should respect the right-hand rule

Open
#13,178 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged bug :lady_beetle:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Map.queryRenderedFeatures returns polygons that don't follow the right-hand rule, which violates the GeoJSON standard:

> [3.1.6](https://datatracker.ietf.org/doc/html/rfc7946#section-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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the queryRenderedFeatures demonstration and reproduce the issue at zoom 16.5 near the coordinates in the report. Inspect the returned geometry and compare it with RFC 7946 and geojsonlint.com; done means returned polygons follow the right-hand rule without lint errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.