fix image source at lower zoom levels with non-mercator projections
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
Image (and Canvas, Video) sources don't work with non-mercator projections at lower zoom levels. It correctly places the corners, but if the projection of the image doesn't match the projection of the map, it gets interpolated incorrectly. We need to use a mesh similar to the one we use for raster tiles.
This problem does not exist at higher zooms where the map is unskewed and conformal.
mapbox-gl-js version: main v2.6.0
browser: all
Steps to Trigger Behavior
- open http://localhost:9966/debug/10186.html#9.06/43.3772/-76.7646
map.setProjection('albers')- compare to same location without albers
Link to Demonstration
http://localhost:9966/debug/10186.html#9.06/43.3772/-76.7646
Expected Behavior

Actual Behavior

Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the debug/10186.html reproduction and compare the image source at lower zoom with the Albers projection enabled. Read the raster tile mesh implementation and the image, Canvas, and Video source rendering paths to understand the existing interpolation. Done means these sources render without distortion for non-Mercator projections at lower zoom levels while preserving the existing higher-zoom behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- 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