There is way to add a interactive polygon and a marker in the same PIXI Conteiner?

[joaoVictorBAlves]

I am trying to use this library in my React JS project: my repository I am using the marker drawing code and a modified version of the triangle drawing to draw the GeoJSON polygons. Both are being applied on the same map and in different containers. So I am using the click interaction with the ".on("click", function())" method of Pixi.js. However, having two different containers, the marker container overlaps the polygon container, preventing interaction with the polygons.

this is my project i'd want to click in the polygons and show me a message but that's not work and i test and it is happend because i use two containers and one is under the other.

I saw in this repo there is anyone example that use the markers and the polygons together, so:

There is a way to use both in the same time and in the same container?

[nebsar]

Hi. Did you find a solution for this?

[joaoVictorBAlves]

Yes i did, you can see with in my repository leaflet-pixi-overlay that i can use the both

[nebsar]

I am trying to show thousands of markers with different images. And trying to use leaflet-draw plugin to draw shapes using mouse dynamically. But the shapes overlaps the markers in pixi container of pixioverlay. I found a way to put the pixioverlay in front of shapes. But this time when the icons overlap the shapes drawn with leaflet-draw and I cannot edit the shapes. Did you run into this issue? If so, did you solve this? I am not familiar with react. Would you please tell me how you solved your problem?

[joaoVictorBAlves]

Hi, my code can be too complex for you to analyze, so I'll give you the code that I used as a basis(manuBB) to have polygons and markers in the same container and both interactive! Manubb demo Basic Demo

Logic:

So it's basically you create a container of pixijs, and create elements like polygons or markers. It is necessary that you activate the interactivity of your elements and add them inside the container. Finally, you must define the interactivity of the container itself! That's the logic! The way to do it is in Manubb's code!

Obs.:

remember that the issues involving the 'leaflet' are just the map and the integrations with the map, who really makes the drawing overlay is pixijs! Please focus on understanding it

[nebsar]

Thank you. I think the below code block does the trick.

const boundary = new PIXI.EventBoundary(container); utils.getMap().on('click', (e) => { // not really nice but much better than before // good starting point for improvements const interaction = utils.getRenderer().events; const pointerEvent = e.originalEvent; const pixiPoint = new PIXI.Point(); // get global click position in pixiPoint: interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY); // get what is below the click if any: const target = boundary.hitTest(pixiPoint.x, pixiPoint.y); if (target && target.popup) { target.popup.openOn(map); } });