I'm using the mousemove event listener in mapbox to be able to drag a point around the map. However, when I'm calling .off() on it, it isn't disabling. I'm doing this in Angular with Typescript.
Original Call:
this.map.mapInstance.on('mousemove', this.onPointMove.bind(this));
this.map.mapInstance.once('mouseup', this.onPointUp.bind(this));
onPointMove(e):
const coords = e.lngLat;
this.map.mapInstance.getCanvasContainer().style.cursor = 'grabbing';
console.log(coords);
onPointUp(e):
this.map.mapInstance.getCanvasContainer().style.cursor = '';
this.map.mapInstance.off('mousemove', this.onPointMove.bind(this));
After I finish dragging, the console.log still gets outputted when I move my mouse around.
Your problem is you need to pass the exact same function to off, not a new function which does the same thing.
const mousemove = this.onPointMove.bind(this);
this.map.mapInstance.on('mousemove', mousemove);
// ...
this.map.mapInstance.off('mousemove', mousemove);