map.remove() won't work when DistortableImage layers exist

[jpoep]

Describe the bug: When you try to remove the entire Leaflet map using map.remove(), leaflet-distortableimage will throw an error if there is any distortable image on the map:

We have an SPA that leaves us unable to correctly unmount the map when the user navigates away from the page, so this is rather unfortunate :(

Reproduce the behavior: See this minimal JSFiddle: https://jsfiddle.net/bwcvaeyk/1/

Open your browser's console and wait for a second for the map to unmount (JSFiddle's console swallows the message). You should see the same error as above.

Browser, version, and operating system:

• Browser doesn't matter
• Version 0.21.9

[Mustafa-Hersi]

Have you found a workaround?

[Raphyyy]

Only workaround I could find is to catch map.remove() :

try {
    map.remove();
} catch (e) {}

[jpoep]

Only workaround I could find is to catch map.remove() :

try {
    map.remove();
} catch (e) {}

This won't properly unmount the map, though, because it cancels in the middle of the function. We did find a workaround, however. Sorry for not replying earlier!

/* eslint-disable @typescript-eslint/ban-ts-comment */
map.eachLayer(layer => {
  // @ts-ignore
  if (layer.editing) {
    // @ts-ignore
    const layers = layer.editing.currentHandle?._layers ?? {};
    // @ts-ignore
    Object.values(layers).forEach(layer => layer.remove());
    // @ts-ignore
    layer.editing.currentHandle = null;
  }
  layer.remove();
});
map.remove();
/* eslint-enable @typescript-eslint/ban-ts-comment */

Comments are obviously only useful if using TypeScript and/or ESLint :)