Click event on "million marker" example

[mirko77]

It would be great if the million marker example had a way to add a click event to each marker.

I tried to implement it myself looking at the other examples but no luck so far.

[FatehAK]

Is this available?

[dnasir]

You could attach a click event to the Pixi container, and the clicked marker should be the event target.

const container = new Container();

container.on('click', e => console.log(e.target)); // e.target should be the marker you just clicked on.

[soletan]

@dnasir Doesn't work as expected.

this.container = new PIXI.Container();
this.mapLayer = Leaflet.pixiOverlay(this.pixiRender.bind(this), this.container);

this.attachLayer.emit({layer: this.mapLayer});

[
      'click',
      'mousedown',
      // 'mousemove',
      // 'mouseout',
      // 'mouseover',
      'mouseup',
      'mouseupoutside',
      'pointercancel',
      'pointerdown',
      // 'pointermove',
      // 'pointerout',
      // 'pointerover',
      'pointertap',
      'pointerup',
      'pointerupoutside',
      'rightclick',
      'rightdown',
      'rightup',
      'rightupoutside',
      'tap',
      'touchcancel',
      'touchend',
      'touchendoutside',
      'touchmove',
      'touchstart',
].forEach( name => this.container.on( name, event => { console.log( name, event ); } ) );

There are Sprite-instances added to the container. There is no console output when attaching event listeners as demonstrated here. However, if I apply those listeners to every added sprite console is logging events.

UPDATE: For there haven't been any events even targeting at the container itself, I realized its need to be marked interactive explicitly:

this.container = new PIXI.Container();
this.container.interactive = true;

[kamilcglr]

Is it normal that when I create more than 1000 markers with a popup it becomes very slow and to make the web browser freeze?