Custom layer with renderWorldCopies

[tangzijun]

Question
How to implement renderWorldCopies in a custom layer? This is not implemented in the official examples. Does anyone have any ideas for implementation?

Links to related documentation
https://maplibre.org/maplibre-gl-js/docs/examples/custom-style-layer/

[HarelM]

Can you elaborate what problem you are trying to solve? Or what limitation did you find?
Unfortunately, I couldn't understand from the above description...
Also, try one of the AI tools, maybe they can help, I use them a lot 😃

[tangzijun]

In this official example, custom layers are not rendered in multiple world copies.

https://maplibre.org/maplibre-gl-js/docs/examples/custom-style-layer/

Can you elaborate what problem you are trying to solve? Or what limitation did you find? Unfortunately, I couldn't understand from the above description... Also, try one of the AI tools, maybe they can help, I use them a lot 😃

[tangzijun]

The layers that come with the framework, such as the image layer, will render multiple copies in the world copy. How can I achieve this in a custom layer?

[HarelM]

In order to solve this I added 2 more buffers with coordinates that are unwrapped (+360, -360 longitude) and drew them as well.
I'm not sure this is the optimal solution, but custom layer is basically how you decide to draw on the canvas given the relevant input.

[tangzijun]

I think I solved this problem，There are 3 steps to solve this problem

1. Get the offset of the world copy

private getWorldOffsets() {
  const bounds = this.map.getBounds();
  const west = bounds.getWest();
  const east = bounds.getEast();

  const x1 = 0 - Math.ceil((Math.abs(west) - 180) / 360);
  const x2 = Math.ceil((Math.abs(east) - 180) / 360);

  const worldOffsets = [];
  for (let i = x1; i <= x2; i++) {
    worldOffsets.push(i);
  }
  return worldOffsets;
}

This will get an array worldOffsets: […,-1,0,1…]

2. Cycle Rendering

worldOffsets.forEach(offset => {
     //Start rendering and add the offset to the shader variable: u_worldXOffset
  });

3. Implementing the offset in the shader

#version 300 es

in vec4 position;
in vec2 texcoord;
uniform mat4 u_matrix;
uniform float u_worldXOffset;

void main() {
    gl_Position = u_matrix * (position + vec4(u_worldXOffset , 0.0 , 0.0 , 0.0));
…
}

[carderne]

There was an issue at the Mapbox repo about this here:
mapbox/mapbox-gl-js#9759

Possibly helpful.