Image source is clipped to -180,180 when terrain is enabled.

[Hooterr]

maplibre-gl-js version: 4.2.0

browser: chrome (not important)

Steps to Trigger Behavior

1. Add a style with terrain
2. Add an image source that's outside -180,180 longitude
3. Enable terrain

Link to Demonstration

https://jsbin.com/fiyisil/edit?html,output

const urlWms = "https://placehold.co/600x600/png";
const sourceName = "sourceName";
const wmsLayerName = "wms";
const imageCoordinates = [
    [-20, 60],
    [300, 60],
    [300, -60],
    [-20, -60]
];

map.addSource(sourceName, {
        'type': 'image',
        'url': urlWms,
        'coordinates': imageCoordinates
    });

map.addLayer({
    'id': wmsLayerName,
    'type': 'raster',
    'source': sourceName,
    "paint": {
        'raster-opacity': 0.33,
        'raster-fade-duration': 0
    }
});

Terrain on

Terrain off

Expected Behavior

Image wraps correctly when terrain is enabled.

Actual Behavior

Image seems to be clipped to -180,180 longitude Also the opacity seems to be changing when terrain is enabled/disabled

[HarelM]

Is it possible that this is a duplicate of:

• #1559

[Hooterr]

Similar but different. I don't see problems with latitude. In the mentioned issue the problem seems to be with any combination of lat/lng, here the problem seems to be related to some sort of normalizing/clipping to a fixed range of -180,180. Could be the same root cause though.

[Panthro22]

@Hooterr When the terrain is enabled, it is clipped to a specific tile. The image corner coordinates are then converted to that local tile's coordinate system so it will not go past the Tile edge as it is being cut off to fit that tile, even if it's near the border. If you zoom in to a street-level view, would the image disappear partially or entirely for you? I am asking as there is an issue of zooming in for an image's set near tile z-level of 1.

[Hooterr]

The image stays partially visible no matter what the zoom level is.

[nbald]

Same here, both on FF and Chrome

My company would be happy to offer a $200 bounty for fixing this issue

No terrain: ç

Terrain:

[nbald]

@wipfli could you please add a bounty label on this issue? My company gives a bounty of $200 USD for fixing this

[HarelM]

I've added a bounty label, It might be that solving #1559 will solve this issue as well, so there's a change for extra bounty for anyone that is interested. Note that this issue's bounty will be paid by @nbald's company and not MapLibre. CC: @ibesora, @sbachinin @neodescis @olsen232 - if any of you is interested in solving this.

[kleenkanteen]

@HarelM I'm interested in taking this on

[HarelM]

Great! I've signed this to you.

[sbachinin]

Hard to understand what this issue is about. Originally it's about clipping to one globe. But the bounty is offered to fix the last example which is clipping to something else. Two problems are not necessarily the same. I think we should decide what is actually being fixed here

[HarelM]

To clarify: the 200$ bounty is on the problem @nbald is presenting in his post as his company will pay this bounty. The other bounty, paid by maplibre, is on the linked issue and not this issue. I only added the bounty tag here to indicate there's a bounty as per @nbald request. I hope this is clearer now. I might be that all these issues are the same root cause, but it might also not be the case.

[sbachinin]

I also doubt that the bounty problem is sufficiently described. Now there is only a screenshot and I think codepen would be great. @kleenkanteen, can you reproduce the bug?

[nbald]

Here is my issue: https://jsbin.com/cahomamazu/edit?html,output (same code as @Hooterr's, but with different coordinates)

        const imageCoordinates = [
            [-12, 55.4],
                [16, 55.4],
                [16, 37.5],
                [-12, 37.5]
        ];

Clipping occurs at longitude 0. Come to think of it, it may have more to do with #1559 than this issue.

Anyway. I will offer the $200 bounty for fixing any of #4088 or #1559 or my code.