Why doesn't the OpenLayers SVG example wrap?

Question

I am looking at the OpenLayers SVG example located at:

https://openlayers.org/en/latest/examples/svg-layer.html

and have two questions.

1. Why does it not wrap horizontally?
2. What would it take so it could wrap horizontally?

Answer 1

To make it wrap you will need to

1 - Remove the extent constraint from the view

  view: new View({
    center: [0, 0],
    //extent: [-180, -90, 180, 90],
    projection: 'EPSG:4326',
    zoom: 2,
  }),

2 - Add a second copy of the SVG to the container

xhr.addEventListener('load', function () {
  const svg = xhr.responseXML.documentElement;
  svgContainer.ownerDocument.importNode(svg);
  svgContainer.appendChild(svg);
  svgContainer.appendChild(svg.cloneNode(true));
});

3 - Double the width of the container and change the resolution calculation to match

const width = 2560 * 2;
const height = 1280;
const svgResolution = (360 * 2) / width;

4 - Ensure the center longitude used for rendering is offset 180 degrees and is between -180 and +180

  const center = toLonLat(
    [frameState.viewState.center[0] + 180, frameState.viewState.center[1]],
    frameState.viewState.projection
  );

https://codesandbox.io/s/svg-layer-forked-e3ijd0?file=/main.js