Map events are executed several times

#1

Hi guys, I’m exploring ChartFactor, and I’m working on a web application in which I have the ChartFactor Toolkit integrated. In one of the interfaces I have a map created.

When starting the map I am calling a function that is responsible for creating 2 subscriptions to the mapzoom and mapmove events of the map. This is my function:

addMapEvents() {
   this.map.on('mapzoom', function (e) {
      //...
   });
   this.map.on('mapmove', function (e) {
      //...
   });
}

The problem is that the logic inside each listener is being executed multiple times generating undesirable behavior. Any suggestion about it?

#2

Hi @firedevops, most likely this is happening because for some reason the function addMapEvents is being called several times. So, in order to fix that you need to keep a reference to each listener that you attach to the map, to be able to call the off method to unregister them.

Your code should be something like the following:

mapZoomHander(e) {
    //...
}

mapMoveHander(e) {
    //...
}

addMapEvents() {
    if (this.map.get('events').some(e => e.callback.name.includes('mapZoomHander'))) {
        this.map.off('mapzoom', this.mapZoomHander);
    }
    this.map.on('mapzoom', this.mapZoomHander);

    if (this.map.get('events').some(e => e.callback.name.includes('mapMoveHander'))) {
        this.map.off('mapmove', this.mapMoveHander);
    }
    this.map.on('mapmove', this.mapMoveHander);
 }

Let me know if that fixed your problem.

#3

Hi Juan, thank you very much, that worked wonders, I’ll keep it in mind for the next one.