Removing events map.on("click"...) from mapbox gl?

Question

I remove the layers with map.removeLayer("clusters"); but got this error

evented.js:111 The layer 'clusters' does not exist in the map's style and cannot be queried for features.

as I have map.on('click', 'clusters', function (e) { ... event. So how to remove this?

Answer 1

First split out the click function so it can be referenced on it's own:

function onClick(e) {...}

Then register your on click with:

map.on('click', 'clusters', onClick);

Then just before you removeLayer, remove the event listener with

map.off('click', 'clusters', onClick);

See also https://www.mapbox.com/mapbox-gl-js/api/#map#off.

Answer 2

I have done it in React. I was trying something similar and come accross this thread. So in my case I wanted to remove an on click listener which would add some custom markers. Here is how I did it (for testing):

Attributes in File

const map = useRef(null);

map.current.on('click', (event) => addMarkerOnClick(event));
setTimeout(() => {
  console.log("Disabled")
  map.current.off('click', (event) => addMarkerOnClick(event));
}, 5000)

The above was how I had my code initially, it WONT work.

    map.current.on('click', addMarkerOnClick);
    setTimeout(() => {
      console.log("Disabled")
      map.current.off('click', addMarkerOnClick);
    }, 5000)

That's the solution.

For none React users, I suggest this:

// Attributes
let map = null

    map.on('click', addMarkerOnClick);
    setTimeout(() => {
      console.log("Disabled")
      map.off('click', addMarkerOnClick);
    }, 5000)