mapbox / mapbox/mapbox-gl-js

Raster layers crossing antimeridian are incorrectly transformed on non-mercator projections

Open
#11,218 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

**mapbox-gl-js version**: 3216f1ce2ed8acabb661caa498d6068acf5ec0b9 and v2.6.0-beta.1

**browser**: google chrome 95.0.4638.54, safari 15.1, firefox 93

### Steps to Trigger Behavior

1. Enable any non-mercator projection
2. Add raster layer, e.g. [this time zone chart of the world in mercator](https://tile.loc.gov/image-services/iiif/service:gdc:gdcwdl:wd:l_:06:77:6:wdl_06776:am007837/full/pct:25/0/default.jpg) (note that is's crossing antimeridian)

```js
map.addLayer({
'id': 'mercator',
'type': 'raster',
'source': {
type: 'image',
url: 'https://tile.loc.gov/image-services/iiif/service:gdc:gdcwdl:wd:l_:06:77:6:wdl_06776:am007837/full/pct:25/0/default.jpg',
coordinates: [
[-257, 81.3],
[175, 81.3],
[175, -74],
[-257, -74]
]
},
paint: {
'raster-opacity': 0.2,
}
});
```

### Link to Demonstration

https://jsbin.com/metanol/edit?js,output

### Expected Behavior

The image is transformed on the map according to the coordinates.

#### Mercator

Screenshot 2021-11-04 at 12 54 46

### Actual Behavior

The image is not transformed as with Mercator projection

#### Equal Earth

Screenshot 2021-11-04 at 13 15 16

#### Equirectangular

Screenshot 2021-11-04 at 13 16 58

#### Albers
Screenshot 2021-11-04 at 12 54 03

#### Lambert Conformal Conic

Screenshot 2021-11-04 at 12 54 27

https://user-images.githubusercontent.com/533564/140303679-2b7c1f09-1ca8-41b4-831b-b9b79eecc792.mov

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

Reproduce the issue with the linked JSBin example, using the supplied raster image and non-mercator projections. Trace how raster layers crossing the antimeridian are transformed, then verify that the image follows its coordinates consistently across the affected projections.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, frontend
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.