Unmount the canvas-in-layer root when the map is removed

.changeset/unmount-root-on-map-remove.md

@@ -0,0 +1,5 @@
+---
+"react-three-map": patch
+---
+
+Unmount the `<Canvas overlay={false}>` root when the map is removed, so it no longer leaks after the whole map unmounts.

src/core/canvas-in-layer/use-canvas-in-layer.tsx

@@ -13,13 +13,14 @@ export function useCanvasInLayer(props: CanvasProps,fromLngLat: FromLngLat, map:
       latitude, longitude, altitude, fromLngLat,
     });
 
-    const { onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);
+    const { onAdd, onRemove, useThree, r3m } = useRoot(fromLngLat, map, props);
 
     const render = useRender({origin, frameloop, useThree, map, r3m});
 
     return {
       id: props.id,
       beforeId: props.beforeId,
+      onAdd,
       onRemove,
       render,
       type: 'custom',

src/core/canvas-in-layer/use-root.tsx

@@ -80,7 +80,13 @@ export function useRoot(
 
   })
 
+  // map.remove() does not call the layer onRemove
+  const onAdd = useFunction(() => {
+    map.on('remove', onRemove);
+  })
+
   const onRemove = useFunction(() => {
+    map.off('remove', onRemove);
     root.unmount();
   })
 
@@ -117,5 +123,5 @@ export function useRoot(
     </>);
   }, [props.children]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  return { onRemove, useThree, r3m };
+  return { onAdd, onRemove, useThree, r3m };
 }

src/core/generic-map.ts

@@ -49,6 +49,7 @@ export interface MapInstance {
 /** Generic interface of Mapbox/Maplibre `MapEventType` */
 export type MapEventType = {
 	resize: MapEvent;
+	remove: MapEvent;
 };
 
 /** Generic interface of `MapLibreEvent` or `MapBoxEvent` */