Polygons with events and change color about leaflet.pixioverlay

[manubb]

Hi.
First, i don't know if drawing millions polygons is possible. Please let me know if you succeed!

Second, in order to give you a precise answer, i need to know if you want to change color on click to show the focused polygon. If this is the case, maybe that you don't need to change the color of the polygon just like in this demo: when a polygon is clicked on, i draw another SVG Leaflet polygon with transparency over the focused polygon.

Anyway, the presidential election demos are a good starting point for your target. I can provide you a simplified demo with a minimal set of features: only polygons with no border and color change on click.
Tell me if you think this can help.

[vk207]

Hi Manual,
i think the idea of drawing with Leaflet polygon on selected item will make the browser crash if i select [multi selection] around 20k polygons.

Is there any possibilities to get the event on the Pixi.Polygon , i already checked with hit area.
I cant use rbush in our application..

[manubb]

You do not give me enough information to obtain a precise answer...

I do not think that you can click 20k times to select 20k polygons so:

• are polygons grouped in features so that a click on a polygon select the complete feature group?
• are you planning to use rectangular selection?
• something else?

The SVG trick can be implemented within the PixiOverlay layer by adding the selected polygons in a PIXI.Container by the way.

[vk207]

All polygons are in same pixiContainer .
var pixiContainer = new PIXI.Graphics();

in your example you used 2 types of polygon drawing used.

if Single Polygon then drawing with PIXI.Polygon(coords) and container.drawPolygon(drawing);

if Multipolygon then var drawing = new PIXI.Graphics(), lines & container.addChild(drawing);

in the case of multipolygon i can access the events on each polygon by
drawing.interactive = true;
drawing.buttonMode = true;
drawing.on('click', function (e) {
//////
});
and also i can change the color by updating dirty and cleardirty properties

My question is . how we can do the same thing for the in the single polygon by rawing with PIXI.Polygon(coords) and container.drawPolygon(drawing);

And we are using rectangle selection,circle selection, polygon selection on Leaflet

[manubb]

Have you tried:

pixiContainer.interactive = true;
pixiContainer.buttonMode = true;
pixiContainer.on('click', function (e) {
//////
});

?
(I do not know if you can easily find which polygon is clicked on with this.)
You can also add each simple polygon in the same way you add multipolygons.

Concerning selection, i do not know if it is easy to find which polygons intersect a rectangle, a circle or a polygon with PIXI. The straightforward way i can think of is using rbush with rectangular selection and use bounding boxes for circles and polygons. With this, you will get an overselection that can be filtered.