mapbox / mapbox/mapbox-gl-js

Raster images with globe projection can't cross meridian

Open
#12,758 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

I could absolutely be missing something, but it looks to me like raster images on the globe projection can't cross the meridian line. I'm guessing this falls somewhere between a bug, feature request and docs. Thanks!

**mapbox-gl-js version**: 2.15.0

**browser**: Edge 114, also Firefox

### Steps to Trigger Behaviour
The example below is based on https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/

```javascript
mapboxgl.accessToken = 'pk.eyJ1IjoiYnVzaGZpcmVpbyIsImEiOiJjazU3NGwzNGEwM2QxM2VwcWJ0djk1amFyIn0.DP3giqn33iswMWzlclr9jg';
const map = new mapboxgl.Map({
container: 'map',
maxZoom: 25,
minZoom: 0,
zoom: 5,
center:[107.77284326486824, -64.76854027609433],
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/dark-v11',

/* projection: 'mercator' */
});

map.on('load', () => {
map.addSource('radar', {
'type': 'image',
'url': 'https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif',
'coordinates': [
[107.77284326486824, 33.43638644364984],
[239.67450280226097, 33.43638644364984],
[239.67450280226097, -64.76854027609433],
[107.77284326486824, -64.76854027609433]
]
});
map.addLayer({
id: 'radar-layer',
'type': 'raster',
'source': 'radar',
'paint': {
'raster-fade-duration': 0
}
});
});
```

### Link to Demonstration
https://jsfiddle.net/api/post/library/pure/#&togetherjs=vhIF4FNhF6

### Expected Behaviour
The raster displays correctly with a Mercator projection.

image

### Actual Behaviour
The raster is cut off with the globe projection.
image

Updated: Changed globe image so it's slightly more obvious.

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 report using the image-on-a-map example, supplied coordinates, and globe projection, then compare the result with Mercator. Start from the map.addSource image setup and trace how the raster is rendered across the meridian. Done means the raster displays fully under globe projection instead of being cut off.

Written by the indexing model from the issue text.

Assessment

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