Handling Events in Custom MapController

[tomrussell]

I'm trying to work with the MapController component to construct a DrawControl as described in #450 (comment), but using the updated API in v4

My simple controller looks like this:

class DrawController extends MapController {
  constructor({ enabled }) {
    super();
    this.enabled = enabled;
    this.events = ['click'];
  }
  
  handleEvent = (event) => {
    if (this.enabled) {
      if (event.type === 'click') {
        console.log('Clicked');
      }
    }
    return super.handleEvent(event);
  }
}

HandleEvent is called but the final line returns an error when returning to the parent handleEvent function

Uncaught TypeError: Cannot read property 'call' of undefined
    at DrawController._this.handleEvent (DrawController.js:16)
    at EventRegistrar._emit (event-registrar.js:115)
    at EventRegistrar.handleEvent (event-registrar.js:87)
    at Manager.emit (hammer.js:2525)
    at TapRecognizer.emit (hammer.js:2130)
    at TapRecognizer.tryEmit (hammer.js:1572)
    at TapRecognizer.<anonymous> (hammer.js:2109)
    at boundFn (hammer.js:197)

[Pessimistress]

Can you make sure that MapController is imported directly from react-map-gl? https://uber.github.io/react-map-gl/#/Documentation/introduction/upgrade-guide

[guisers]

I am having the same problem.

Seems that having an arrow function inside of a parent class does not allow children to use super when implementing the parent arrow function as an arrow function. On the other hand, implementing the parent arrow function as a function results in the child function not being called at all.

I think handleEvent must be changed to a function.

[tomrussell]

@guisers I had tried implementing handleEvent in my controller as a function instead, in doing so it was never called

[guisers]

Yes, what I mean is that the parent class MapController in react-map-gl needs this change. There doesn't appear to be anything we can do 😬

[Pessimistress]

Fix is published in 4.0.5