Updating mapbox layer is causing a strange memory issue leading to flickering

[mbrownshoes]

Okay, I think I’ve got it. I found this post very helpful

Closure bug with map click handler

The cell that adds the load listener is running whenever the inputText changes, which is whenever you edit the text in the textarea. { map.on('load', () => map.on('click', evt => { console.log('clicked', inputText); }) ); } Each time it runs, it’s registering a new load event listener—in addition to all the previous ones. But since the map is already loaded, the new listener is never invoked, and so never registers another click event listener, and so only the first listener …

I made the updateLayer function an individual cell, and in another cell I put this:

{

  map.on("viewreset", updateLayer);
  map.on("move", updateLayer);
  map.on("moveend", updateLayer);
  invalidation.then(() => {
    map.off("viewreset", updateLayer);
    map.off("move", updateLayer);
    map.off("moveend", updateLayer);
  });
}

I had tried previously using map.off to remove the old listener but I only did it for mapend. I hadn’t realized that I needed to remove each of the viewreset, move and movened events.

Here is the updated notebook. Mapbox updates on zoom / Mathew Brown | Observable

Thanks @chrispahm and others for your help solving this problem! I was stumped!