control.onRemove isn't called when map.remove() is called

[callumacrae]

• I've looked at the documentation to make sure the behavior is documented and expected
• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

The issue

I am currently trying to track down a memory leak in my application. One potential place I've found is that control.onRemove isn't called when map.remove() is called.

https://leafletjs.com/reference-1.4.0.html#control

I'm doing stuff in control.onAdd that needs tearing down when the map is removed, but control.onRemove isn't called when map.remove() is called.

In order to help prevent memory leaks, it would be useful if control.onRemove were called when the map is removed.

Environment

• Leaflet version: 1.4.0
• Browser (with version): all
• OS/Platform (with version): all

Minimal example reproducing the issue

https://jsbin.com/qofetabumu/1/edit?html,js,output warning: resource intensive

the memory usage of the page goes up by about 50 MB a second, and because it's being used by an event listener that isn't removed, it can't be garbage collected.

this is a totally unrealistic example but my actual case is super complicated and i'm not sure how to simplify it

• this example is as simple as possible
• this example does not rely on any third party code

---

I'd be willing to have a crack at fixing this but would need pointing in the right direction as I haven't contributed to leaflet before :)

[IvanSanchez]

That's a good point - destroying the map removes the control corners (and therefore the DOM elements from any controls) from the DOM, but doesn't tear down the controls. Noticing that the teardown code from the controls is not running is a nice catch!!

@callumacrae Please see #6488 - it should do a better cleanup of the controls, but it needs testing - could you please have a look at that?