World wraparound

[Garulfo]

Hello,

I'm starting to use your PixiOverlay and I'm wondering how you would manage efficiently the world wraparound. For instance in your example : https://manubb.github.io/Leaflet.PixiOverlay/many-markers.html if you move 360 degrees East or West to get 'another' Paris back in the viewport, markers are not there, the translation is not done... What solution would you suggest in your framework ?

Regards

[manubb]

Hello. Thanks for your interest. Sorry for the delay but i'm quite busy currently. Anyway, i have some ideas for solving this problem efficiently. I'll try to make a basic demo by a couple of week.

(Not 100% sure but using renderTexture may be worth investigating: https://pixijs.io/examples/#/demos/render-texture-demo.js)

[Garulfo]

Thank you, I'm looking forward to see what is your proposal :)

[manubb]

Hello @Garulfo Demo is not done yet but i made some (virtual) progress. My idea is to use a renderTexture to translate the base world as many time as needed just like in this example.

Here is a modified version showing how to copy first bunny group twice:

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

var container = new PIXI.Container();
app.stage.addChild(container);

var texture = PIXI.Texture.fromImage('examples/assets/bunny.png');

for (var i = 0; i < 25; i++) {
    var bunny = new PIXI.Sprite(texture);
    bunny.x = (i % 5) * 30;
    bunny.y = Math.floor(i / 5) * 30;
    bunny.rotation = Math.random() * (Math.PI * 2)
    container.addChild(bunny);
}

var brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1);
var rt = new PIXI.RenderTexture(brt);

var sprite = new PIXI.Sprite(rt);

sprite.x = 450;
sprite.y = 60;
app.stage.addChild(sprite);

// add a second copy:
var sprite2 = new PIXI.Sprite(rt);

sprite2.x = 150;
sprite2.y = 360;
app.stage.addChild(sprite2);
// second copy is added

/*
 * All the bunnies are added to the container with the addChild method
 * when you do this, all the bunnies become children of the container, and when a container moves,
 * so do all its children.
 * This gives you a lot of flexibility and makes it easier to position elements on the screen
 */
container.x = 100;
container.y = 60;

app.ticker.add(function() {
    app.renderer.render(container, rt);
});

The algorithm could be something like:

• if the viewport (including padding) is included in [-180.0, -85.06, 180.0, 85.06], just render the container.
• if it is not the case, render base world to a texture and add translated copies so that the viewport (including padding) is overlayed.

[sebastienvercammen]

Concerning Leaflet wraparound:

worldCopyJump: Boolean (default false): With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.

From the docs.

I'm not familiar with the rendering, but this may be of use.