Multiple Overlays Issue

[vk207]

I need an urgent help regarding pixi Overlay. i am using two layers with some markers .. i only could select the markers of last layer. I would need to select both select layer's marker The html generated

[manubb]

If you want to use Pixi events for selection, the simplest solution is to use only one pixi-overlay instance. If you need to show/hide the layers, you can set the markers in two containers: greenMarkerContainer and brownMarkerContainer and add/remove those containers to/from the main pixi container. Please give me more precision if i misunderstand something.

[vk207]

I think u are correct. Let me check . do u have any link ?. Thanks Manuel for the quick reply 👍

[manubb]

Something like:

const pixiContainer = new PIXI.Container();
const greenMarkerContainer = new PIXI.Container();
const brownMarkerContainer = new PIXI.Container();
pixiContainer.addChild(greenMarkerContainer);
pixiContainer.addChild(brownMarkerContainer);
...
const pixiOverlay = L.pixiOverlay(function(utils) {
  const container = utils.getContainer();
  const renderer = utils.getRenderer();
  ...
  renderer.render(container);
}, pixiContainer);
pixiOverlay.addTo(map);

You can remove a layer with:

pixiContainer.removeChild(greenMarkerContainer);

See Pixi.doc.

[vk207]

Thanks Manuel 👍

[vk207]

Hai manuel, Could you please give me an explanation regarding how the green/brown MarkerContainer adding in the Overlay. because the parent layer is added in Layer and didn't used green/brown MarkerContainer nowhere else . In my application many types of markers are came based on the user. Eg :- if i select 2 users then map should show all customers under 2 users ... and if i select 3 more total 5 user's customers need to show.

In the above example , you just add the child container to the parent and parent container is adding to Layer. then how we know drawing which child container is active while drawing time?

[manubb]

In order to control visibility of pixiContainer children, you can either set visibility property on children or add/remove children from pixiContainer. See here for detailed documentation. After updating the scene, you can trigger a redraw of pixiOverlay layer with:

pixiOverlay._update();

Update: if you use leaflet-pixi-overlay>=1.3.0 prefer:

pixiOverlay.redraw();

[manubb]

I'm closing this issue. Reopen it if you need to but please provide detailed informations on your problem.

[vk207]

@manubb Hi , Still have the issue of Mouse events in multiple L.PixiLeafletOverlay in an application. i can click only one overlay layer . eg:- 1st Overlay has have some polygons . 2nd Overlay has some sprite markers . i can click only on sprite markers .

And i need to keep those are different overlays because to change the display order [z-index] based on the user cases.

Please help me to find a exact solution to propagate events through overlays. will be better if you have demo code of exact implementation.

Green points are sprite markers [ The red ones are clicked ], the below white is polygon

[manubb]

I think that the simplest solution is to draw everything in the same pixi overlay layer:

const pixiContainer = new PIXI.Container();
const markerContainer = new PIXI.Container();
const polygonContainer = new PIXI.Container();

// container children are drawn in their order of insertion: 
pixiContainer.addChild(polygonContainer);
pixiContainer.addChild(markerContainer);
// here the marker layer is over the polygon layer
...
const pixiOverlay = L.pixiOverlay(function(utils) {
  const container = utils.getContainer(); // this is pixiContainer
  const renderer = utils.getRenderer();
  ...
  // your drawing code is here
  // you have to fill/update the polygonContainer and the markerContainer
  ....
  // this renders the pixiContainer and all its children:
  renderer.render(container);
}, pixiContainer);
pixiOverlay.addTo(map);
...
// then you can change the drawing order:
pixiContainer.swapChildren(polygonContainer, markerContainer);
pixiContainer.redraw();

[vk207]

@manubb , Hi , Thank you, you are correct if it drawing both at a time . Here not in that situation. user need to add layers dynamically one by one when ever he needs and also remove layers .

My doubt regarding your code is const pixiContainer = new PIXI.Container();

pixiContainer.addChild(polygonContainer); pixiContainer.addChild(markerContainer);

Added those childs into parent pixi container thats OK.

But in the below code , you took the parent pixiContiner to draw

const pixiOverlay = L.pixiOverlay(function(utils) { const container = utils.getContainer(); // <- So it is markerContainer ??? const renderer = utils.getRenderer(); ... // your drawing code .... renderer.render(container); }, pixiContainer);<- mentioned parent Container . will it take the last pushed child container ?

By the by i checked with this code , it is not drawing in the childContainer it always on parent container.

The important scenario here is

user need to add layers dynamically one by one when ever he needs and also remove layers . So the _drawCallback function is also important to effect scaling map changes to each child container's graphics/sprites. How the _drawCallback function get to each container when we create only one layer and dynamically push child containers into parent container ? .

Please reply

[manubb]

I have updated my previous comment. The idea is to add/remove/move children of the pixiContainer depending on your needs. Then calling pixiOverlay.redraw() will redraw the complete scene.

[manubb]

I'm not sure i understand but you have to add your markers in the markerContainer and the polygons in the polygonContainer in the drawCallback function.